Skip to main content

Upload or Save File

Using this action, you can upload any type of file to your app (e.g., PDF, MP3, etc.). You can store the file on Firebase, Supabase storage, or your own server using an API. Once uploaded, you can access the file through its generated URL. This URL can be used to display the content immediately or store it in a database for future retrieval.

Prerequisites for Firebase
  1. Firebase should be connected to your project. Follow the instructions on this page for integrating Firebase with FlutterFlow.
  2. Firebase Authentication must be properly configured. Check out this page for setting up authentication.
  3. Firebase Storage must be set up and properly configured. It takes just a second! Follow the instructions on this page.
  4. At least one Firebase Collection should be configured for the project so that you can store the generated URL.
Prerequisites for Supabase
  1. Make sure to integrate Supabase into your app.
  2. Create a storage bucket in Supabase. Tip: To let anyone download the uploaded media, you can enable the 'Public bucket.'

img.png

  1. Apply additional security rules which determine who can access the bucket. Tip: If you are uploading to a folder structure like this 'pics/uploads,' here is how you can add a policy that allows only authenticated users to upload their profile picture.

Upload File: Tutorial​

Let's build a simple example that allows you to upload the PDF file. Here's how it looks:

Building the upload file feature comprises the following steps:

  1. Firebase only: deploying Firebase Storage rules
  2. Optional: enabling Web access
  3. Adding Upload/Save File action
  4. Preview uploaded file

1. Firebase only: deploying Firebase Storage rules​

Firebase storage rules define who can access the uploaded file. It is essential to set up and deploy the rules before getting started. First, you must enable the Firebase Storage on the Firebase Console and then deploy its security rules. You can do this from right inside FlutterFlow.

Check how to deploy the Firebase Storage rules.

2. Optional: enabling Web access​

If you plan to support the web version of your app or want to test the PDF upload feature in the Run Mode, you need to complete an additional configuration that is required for some file types, such as PDF, to work. Learn how to enable web access.

3. Adding Upload/Save File action​

Go to your project page on FlutterFlow and follow the steps below to define the action to any widget.

  1. Select the Widget (e.g., Button) on which you want to add the action.
  2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.
  3. Click on the + Add Action.
  4. Search and select the Upload/Save File (under Utilities > Upload Data) action.
  5. If you haven't integrated Firebase or Supabase yet, the default upload type will be Store media for upload. However, once integrated, you can choose the Upload Type as Firebase, Supabase or Local (Widget State).
  6. Use the File Type dropdown to specify whether you want to upload a PDF, Audio (MP3), ANY, or Uploaded Media. The Uploaded Media option is there for uploading the media stored on the device. If you choose Uploaded Media, ensure you add one more same action (before this action) with Upload Type set to Local Upload (Widget State).
  7. You can Allow multiple Files to be uploaded. After the multiple files are uploaded, you can access them via Set from Variable menu > Widget State > Uploaded File URLs (List <String>).
  8. To let users know whether the file is still being uploaded, you can enable the 'Show Snackbar' option.
  9. In Upload Type,
    1. If you selected Firebase, you must deploy the storage rules.
    2. If you selected Supabase, provide the Bucket Name and set the Uploaded Folder Path (e.g., attachments/pdfs). This is the path where the files will be uploaded.
    3. If you selected Local Upload (Widget State), you probably want to store the file on the device first and then upload it to your backend server via API. To do so, add the next action as an API call and select the API that will upload the file to your server. Note that the request body for this API must be in Multipart format. See how to configure an API for the multipart request body. Tip: When this type is selected, you have an option to directly display the PDF before it gets uploaded to your server; see here.

4. Preview uploaded file​

Once the file is uploaded, you get the uploaded file URL. You can use it to display the content inside the supported widget.

Here is an example showing a PDF file in a PdfView widget.

  1. Select the PdfViewer widget from the widget tree or from the canvas area.
  2. Move to the Properties Panel (on the right side of your screen) and scroll down to the PDF Viewer section.
  3. Find the Network Path and click on the Set from Variable.
  4. For media uploaded on Firebase or Supabase, select the Source as Widget State > Uploaded File URL.
  5. For media uploaded via API, select the Source as Action Outputs > [Action Output Variable Name] (Api Response). This should be the response of the API that was used to upload the file, and it must contain the URL of the uploaded file. To retrieve the url from API response, see how to use JSON path.
  6. You can display the placeholder until the current file is uploaded. To do so, click the Set from Variable and specify a placeholder URL under the Default Value property.
  7. Click on Confirm.

4.1 Access file from bytes (in memory/not yet uploaded)​

If you simply wish to display a PDF within your app without uploading it anywhere, or if you'd like to preview the PDF before sending it to your server through an API, you can achieve this by configuring the PDF Source as Uploaded File and specifying the Uploaded File source as Widget State -> Uploaded Local File.