In FlutterFlow (FF), when uploading a file to the local state, the original file name is lost, and FF assigns a generic name (e.g., "1745983544.pdf" instead of "abc.pdf"). While using a custom action can help extract the correct name, it cannot store the file in FF's local state due to type differences—FF expects FFUploadedFile, while custom actions return a File type.
To solve this, we implement a custom widget that handles both storing the uploaded file in the local state and preserving the correct file name in the app state.
Solution Approach:
Create a Component & Local State Variable:
Define a component (e.g., pdf_file_button_container) and add a local state variable of type Upload File (Bytes) to store the uploaded file.
Define an App State Variable for File Name:
Create a global app state variable (uploadedPdfFileName) to hold the original file name for easy access across the application.
Implement a Custom Widget (PdfFilePicker) for File Selection:
Add the file_picker package for selecting files.
Ensure the selected file is stored in the local state variable.
Extract and store the file name in the app state variable.
Display a button (FFButtonWidget) to trigger file selection.
Key Benefits of This Approach:
✅ Ensures the uploaded file is retained within FF’s local state.
✅ Extracts and stores the correct file name in the app state.
✅ Allows easy adaptation for different file types (by modifying allowed extensions).
By following these steps, developers can effectively manage file uploads while ensuring accurate file names in FlutterFlow.
Check out the below link for more details.
https://www.flutterflowdevs.com/blog/flutterflow-custom-widget-to-extract-file-name-and-store-uploaded-file-in-local-file