FlutterFlow Docs
Search…
Advanced Functionality πŸ€–
Upload Media Action
This Action helps you to upload a photo or video to Firebase Storage from the camera/gallery of the phone. On this page, you will learn how to set up an upload photo/video action, store your uploaded media to a Firebase Collection, and display the uploaded media on your app.
You can either continue with this step-by-step guide available below or follow this video tutorial:

Prerequisites

For uploading photos or videos to Firebase Storage, you should have the following configured on FlutterFlow:
  • Firebase should be connected to your project. Follow the instructions on this page for integrating Firebase with FlutterFlow.
  • Firebase Authentication must be properly configured. Check out this page for setting up authentication.
  • At least one Firebase Collection should be configured for the project so that you can store the generated URL.

Defining Upload Action

Go to your project page on FlutterFlow and follow the steps below to define an Upload Photo/Video Action to a widget:
  1. 1.
    Select the widget in which you want to set the Action.
  2. 2.
    Select the Actions from the Properties Panel (the right menu).
  3. 3.
    Click + Add Action button.
  4. 4.
    Choose a gesture from the dropdown among On Tap, On Double Tap, or On Long Press.
  5. 5.
    Select the Action Type as Upload Photo/Video.
  6. 6.
    Use the Media Type/Source to specify whether you want to upload a photo or a video, or both using this action.
  7. 7.
    Set the Media Source, from this dropdown you can choose between Camera, Gallery, and Either Camera or Gallery (this option will bring up a bottom sheet from where the user can choose the media source as Camera or Gallery).
  8. 8.
    If you are uploading a photo, you can set a maximum width and height to it by using the Max Width and Max Height properties respectively. This will modify the image dimension by maintaining the aspect ratio of the photo.
  9. 9.
    If Either Camera or Gallery is selected (in Step 7), you will be presented with a few more properties to define the Source Picker Style (the bottom sheet design). You can specify the Font Family, Text Color, and Background Color of the bottom sheet.
This action will upload the chosen photo or video to Firebase Storage and generate an URL to access the media resource. You can preview how the bottom sheet looks like (if you have selected Either Camera or Gallery option) by clicking on the Preview button:

Preview a photo

Once you have uploaded a photo to Firebase Storage, you can preview it easily using the URL generated.
For displaying a photo on the same page from where the Upload Photo/Video Action is called, follow the steps below:
  1. 1.
    Drag and drop a widget that can display an image, usually, you should use the Image widget. But if you want to display a circular image use the CircleImage widget.
  2. 2.
    Modify the properties of the Image widget as your requirement from the Properties Panel.
  3. 3.
    Make sure the Image Type is selected as Network.
  4. 4.
    Remove any predefined URL under the Path property.
  5. 5.
    Click Set from Variable beside Path.
  6. 6.
    Select the Source as Widget State and under Available Options choose Uploaded File URL.
  7. 7.
    Also, specify a placeholder image URL under the Default Value property.
  8. 8.
    Click on Save.
You should always specify a Default Value of the Image Path if you are displaying the image on the same page from where the upload Action is being called. Otherwise, you will face an error while running the app because the URL is empty initially. Only after the Upload Photo/Video Action is triggered and the image is stored on Firebase Storage, the URL is accessible.
For displaying the uploaded photo on a different page, you can use the Navigate Action and pass it as the image URL as a Parameter.

Play a video

Similar to previewing an image, you can get access to the uploaded video using the generated URL of Firebase Storage and play it inside the app. Just here you will need to use a different widget to preview the video.
It is recommended to load up the video using its URL on a separate page rather than previewing it on the same page from where it is being uploaded. The uploaded video may not load properly if trying to preview on the same page.
Follow the steps below to load the video using URL:
  1. 1.
    Create a new Page by clicking on the Add Page button present in the Tool Bar (top). Enter a name and select + Create New under Blank Page.
  2. 2.
    Click on the Define Parameters button present in the Properties Panel (right menu).
  3. 3.
    Clicking + Add Parameter button.
  4. 4.
    Enter a Parameter Name (eg: videoURL)
  5. 5.
    Select its Type (from the dropdown) as VideoPath.
  6. 6.
    Click Save.
