Warning!

This is a legacy document. The features described below are only usable within the classic generation environment.

Currently, Betty Blocks offers faster and more advanced options that are available in next-gen. Before you start working on some new features in your application, consider doing it using the next-gen version. In particular, you might find it useful to check out Creating custom components article.

Good luck!

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">
{{csrf_tag}}
<input type="file" name="file_upload" id="file_upload" accept="application/pdf">
<button>Save</button>
</form>

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:

Create a POST endpoint, we set the url in our form to /upload_file.
Create an input variable of the type text, we named the variable file_upload.
Open the action on the page and add a create event.
Assign the file_upload variable to a file-property.
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.

➝ Next article: HowTo submit a file through a page form using custom HTML