💬
Get Help
LG
Leon Goldschmidt

FlutterFlow File Upload: Local Storage, Display, and Delayed Firebase Integration

Actions & Logic

Hi everyone,

I'm building a form in FlutterFlow with the following fields:

  • Name (TextField)

  • Employee ID (TextField)

  • Message (TextField)

  • Request Type (Dropdown)

  • File Upload (FileUploadButton)

I've successfully created the form layout and connected it to my Firebase collection ("artDerAnfrage"). However, I'm having trouble with the file upload functionality.

Here's what I want to achieve:

  1. When a user clicks the "FileUploadButton", they should be able to select one or more files from their device (PDFs, PNGs, etc.).

  2. These files should be stored locally on the device temporarily.

  3. The names of the selected files should be displayed in a list or text area below the "FileUploadButton" (e.g., "file1.pdf, file2.png").

  4. Only when the user clicks the "Submit" button should the form data (including the locally stored files) be uploaded to Firebase. The files should be uploaded to Firebase Storage, and the file URLs should be stored in the "artDerAnfrage" collection along with the other form data.

What have you tried so far?

What I've Tried So Far:

  1. Local Storage: I'm using the FileUploadButton and storing the uploaded files locally on the device.

  2. Widget State for File Paths: I'm storing the local file paths in a list within the widget's state.

  3. App State for Persistence: I'm then passing the file path list from the widget state to the app state, so the file paths are retained even if a widget rebuilds.

  4. Submit Button and Firebase Upload: I want to trigger the upload to Firebase Storage only when the user clicks the "Submit" button.

Did you check FlutterFlow's Documentation for this topic?
No
3