Compress Video Flutter and Upload to Firebase

This Activeness helps y'all to upload a photo or video to Firebase Storage from the camera/gallery of the telephone. On this page, you will learn how to set an upload photo/video action, shop 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, y'all should have the following configured on FlutterFlow:

• Firebase should exist connected to your project. Follow the instructions on this folio for integrating Firebase with FlutterFlow.

• Firebase Authentication must be properly configured. Bank check out this page for setting upwardly hallmark.

• At least one Firebase Collection should be configured for the project and so that you lot tin shop the generated URL.

Defining Upload Activeness

Go to your project page on FlutterFlow and follow the steps beneath to define an Upload Photo/Video Action to a widget:

1. ane .

   Select the widget in which you lot want to prepare the Action.

3. three .

   Click + Add Action push button.

4. 4 .

   Cull a gesture from the dropdown among On Tap , On Double Tap , or On Long Press .

5. 5 .

   Select the Action Blazon equally Upload Photo/Video .

6. six .

   Use the Media Type/Source to specify whether you desire to upload a photograph or a video, or both using this action.

7. 7 .

   Set up the Media Source , from this dropdown you tin can choose between Camera , Gallery , and Either Camera or Gallery (this option will bring upward a bottom sheet from where the user can choose the media source as Camera or Gallery).

8. viii .

   If you are uploading a photo, you lot can set a maximum width and acme to it past using the Max Width and Max Meridian backdrop respectively. This volition 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 volition be presented with a few more properties to define the Source Picker Style (the bottom sheet blueprint). You tin specify the Font Family , Text Color , and Background Color of the bottom canvass.

