upload-files

Overview

Uploading through the UI

When selecting any bucket, you can upload a file using the Upload button in the top right corner. This will open a modal that lets you select and upload one or multiple files of any type.

By clicking on any of the listed files, a preview of the respective file with some metadata, will be shown. From there you can open it in a new tab, download it, generate a presigend url or delete it.

You can also do any of these actions by opening the context menu by clicking on the ellipsis icon on the right side of any list item.

You can also create folders to further organize your files.

Uploading through a flow

The File Storage Action also allows you instead of creating an upload url to directly upload a file from an API Route, Workflow or Function.

This can done via Direct Upload within the file storage action. Follow the link for more info and examples on that.

At the moment this works only with files from {{$file.}} which are files send to your API Route with a maximum of 10MB. But we are already working on adding new file sources, for example from the response of http actions. Let us know which other actions you want to have added next to support file handling.

Uploading programmatically

If you want to upload a file from your own application, you can do so by simply sending a put request to the presigend url you receive from the File Storage Action. The file needs to be set as request body and a Content-Type header with the respective file type needs to be set as well.


function uploadFile(presignedUrl, file) {
  try {
    const response = await fetch(presignedUrl, {
      method: 'PUT',
      body: file,
      headers: {
        'Content-Type': file.type,
      },
    });
    if (response.ok) {
      console.log('File uploaded successfully');
    } else {
      console.error('Failed to upload file', response.statusText);
    }
  } catch (error) {
    console.error('Error uploading file', error);
  }
}