Content API - POSTing Files

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>