Junos Space SDK > Developer Guides > Junos Space Application Developer Guide > Programming with the Junos Space SDK > Developing Junos Space Applications > Creating the UI

Implementation of the File Uploader Using the REST API

This topic describes the procedure for implementing the Web file uploader with REST APIs. An example of the file uploader can be located in the HelloSpace Reference Application, which you can upload to an empty Eclipse workspace from the following location:

<SDK Install Folder>/Juniper Networks/Junos Space SDK/docs/samples/Sample Applications/HelloSpace.zip

A device image uploaded to the HelloSpace Application with the file uploader is used as an image for the device (whose platform name matches with the name of the image JPG or PNG file uploaded).

Implementation of Client Code in HTML

The HTML code that is used in the HelloSpace application to render and perform image uploading is displayed below. This rendering and uploading is achieved by executing an HTTP POST request to the /api/jssdk/hello-space/images API with the multipart/form-data media type:

In the case of the HTML client, the ImageUpload.html file is bound to the ImageUpload UI task using the "Html Config" section in the "module.xml Editor":

Use of the HTML Config Selection in module.xml

Alternatively, the file uploader client code could have been written using Ext/JS, or any other Web client. The API call which the form submits is as follows:

The body/payload of the HTTP POST request will contain both the file name and the file content uploaded with the file chooser.

REST Web Service Implementation Using HelloSpaceWebSvc

The REST Interface for implementing the HTTP REST POST request is displayed below. Note that the RestEasy org.jboss.resteasy.plugins.multipart.MultipartFormDataInput class is used as an input parameter to the REST method which will have the HTTP Request containing the file name and the binary image content. This method uses "multipart/form-data" on the @Consumes annotation to represent the HTTP payload.

To implement the REST File Upload code, use the addImage() method in HelloSpaceRestImpl.java:

The code displayed above, extracts both the image file name and the binary contents of the image using the getHeaders() and getBody() methods of the MultpartFormDataInput.