HowTo submit a file through a page form using custom HTML

After reading this article you will know:

• How to create a form which lets you upload a file to Bettyblocks

• How to save an posted file in your application

The goal

We want to be able to let a user save a file in the frontend. The user will see a form in which a file can be selected and then saved.

Creating the form

Create a webpage on which you place the form. In the example below is shown how the basic form is build in HMTL.

• action="/upload_file"

This sets the url to which the form will send the data.

• method="POST"

This sets the method which is used to send the data to the endpoint. 

• enctype="multipart/form-data"

This will enable the form to send the file to the endpoint. If this is not included the endpoint won't be able to save the file.

• #

This places a Cross Site Forgery Protection input field in your form which is used to secure the endpoint by only accepting requests that have the CSRF tag.

• type="file"

This sets the type of the input field to a file input.

• name="file_upload"

This sets the name of the variable that you will receive on your endpoint.

• accept="application/pdf"

This determines which filetypes a user can pick when adding a file to the form. The current setting only allows PDF files to be picked. You can read more about the accept attribute here.

Creating the Post

Follow the following steps:

1. Create a POST endpoint, we set the url in our form to /upload_file.

2. Create an input variable of the type text, we named the variable file_upload.

3. Open the action on the page and add a create event.

4. Assign the file_upload variable to a file-property.

5. Save the event.

The best practise is to put a redirect or render webtemplate event after the create to show the user that the file is successfully saved.