How to let visitors upload files in a form

In TeleportHQ, visitors attach files to a form with the File Upload Field, for example a CV on a job application form. The field keeps the chosen files in a page state (a value stored on the page) until the form is sent. An On Form Submit workflow then reads that state and saves the files to your project's file storage with an Upload File(s) step. The field itself works on any TeleportHQ website; the workflow that saves the files makes the project a web app.

Before you start#

• The field doesn't change your project; the workflow does. Adding a File Upload Field and its state keeps a TeleportHQ website a website. Saving the files needs an On Form Submit workflow, and on a website, starting one opens the Enable Web App features? window first: click Enable Web App features to go on, or Keep as a Presentation Website to stop. A web app's code can't be downloaded. See What's the difference between a website and a web app?
• Files aren't saved by standard form submissions. When a workflow handles a form, the form's submissions no longer appear in Growth → Forms. The workflow decides where the data goes, for example a database table and an email to you.
• Storage space. Uploaded files go to your web app's file storage. See How to let visitors upload and store files (Runtime Storage).

Steps#

1. Add the File Upload Field#

1. Open the page with your form, and select the form or a field inside it.
2. In the left sidebar, click Elements, then open the Primitives tab.
3. In the Forms group, click File Upload Field. The field is added to the selected form, with the label "Upload files".

2. Create a state for the files#

1. Above the canvas, at the top right, click Page settings.
2. Open the State tab.
3. Click Create new state.
4. In Name, type cvFiles. In Type, choose array.
5. Click Create.

If the form sits inside a component, such as your footer, create the state in that component: open the component and use Component settings instead of Page settings. The field only lists the states of the page or component it's in. See How to store and use values with States.

3. Set up the field#

1. Select the File Upload Field. In the right panel, find File Upload Field Settings.
2. In State, choose cvFiles.
3. Turn Multiple Files on if visitors may pick more than one file.
4. In Accept, type the allowed file types, for example .pdf,.docx. A new field starts with image/* (pictures only). Leave it empty to allow any file.
5. In Label, type the text shown in the drop zone, for example Upload your CV.

4. Save the files when the form is sent#

1. Select the form on the canvas.
2. In the right panel, in the Workflows section, click More event types (the ⋯ button). On a website, confirm Enable Web App features in the window that opens.

3. In Select Event Type, click On Form Submit. TeleportHQ creates a workflow that starts with Form is Submitted and opens it.

   

4. Add a Get Local State step. In State Property, choose cvFiles.
5. Add the Upload File(s) step from the File Storage category. In File(s), use the result of the Get Local State step. Optionally set Allowed MIME Types, for example application/pdf, and Max File Size in bytes, for example 5242880 for 5 MB.
6. Add the next steps you need, for example save the application and the file's address to a database table, or send yourself an email.
7. Publish your site.

For help building workflows, see How to create a workflow and How to let visitors upload and store files (Runtime Storage).

Check that it worked#

1. On your published site, fill in the form and pick a file.
2. Send the form.
3. Check where your workflow saves the data, for example your database table or your inbox. The uploaded file's details are there.

Troubleshooting#

The State list shows "(missing)" The state the field used was deleted or renamed. Create an array state again and choose it in State. Each upload field needs its own state.

The State list only shows "Select a state…" Only array states of the same page appear. Create one with Page settings → State → Create new state.

Files are picked but nothing is saved Nothing uploads when a visitor picks a file. The files are saved only when the On Form Submit workflow runs its Upload File(s) step. Check that the workflow exists, that Get Local State reads the field's state, and that the project is published.

The submission doesn't appear in Growth → Forms Forms handled by a workflow don't store submissions in Growth → Forms. The workflow decides where the data goes.

Good to know#

• Each File Upload Field needs its own state. For two upload fields, for example a CV and a portfolio, create two array states.
• The picked files stay in the field after the form is sent until the page reloads, unless your workflow empties the state, for example with an Update Local State step.
• The field works on your published TeleportHQ site. In an HTML code download it stays empty; the download window lists such elements.
• Each uploaded file gets a plain web address. Don't use a TeleportHQ File Upload Field to collect passwords or confidential documents. See Who can open uploaded files in How to let visitors upload and store files (Runtime Storage).
• The upload limits of the Assets Manager apply to files you upload in the editor, not to visitors' files. TeleportHQ's file storage takes visitor files of up to 50 MB each. To allow less, set Max File Size in the Upload File(s) step.