Developing a simple JavaScript client using the Alfresco REST API - Uploading content

Document created by alfresco Employee on Mar 16, 2017Last modified by alfresco Employee on Mar 27, 2017
Version 5Show Document
  • View in full screen mode

This content is part of the tutorial describing how to develop a very simple JavaScript client using the Alfresco 5.2 REST APIs. In this document is described how to upload content using the the JavaScript client, introduced in the previous parts of the tutorial. To better describe the tasks, we are going to use “a step by step“ approach, more practical and easy to follow for our goal.

 

Uploading content using the Alfresco JavaScript client

 

Starting from the Alfresco client, previously introduced, let's see how the content upload look like and how it works. As first step, let's open the browser and access to the URL below.

http://<alfresco_url>:<alfresco_port>/alfresco-client/

Once the page appears, fill in the requested fields with the correct values and click Go. As described in the previous task, the list of nodes in the folder will be visible. Now that the folder is shown in the panel, let's see how to upload new content. Clicking on the Show Upload Panel button, the uploading form will be shown, as presented in the following screenshot.

 

 

 

To upload the content, fill in the file name (extension included) and choose the file from the file system. Click the Upload button and your file will be uploaded into Alfresco repository in the current folder. The client will show you an updated list of nodes. Below is an example uploading a text file called My new content.txt.

 

 

Description of the solution for uploading content

 

Looking at the index.html file (using Microsoft Visual Studio) let's focus on the AJAX calls related to the uploading of content. Below the Javascript code related to the Upload button.

 

// Upload submit event.
$('#upload-submit-button').click(function(e) {

  ...

  var uploadFiles = document.getElementById('alfresco-upload-files').files;

  var form = new FormData();
  form.append("name", uploadName);
  form.append("nodeType", "cm:content");
  form.append("filedata", uploadFiles[0]);

  $.ajax({
    username: alfrescoLogin,
    password: alfrescoPassword,
    url: alfrescoBaseUrl + "/alfresco/api/-default-/public/alfresco/versions/1/nodes/" + alfrescoNodeId + "/children",
    method: "POST",
    mimeType: "multipart/form-data",
    data: form,
    async: true,
    crossDomain: true,
    processData: false,
    contentType: false,
    success: function(result,status,xhr) {
      ...
      $('#go-button').click();
    },
    error: function(xhr,status,error) {
      ...
    }
  });
}

 

Looking at the source code, the upload is possibile using the AJAX call on the /alfresco/api/-default-/public/alfresco/versions/1/nodes/<nodeId>/children service with method POST. Once the REST service is executed with success, the refresh of the list of nodes is requested, invoking the click event directly using the Go button. 

 

Next task - How to preview new content. >>

Attachments

    Outcomes