Upload Photo/Video

Using this action, you can upload a photo or video to your app. The uploaded file is stored on Firebase Storage or your own server (using API) and can be accessed via the uploaded URL. You can use the uploaded URL to immediately show its content or store it in a database to later access it.
On this page, you will learn how to set up an upload photo/video action, display the uploaded media and store the uploaded media URL.
Upload photo/video
Prerequisites (only for Firebase)
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.
Firebase Storage must be set up and properly configured. It takes just a second! Follow the instructions on this page.
At least one Firebase Collection should be configured for the project so that you can store the generated URL.
Adding Upload Photo/Video action
Follow the steps below to add this 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. If it's the first action, click + Add Action button. Otherwise, click the "+" button below the previous action tile and select Add Action.
3.Search and select the Upload Photo/Video (under Upload Media) action.
4.Set the Upload Type. If you haven't integrated Firebase yet, the default upload type will be Local (Widget State).
5.Use the Media Type/Source to specify whether you want to upload a photo or a video, or both using this action.
6.Using Media Source 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).
7.If you are uploading a photo, you can set a maximum width and height for it by using the Max Width and Max Height properties, respectively. This will modify the image dimension by maintaining the photo's aspect ratio.
8.You can Allow multiple images. Note that for this to work, the Media Source must be set to only Gallery.
9.You can control the Image Quality by using the slider or directly entering the value. The value must be 0 to 100, where 100 is the original quality.
10.To let users know whether the image is still uploading, you can enable the Show Snack bar.
11.If you selected Either Camera or Gallery, you would 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.
12.In step 4:
1.If you selected Firebase (in step 4), you must deploy the storage rules.
2.if you selected Local (Widget State), you probably want to upload the media 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.
13.Once you have uploaded the media, see how to display it on a widget in the next section.
Upload media to Firebase
Upload media via API
Upload media to Firebase
Upload media via API
Showing uploaded media
For displaying the media on the same page from where the Upload Photo/Video Action is called, follow the steps below:
1.Drag and drop the appropriate widget that can display the uploaded media. For example, to display uploaded photo, you can use the Image widget. Similarly for video, use the VideoPlayer widget.
2.Move to the properties panel, set its Type to Network, and click Set from Variable.
3.For media uploaded on Firebase, select the Source as Widget State > Uploaded File URL.
4.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 media and it must contain the URL of the uploaded media. To retrieve the url from API response, see how to use JSON path.
5.To show the placeholder image/video until the current one is uploaded, click the Set from Variable and specify a placeholder image/video URL under the Default Value property.
6.Click on Confirm.
You should always specify a Default Value if you are displaying the media 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 media is stored on Firebase Storage, the URL is accessible.
Showing media uploaded on Firebase 
Showing media uploaded via API
Showing media uploaded on Firebase
Showing media uploaded via API
Storing the uploaded media URL
You should store the uploaded media URL in your database (Firebase collection or database table) so that you can easily access it later inside the app.
Save URL in Firebase collection
To save URL in a Firebase collection:
1.Ensure you have a field that can store a photo or video path, for example, photo_url (Data Type: Image Path) or video_url (Data Type: Video Path).
2.Now use the Firebase Create/Update document action to store the URL in a field.
While choosing Value Source, you can set either Widget State > Uploaded File URL or directly choose Uploaded Photo/Video.
Saving uploaded URL in Firestore document
Saving uploaded URL in Firestore document
Field in collection
Save URL via backend API
You can use your backend AP to store the URL, like you would do for any other data. Here's an example of updating a data via API.
Adding BlurHash
BlurHash is a new and innovative way of generating image placeholders that are both compact and visually appealing. When you're scrolling through a web or mobile app, you may have noticed that some images take longer to load. This can be frustrating and disrupt the user experience. That's where BlurHash comes in - it provides a way to display a blurred version of the image that looks similar to the original while the real image is loading in the background.
With BlurHash, you can create more visually appealing and contextually relevant placeholders that better reflect the content of the image being loaded. It can be used in a variety of contexts, from photo galleries and social media apps to e-commerce and news apps.
Here's how it looks when images are loaded with BlurHash:
Using BlurHash to display cat images
Here are the steps to generate and use the BlurHash:
1.​Generate BlurHash​
2.​Save BlurHash​
3.​Use BlurHash​
1. Generate BlurHash 
There is no separate action to generate the Blurhash. Instead, you can generate it using the Upload photo/video action. From the page where you upload the image, use this action and simply enable the Include Blur Hash option. This will automatically create a Blurhash for the image being uploaded.
Generate Blurhash 
2. Save BlurHash
The generated BlurHash is accessible via the Widget State > Uploaded Local File > Media Blur Hash. Before you use the BlurHash, It is recommended to store it in the same collection or table where you save the image URL for convenient access.
Collection schema to store BlurHash
Here's how you access and save the BlurHash in a Firebase collection using create document action:
Saving BlurHash
Tip: You can also create a custom data type called 'image' and then add two fields such as 'image_url' and 'image_blurhash' like this:
Custom data type to store image URL and BlurHash
3. Use BlurHash
To use BlurHash, select the Image widget, move to the properties panel, enable the Use Blur Hash option, and then set the Blur Hash String value from a variable.
Use BlurHash