File uploads

Upload images, documents and more with your form using FormBackend

It’s easy to accept file uploads for your form. Go ahead and create a new form on FormBackend. Let’s take a look at the following HTML:

<form action="{your-form-url}" method="POST" enctype="multipart/form-data">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="my_file">An image</label>
  <input type="file" id="my_files" name="my_files[]" accept="image/*" multiple>

  <button type="submit">Submit</button>
</form>

Notice how we have a enctype attribute on the form with a value of multipart/form-data. This is required for your form to upload files.

You’ll also see we have the following field:

<input type="file" id="my_file" name="my_file">

We have a simple field of type file. Which means you can select one file from your computer and upload that with your FormBackend submission.

Upload multiple files

You can add multiple fields of type file. But you can also have one input field, that allows for multiple file uploads. You do that by adding a multiple attribute on the form field. You also have to name your file field like so: my_files[] - notice the [] at the end. You can name the field whatever you’d like but you have to add [] to the end of it in order to accept multiple files for one field.

So your field should look like this:

<input type="file" id="my_files" name="my_files[]" multiple>

Only accept certain file types

It’s possible to configure the HTML file field to only accept certain file types. Let’s say you’re accepting people’s resumes and only want them to submit in .pdf format you can add a accept attribute to the field, with a value of .pdf like so:

<input type="file" id="resume" name="resume" accept=".pdf">

Or if you only want to accept image files, it will look like this:

<input type="file" id="resume" name="resume" accept="image/*">

This can be even more specific, let’s say you only want to accept image files of the type png:

<input type="file" id="resume" name="resume" accept="image/png">