Submitting Content with Images, Captions, or any Multipart Content

The API can accept multipart content when sent in a specific format.

In the example below, we will be using jQuery/ajax:

The code and sample widget we have created can be found here.
More information regarding the returned data can be found here.

API end point

To send a single piece of text content through the API, see the article about Submitting Content.

Our Comments Widget is an excellent implementation example of how a user can post media content with text captions. Have a look at the Comments Widget Github here.

Once the user has provided their Name, Avatar (optional), image and comment into the widget, clicking ‘Submit’ will trigger the widget to generate and send the information to our API.

Comments and a breakdown of functions are located within the Github download.
Let’s now take a look at the how we setup the value to be transmitted below:

Comment Engine

Code:Getting the contents

This section will pull-in the commenter’s username, comment and image:

   var that = this,
        username = $(this.opts.idName).val().trim(),
        comment = $(this.opts.idComment).val().trim(),
        file = $(this.opts.idImg)[0].files;

Code:Making ajax call to see if the event is open

        url: this.opts.apiEndPoint + "/event/" + this.opts.threadId + "?format=json&Token=" + that.opts.token,
        dataType: 'json',
        type: 'GET',
        success: function (response) {......}

Code:Once the username is confirmed, you can send the image and content over
Note: The data storing the image and comment will be added to the call using the format below:

                            filedata.append('file', file);
                            filedata.append('Content', comment);

Note the name it must be under for our system to ingest it; 'file' and 'Content'

                    success: function (data, textStatus, XMLHttpRequest) {
                        // send in the post, the important parts are the "file" "content" "token" ""
                        var filedata = new FormData();
                        if (typeof file !== "undefined") {
                            filedata.append('file', file);
                            filedata.append('Content', comment);
                        } else {
                            filedata.append('Content', comment);
                        filedata.append('Token', that.opts.token);
                        filedata.append('Auth', data.Auth);
                            url: that.opts.apiEndPoint + "/event/" + that.opts.threadId + "?format=json",
                            data: filedata,
                            processData: false,
                            contentType: false,
                            type: 'POST'

Once completed, merge the whole string and pass it.


success: function (data, textStatus, XMLHttpRequest) {

        if (typeof data.Message !== "undefined") {
           $(that.opts.idMsg).html("Response: " + data.Message + ". Thanks for submitting.").show();
      } else {
           $(that.opts.idMsg).html("Image Upload complete. Thanks for submitting.").show();

Here is an example of the Browser’s Responses when an image and comment is updated within the widget: