Insights into what moves us. Contributions from the Structr team and guests. The Structr Blog

Christian Morgner
19. October 2016

Simplified file upload

Next in line on the list of new features in the upcoming 2.1 release is a small update that allows you to use the standard HTML file upload form to upload files into an application built with Structr. Until now, that was a rather complicated process, because the upload handling had to be done using JavaScript.

With this simple change, you can now use the below pure HTML form to upload a file to a folder of your choice, and set properties on the file.

<form action="/structr/upload" method="post" enctype="multipart/form-data">
    <input type="hidden" name="parent" value="${first(find('Folder', 'name', 'uploads'))}" /> 
    <input type="hidden" name="redirectOnSuccess" value="/success-page?newFile=" />
    <input type="hidden" name="appendUuidOnRedirect" value="true" />
    <input type="hidden" name="visibleToPublicUsers" value="true" /> 
    <input type="file" name="file"/>
    <input type="submit" value="Upload" />
</form>

Note the action attribute of the form. That is the URL of the Structr upload servlet which will handle the request. The method and enctype attributes contain the default values necessary for uploading files.

The important part are the <input> fields inside the form. You can set arbitrary properties, such as the parent folder (which will be set to the uploads folder if one exists). The name of the uploaded file will be set automatically.

The new feature consists of the two parameters redirectOnSuccess and appendUuidOnRedirect, which can be used to instruct Structr to redirect the browser to a custom URL when the upload is finished. If you supply appendUuidOnRedirect with a value of true, you can for example redirect the user to a new page with a detail view of the page he/she just uploaded.

The above form will redirect the user to the following URL when the upload is finished, provided that the UUID of the uploaded file is de1067b758b24ee08b57021eae8659dd:

/success-page?newFile=de1067b758b24ee08b57021eae8659dd

Note

The <input type="file"/> field must be the last input field in the form except for the submit field!

Availability

You will find the new feature in the current master branch on GitHub, or in the next snapshot of Structr 2.1.0 which will be released shortly.