Logo for FormBackend
« back to blog
tutorial

How to upload files via your form

Collecting files from your users through a form is a common requirement. Whether you need resumes for a job application, images for a design request, or documents for a support ticket, FormBackend makes it straightforward.

In this guide, we’ll walk through setting up file uploads on your HTML form, handling multiple files, and receiving uploads via email.

Basic file upload setup

The key to file uploads is adding the enctype="multipart/form-data" attribute to your <form> tag. This tells the browser to encode the form data in a way that supports file transfers.

Here is a complete working example:

<form action="https://www.formbackend.com/f/your-form-token" method="POST" enctype="multipart/form-data">
  <label for="name">Name</label>
  <input type="text" id="name" name="name" required>

  <label for="my_file">Attach a file</label>
  <input type="file" id="my_file" name="my_file">

  <button type="submit">Upload File</button>
</form>

Without enctype="multipart/form-data", the browser sends file names as plain text instead of the actual file contents. This is the most common mistake when setting up file uploads.

Viewing uploaded files

Once a user submits the form, the file appears in your FormBackend dashboard alongside the other form fields. You will see the file name as a clickable link that lets you download it directly.

Files are stored securely and are only accessible to you through your FormBackend account.

Accepting multiple files

You can accept more than one file by adding the multiple attribute to the file input:

<label for="documents">Upload documents</label>
<input type="file" id="documents" name="documents[]" multiple>

This lets users select several files at once from the file picker dialog. All selected files will be attached to the submission.

Restricting file types

If you only want to accept certain file types, use the accept attribute:

<!-- Only images -->
<input type="file" name="photo" accept="image/*">

<!-- Only PDFs -->
<input type="file" name="document" accept=".pdf">

<!-- Images and PDFs -->
<input type="file" name="attachment" accept="image/*,.pdf">

This adds a filter in the file picker so users are guided toward the right file types. Keep in mind that this is a browser-level hint and not a strict enforcement on the server side.

Receiving files via email

FormBackend can send you an email notification every time someone submits your form. By default, uploaded files appear as download links in the notification email.

If you prefer to receive the actual files as email attachments, you can turn that on in the Notifications settings for your form. This is useful when you want to save the files directly from your inbox without logging in to FormBackend. See our email attachments documentation for details.

Common use cases

File uploads work well for:

  • Job application forms where candidates attach resumes and cover letters
  • Support forms where users attach screenshots of issues
  • Order forms where customers upload design files or specifications
  • Registration forms that require document uploads for verification
  • Feedback forms where users share images or files for context

Sending files to other services

You can combine file uploads with FormBackend’s integrations. For example, submissions with file attachments can be forwarded via webhooks to your own backend or sent to services like Slack and Google Sheets.

Next steps