Workflows

How to let visitors upload and store files (Runtime Storage)

September 15, 2026
How to let visitors upload and store files (Runtime Storage)

In a TeleportHQ web app, files your visitors upload, such as a CV or a photo for a custom cake, are saved by the Upload File(s) workflow step into your project's Runtime Storage. The usual setup is a File Upload Field inside a form, plus a form-submit workflow that uploads the chosen files. You can see every uploaded file in the Assets Manager under Uploads → Runtime Storage.

Before you start

  • Uploads need workflows, so your project must be a web app. The File Upload Field itself works on any website; the workflow that saves the files makes the project a web app. See What is a web app in TeleportHQ?.
  • The form's File Upload Field needs its own page state (a list) to hold the chosen files. See How to store and use values with States.
  • Storage space depends on whether the web app has a Web App slot. See Good to know below.

Steps

This example lets bakery customers attach a photo of the cake design they want to the Order cake form.

1. Add the upload field to the form

  1. Create a page state for the files, for example designPhotos, as a list (array).
  2. Add a File Upload Field inside the Order cake form. See How to let visitors upload files in a form.
  3. With the field selected, in the right panel, open File Upload Field Settings:
    • State: choose designPhotos.
    • Multiple Files: turn on to allow several files.
    • Accept: type image/* to allow only images.
    • Label: type Upload your cake design.

Nothing is uploaded when a visitor picks a file. The files wait in the state until the form's workflow uploads them.

2. Upload the files when the form is sent

  1. Select the form. In the right panel, in the Workflows section, click More event types (the ⋯ button), then On Form Submit in Select Event Type. TeleportHQ creates a workflow that starts with Form is Submitted and opens it. See How to run a workflow when a button is clicked.
  2. Click the round + (Add node) below the trigger. Point at State and click Get Local State. Set State Property to designPhotos.
  3. Below it, add Upload File(s) from File Storage.
  4. In File(s), use the result of Get Local State from the Context panel. See How to use data from one workflow step in the next.
  5. Optional: set Allowed MIME Types, for example image/jpeg, image/png, and Max File Size in bytes, for example 5242880 for 5 MB.
  6. Optional: add Create Item to save each file's File URL with the order. See How to save, update or delete database records with a workflow.
  7. Optional: add Update Local State to empty designPhotos after the upload. TeleportHQ doesn't empty it by itself, so the files would otherwise stay picked.
  8. Publish your site.
The TeleportHQ Upload File(s) step settings, with the File(s), Allowed MIME Types and Max File Size fields highlighted

Check that it worked

  1. On your published site, attach a photo and send the form.
  2. In the editor, in the left sidebar, open the Assets Manager and click the Uploads tab.
  3. Click the Runtime Storage card. The Runtime Storage panel opens next to it. The new file appears under Files, and Storage Usage shows the space used. Use the Download button to open a file.
The TeleportHQ Runtime Storage panel in the Assets Manager, with the Storage Usage section highlighted

Troubleshooting

Runtime Storage says "No files yet" "Files uploaded by your application's users will appear here." No upload has run on your live site yet. Check that you published after adding the workflow, and that the Upload File(s) step gets the files from the state.

"Failed to load files" The list couldn't load. Click Retry.

The field shows "<state name> (missing)" The state it used was deleted or renamed. Pick an existing state under State, or create a new one. Each upload field needs its own state.

Uploads stop working once storage is full The web app reached its storage limit. This only happens to a web app without a Web App slot. Delete files you don't need with a Delete File step, or give the project a slot. See Why does my web app need a slot, and what is the 7-day window?.

Good to know

  • Storage space: a web app with a Web App slot has no storage limit. The trial and Premium include one slot, and you can buy more. Its Runtime Storage panel shows the badge Dynamic and "no storage limit on this project". A web app without a slot, during its 7-day window, has a limited space, and the panel shows how much of it is used. See Why does my web app need a slot, and what is the 7-day window?.
  • Other upload steps: List Files lists stored files, Get File Details reads one, and Delete File removes one permanently.
  • Without a form: add Pick File(s) from Browser to a button's On Click workflow, then pass its result to Upload File(s).
  • Who can open uploaded files: each upload returns a File URL, a plain web address with no sign-in and no expiry. Anyone who has the link can open the file. Don't ask visitors to upload passwords, ID documents or other confidential files.
  • Files uploaded by visitors are separate from the images and files you upload yourself in the Assets Manager. See What is the Assets Manager?.
Share

Related Articles

What are workflows?

A workflow in TeleportHQ is a visual recipe that makes your web app do something, one trigger (like a button click or a form submission) followed by steps (like saving to a database, sending an email or opening a page), built without writing code; adding one makes a website a web app.

How to let visitors upload files in a form

In TeleportHQ, you let visitors attach files (such as a CV or photos) by adding a File Upload Field to your form, linking it to a page state, and attaching an On Form Submit workflow that reads the state and saves the files with an Upload File(s) step; the field works on any website, but the workflow makes the project a web app.

How to run a workflow when a button is clicked

In TeleportHQ, select the button on the canvas, click On Click in the Workflows section at the top of the right panel, choose Create new workflow, then add the steps the click should run; More event types offers form, input and other browser events.

How to use data from one workflow step in the next

In a TeleportHQ workflow, every step can use the results of the trigger and earlier steps (the workflow Context), by dragging a value from the Context panel onto a field or picking it with the Select from context button.

How to store and use values with States

In TeleportHQ, a state is a named value, like isMenuOpen or activeTab, that elements can read and clicks can change; you create one for a page or component from the Page settings or Component settings button above the canvas, in the State tab, and it works in every project, website or web app; global states live in Project settings and need a web app.

What is the Assets Manager?

The Assets Manager is the TeleportHQ editor panel (left sidebar, Ctrl/Cmd+4) where you upload, organize and check your project's images, videos, documents, audio and 3D files, and pick free stock photos, videos, 3D models, sounds and icons, in the tabs Uploads, Stock, 3D, Audio and Icons.