Content API - POSTing Files documentation for the dotCMS Content Management System


Note:

The Content API has been deprecated. New applications should use the Workflow REST API, and existing applications using the Content API should migrate to using the Workflow API as soon as practical.

Support for posting content using the Content API may be removed in a future release.

The following example of performs both a simple post and a JSON submit using a multipart/form-data:

<script type="text/javascript" src="//dotcms.com/documentation/demo/jquery.datetimepicker.js"></script>
<link rel="stylesheet" href="//dotcms.com/documentation/demo/jquery.datetimepicker.css">

<script type="text/javascript">
$(function () {
    $('#sysPublishDate').datetimepicker({
        format:'m/d/Y h:i A'
    });
});
</script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#myPost").submit(function(e) {
            $.ajax({
                url: '/api/content/save/1',
                type: 'POST',
                cache:false,
                data: dataObj,         

                success: function(data,status,xhr) {
                    console.log("works!");
                    window.location="/demos/form-success.html";
                },
                error: function(data,status,xhr) {
                    $('requestBtn').attr('disabled', false);
                    $('requestBtn').prop('disabled', false);
                    $( "button" ).removeClass( "disabled" ).addClass( "btn-primary" );
                    console.log(data);
                    alert("Uh Oh, your request failed. Please check your entries and try again");
                },
            });
        });
    });
</script>

<form id="webup" action="/api/content/save/1" method="POST" enctype="multipart/form-data" id="myPost">
    <input type="hidden" id="contentType" name="contentType" value="News"/>
    <input type="hidden" id="hostfolder" name="hostfolder" value="demo.dotcms.com">
    <input type="hidden" id="urlTitle" name="urlTitle" value="TempURLTitle"/>

    <div class="form-group">
        <label for="title" class="required">Title</label>
        <input type="text" class="form-control" id="title" name="title" value="Sample News Article Title">
    </div>

    <div class="form-group">
        <label for="sysPublishDate" class="required">Publish Date</label>
        <input type="text" class="form-control" id="sysPublishDate" name="sysPublishDate">
    </div>

    <div class="form-group">
        <label for="byline" class="required">Byline</label>
        <input type="text" class="form-control" id="byline" name="byline" value="Sample byline text">
    </div>

    <div class="form-group">
        <label for="story" class="required">Story</label>
        <textarea id="story" name="story">Here is some story text</textarea>
    </div>

    <div>
        <label for="image">Image File</label>
        <input name="image" id="image" type="file" />
    </div>

    <br/><br/>
    <div class="form-group">
        <input type="submit" value="Submit"/>
        <input type="button" value="JSON Submit" onclick="sendRequest();" />
    </div>
</form>


<script type="text/javascript">
    function sendRequest () {
        var formData = new FormData();

        var title = document.getElementById("title").value;
        var sysPublishDate = document.getElementById("sysPublishDate").value;
        var byline = document.getElementById("byline").value;
        var story = document.getElementById("story").value;
        var hostfolder = document.getElementById("hostfolder").value;
        var urlTitle = document.getElementById("urlTitle").value;

        var json={
            'title': title,
            'sysPublishDate': sysPublishDate,
            'byline': byline,
            'story': story,
            'urlTitle': urlTitle,
            'hostfolder': hostfolder,
            'stName':'News'
        };

        formData.append('json',JSON.stringify(json));
        formData.append("image", document.getElementById('image').files[0]);

        var request = new XMLHttpRequest();
        request.open("POST", "/api/content/save/1");
        request.setRequestHeader("DOTAUTH", window.btoa("admin@dotcms.com:admin"));
        request.send(formData);
        document.location='http://localhost:8080/demos/form-success.html';
    }
</script>