This is an old revision of the document!


File Upload API

Blocks provides an HTTP API for uploading files, for example images. Uploaded files are temporarily stored in a subdirectory of the temp directory inside your Blocks root directory, and should then be moved or further processed by a script. As an example, this application note describes how to upload photos subsequently shown on a Display Spot.

Upload file using multipart/form-data

URL: /rest/upload/multipart

The form must contain the following data:

  • target: The name of the subdirectory in the PIXILAB-Blocks-root/temp directory in which to store the file.
  • file: The file to upload.
  • fileName (optional): An optional file name. A leading * (asterisk) can be used to create a unique temporary file name.

The server returns the path to the file under the temp directory or, in case of errors, an error message along with a status code indiating an error.

Here's an HTML form for uploading a file to the temp/test directory. The HTML document containing the form must be served by the Blocks server:

<form action="/rest/upload/multipart" method="post" enctype="multipart/form-data">
    <input type="text" name="target" value="test" hidden>
    <input type="file" name="file">
    <input type="submit">
</form>

Upload file using application/x-www-form-urlencoded

URL: /rest/upload/urlencoded/{target}/{filename}

  • {target} names a subdirectory inside the temp directory in your Blocks root, where to store the file.
  • {filename} is the name of the file. A leading * (asterisk) can be used to autogenerate a unique, temporary file name. A ".jpg" file extension will be automatically appended to the file name if no file extension is specified.

The server returns the path inside the temp directory where the file was stored or, in case of an error, an error message along with status code indiating an error.

Here's is a JavaScript example showing how to upload a text file with a unique file name using this method. The promise returned by the fetch call will eventually provide the path to the file if the upload was successful.

fetch("/rest/upload/urlencoded/test/*.txt", {
    method: "post",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    body: "Hello world"
});