Go back to the previous page where you had the Upload Action defined. Set another action, Navigate on the upload button for navigating to the new page having the parameter.
  1. 1.
    Click on + Add Action and select onTap.
  2. 2.
    Select the Action Type as Navigate and Navigation Type as Navigate to Page.
  3. 3.
    From Navigate To dropdown, select the new page that you created earlier.
  4. 4.
    Under Pass Parameters property, select the parameter name (in our case it's videoURL).
  5. 5.
    Set the Value Source to From Variable.
  6. 6.
    Select Source as Widget State and choose Uploaded File URL under Available Options.
Make sure the Navigate Action is present below the Upload Photo/Video Action.
If there are multiple actions, FlutterFlow triggers actions starting from the one defined on top. In this case Upload action should be on the top followed by the Navigate action, so that the app navigates to the new page only after the URL is generated.
Now, you are ready to preview the video on the page where you have passed the URL as a parameter. Follow the steps below to preview the video:
  1. 1.
    Drag and drop the VideoPlayer widget onto the canvas.
  2. 2.
    Modify the widget properties as per your requirement.
  3. 3.
    Set the Video Type as Network.
  4. 4.
    Remove any predefined URL under the Path property.
  5. 5.
    Click Set from Variable beside Path.
  6. 6.
    Select the Source as the parameter name that you had defined on this page (eg: videoURL).
  7. 7.
    (Optional) You can specify a Default Value for the Video Path that will be used if the Source value is not set.
  8. 8.
    Click on Save.
If you run the app on your device, the entire process of uploading and previewing a video looks like this:

Storing the uploaded media URL

You should store the generated URL inside any of your Firebase Collections so that you can easily access it later inside the app.
If you haven't defined any field to store the photo/video URL, add a new field inside the Collection where you want to store it, for example, photo_url or video_url.
Follow the steps below to create a new field:
  1. 1.
    To add a new field to the Firebase Collection, click on + Add Field button.
  2. 2.
    Enter a name for the field.
  3. 3.
    Using the Data Type dropdown, choose Image Path (for storing image URL) or Video Path (for storing video URL).
  4. 4.
    Set the Field Type as Single Element.
  5. 5.
    Click on Create.
Now, you are ready to store the URL in the Collection field:
  1. 1.
    Define a new Action on the same widget, click on + Add Action, and select onTap.
  2. 2.
    Select Action Type as Backend Call.
  3. 3.
    Choose Backend Action Type as Update Record.
  4. 4.
    Under Select Reference to Update, choose a Source and select the reference from Available Options. For example, if your video URL field is present inside the user Collection, choose Authenticated User (Source) > User Record Reference (Available Options).
  5. 5.
    Click on + Field under Set Fields.
  6. 6.
    Choose the field that you want to set, eg: video_url.
  7. 7.
    Select the Value Source as From Variable.
  8. 8.
    Select Source as Widget State and choose Uploaded File URL under Available Options.
  9. 9.
    Finally, make sure that this action is set right after the Upload Action. If you have any Navigate Action it should be below the Backend Call Action.
NOTE: You can move your Actions up or down using the respective arrows present beside each Action.

Web Access for PDFs and Other Files

Some types of files require additional configuration to be accessed on the web. In particular, the PDF Viewer requires network files (such as uploaded PDFs) to allow what is called Cross-Origin Resource Sharing (CORS). Without diving too deep into that, the important part is that if you want users to be able to upload and view PDFs using Firebase Storage, follow the instructions below:

Put On Your Developer Hat

You'll need to run a few commands to get started. Don't worry though! No programming experience required for this part, but you'll get to see how it's done πŸ™‚
If you do have programming experience, you may find it easier to follow this guide instead: https://firebase.google.com/docs/storage/web/download-files#cors_configuration​
Start by finding the Project ID of your Firebase project. You can find that in the Firebase settings tab as seen below.
Once you have that, follow these steps. Anywhere you see FIREBASE_PROJECT_ID , replace it with the project ID you found above:
Step 1
Go to the following link (remember to use your project ID):
You'll see a view at the bottom that looks like this (you may have to hit "Continue"):
Your Project ID should appear in yellow. If not, or if a different project is selected, you may have to tap on the down arrow (circled in red above) and select your project.
Step 2
Tap on the terminal (black screen), paste in the following command (again, replacing it with your Project ID in the last line), and hit Enter (or Return):
1
touch cors.json && \
2
echo [{\"origin\": [\"*\"], \"method\": [\"GET\"], \"maxAgeSeconds\": 3600}] > cors.json && \
3
gsutil cors set cors.json gs://FIREBASE_PROJECT_ID.appspot.com
Copied!
If you get a message to "Authorize Cloud Shell" make sure to hit "Authorize". Once the command runs it should give you an output similar to below. If so, it worked!
And with that you are done! PDFs and other uploaded files will now load in the web with no issues!

References

Know more about the widgets that are used on this page for displaying an image or video: