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.

<form action="/upload_file" method="POST" enctype="multipart/form-data">
<input type="file" name="file_upload" id="file_upload" accept="application/pdf">
  • 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. You can read more about the methods here.

  • 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.

  • #{{csrf_tag}}

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.

Did this answer your question?