Content API - POSTing Files

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.

Note: Admin passwords are assumed to be admin, as on the demo site and starters prior to 22.06. In the case of versions 22.06 or later, this is no longer the default; now, admin passwords default to a random string generated on first startup and displayed in the server logs. This starter password can also be pre-configured through the DOT_INITIAL_ADMIN_PASSWORD environment variable.

<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:8082/demos/form-success.html';
    }
</script>