This action volition upload the called photo or video to Firebase Storage and generate an URL to access the media resource. Yous can preview how the bottom canvas looks like (if y'all take selected Either Camera or Gallery option) by clicking on the Preview push button:

Preview a photo

In one case you have uploaded a photo to Firebase Storage, yous can preview it hands using the URL generated.

For displaying a photograph on the same page from where the Upload Photo/Video Action is called, follow the steps below:

1. 1 .

   Elevate and drop a widget that tin display an paradigm, usually, you should use the Prototype widget. But if you want to display a circular paradigm use the CircleImage widget.

2. 2 .

   Modify the properties of the Image widget as your requirement from the Properties Console .

3. iii .

   Brand sure the Epitome Type is selected as Network .

4. 4 .

   Remove any predefined URL under the Path property.

5. 5 .

   Click Set from Variable beside Path.

6. half dozen .

   Select the Source equally Widget State and under Available Options choose Uploaded File URL .

7. 7 .

   Also, specify a placeholder image URL under the Default Value belongings.

You lot should always specify a Default Value of the Image Path if you are displaying the paradigm on the same page from where the upload Activity is being called. Otherwise, y'all will confront an error while running the app because the URL is empty initially. Only after the Upload Photo/Video Action is triggered and the prototype is stored on Firebase Storage, the URL is attainable.

For displaying the uploaded photograph on a different page, yous can use the Navigate Activeness and pass it as the image URL as a Parameter.

Play a video

Like to previewing an paradigm, you can go access to the uploaded video using the generated URL of Firebase Storage and play information technology inside the app. Just here yous will need to use a dissimilar widget to preview the video.

It is recommended to load upwardly the video using its URL on a split up page rather than previewing information technology on the aforementioned page from where it is being uploaded. The uploaded video may not load properly if trying to preview on the same folio.

Follow the steps below to load the video using URL:

1. ane .

   Create a new Page past clicking on the Add together Page push button present in the Tool Bar (meridian). Enter a name and select + Create New under Blank Page .

2. two .

   Click on the Define Parameters button present in the Properties Console (correct menu).

3. 3 .

   Clicking + Add together Parameter push button.

4. iv .

   Enter a Parameter Proper noun (eg: videoURL )

5. v .

   Select its Type (from the dropdown) as VideoPath .

Become dorsum to the previous page where y'all had the Upload Activeness defined. Set another action, Navigate on the upload push button for navigating to the new page having the parameter.

1. 1 .

   Click on + Add Activity and select onTap .

2. 2 .

   Select the Activity Blazon every bit Navigate and Navigation Blazon every bit Navigate to Page .

3. iii .

   From Navigate To dropdown, select the new page that you created earlier.

4. 4 .

   Under Pass Parameters property, select the parameter proper name (in our case it'south videoURL ).

5. five .

   Fix the Value Source to From Variable .

6. 6 .

   Select Source every bit Widget State and choose Uploaded File URL under Available Options .

Make sure the Navigate Activity is present below the Upload Photo/Video Action .

If there are multiple actions, FlutterFlow triggers actions starting from the one divers on pinnacle. In this instance Upload action should be on the peak followed past the Navigate activeness, and then that the app navigates to the new folio only afterward the URL is generated.

Now, you are set up to preview the video on the folio where you have passed the URL as a parameter. Follow the steps below to preview the video:

1. ane .

   Elevate and drop the VideoPlayer widget onto the canvass.

2. 2 .

   Modify the widget properties as per your requirement.

3. 3 .

   Set the Video Type equally Network .

4. 4 .

   Remove whatsoever predefined URL under the Path property.

5. 5 .

   Click Set from Variable abreast Path.

6. 6 .

   Select the Source as the parameter proper noun that you had divers on this folio (eg: videoURL ).

7. vii .

   (Optional) You can specify a Default Value for the Video Path that will exist used if the Source value is not set.

If yous run the app on your device, the entire process of uploading and previewing a video looks similar this:

You should store the generated URL inside whatsoever of your Firebase Collections so that you can easily admission it later inside the app.

If you haven't defined any field to store the photo/video URL, add a new field within 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 together a new field to the Firebase Collection, click on + Add Field button.

2. two .

   Enter a name for the field.

3. 3 .

   Using the Data Blazon dropdown, choose Epitome Path (for storing paradigm URL) or Video Path (for storing video URL).

4. 4 .

   Set the Field Type equally Single Element .

Now, you are ready to store the URL in the Drove field:

1. ane .

   Define a new Action on the same widget, click on + Add Activity , and select onTap .

2. two .

   Select Activeness Type as Backend Call .

3. three .

   Choose Backend Action Blazon as Update Record .

4. iv .

   Nether Select Reference to Update , cull a Source and select the reference from Bachelor Options . For instance, if your video URL field is present inside the user Collection, choose Authenticated User (Source) > User Record Reference (Available Options).

5. five .

   Click on + Field under Set Fields .

6. vi .

   Cull the field that you want to set, eg: video_url .

7. 7 .

   Select the Value Source as From Variable .

8. 8 .

   Select Source equally Widget State and choose Uploaded File URL under Available Options .

9. ix .

   Finally, brand sure that this action is ready correct after the Upload Action . If you have any Navigate Action it should exist beneath the Backend Call Activeness .

NOTE: You can move your Actions upward or down using the respective arrows present beside each Action.

Web Admission 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 let what is called Cross-Origin Resource Sharing (CORS). Without diving likewise deep into that, the of import 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 function, but you'll become to run into how it's done 🙂

Kickoff by finding the Project ID of your Firebase projection. Yous can find that in the Firebase settings tab as seen below.

One time you lot have that, follow these steps. Anywhere y'all see FIREBASE_PROJECT_ID , replace information technology with the project ID you establish above:

Go to the following link (remember to apply your project ID):

You'll see a view at the bottom that looks like this (yous may take to hit "Continue"):

Your Project ID should appear in yellow. If not, or if a different project is selected, yous may have to tap on the downwards arrow (circled in reddish above) and select your project.

Tap on the concluding (black screen), paste in the following control (once again, replacing it with your Projection ID in the last line), and hit Enter (or Return ) :

echo [{\"origin\": [\"*\"], \"method\": [\"GET\"], \"maxAgeSeconds\": 3600}] > cors.json && \

gsutil cors prepare cors.json gs://FIREBASE_PROJECT_ID.appspot.com

If y'all get a message to "Qualify Cloud Shell" make sure to striking "Authorize". In one case 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 nearly the widgets that are used on this page for displaying an image or video:

• Playing video: VideoPlayer

phillipsmothough.blogspot.com

Source: https://docs.flutterflow.io/advanced-functionality/actions/upload-photo-video-action

Share this post