How to submit a file through a page form using custom HTML

Sam van de Kreeke

Published: 25-10-2019

Last updated: 27-08-2020

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">

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


This sets the method which is used to send the data to the endpoint. You can read more about the methods here.


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.


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


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


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.

In this tutorial

Not sure where to start?

Click here to register and start learning