💬
Get Help
LG
Leon Goldschmidt

FlutterFlow File Upload: Local Storage and 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 ("Kontaktanfragen"). 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 "Kontaktanfragen" collection along with the other form data.

Any help or guidance on this would be greatly appreciated!

Thanks in advance, Leon Goldschmidt

What have you tried so far?

I've tried using the "Store file for upload: upload local (widget state)" action for the upload button then in action 2 update app state: set app variable (don't know which value I set) in FlutterFlow, the in the submit button I used: validate form (action 1) -> create document (with the form fields and connected it it to the collection) (action2) (probably not the correct way) but I'm not sure how to combine it with local storage, display the file names, and then upload everything to Firebase only after the "Submit" button is clicked.

Did you check FlutterFlow's Documentation for this topic?
No
1
6 replies