Flutter: Upload Files to Firebase Storage (Image, Video, PDF, etc.)

how to upload image files to firebase storage or video files or any other file that you like to upload we start with two buttons to select and later upload a file to firebase firstly we select the file in this case we pick a file using the file picker package with this we can select any file type from the local phone storage next we get a result with this picked file that we want to save within our state and lastly we use this picked file to show a preview in our app so in this case we display the name of the file that we have picked alternatively you can display any other preview and now we upload this file to firebase simply convert the picked file to a file object also define where you want to store the file on firebase in this case we include the name of the picked file and lastly upload the file to firebase using the firebase storage package in your firebase console go to the storage section and click on get started simply check out this video where i explain in only 2 minutes how to set up firebase if you have never done this before and now select test mode and click on next next you can choose any location for your firebase server and click on done with this we can upload this file from our flutter app to firebase refresh your website and you see he has created a files folder and inside of it is our uploaded file next we create an upload task with this we can wait until the file upload is finished and when it is finished then we get the download link of the uploaded file with this if we upload a file then we get the download link of this file that we could open up inside a browser next below the upload button we create a progress and with the help of a stream builder we get then the progress of our upload and lastly we display this progress within our ui therefore we create a stack and inside of it we have a linear progress indicator and a text of the progress with this if you upload a file then you also see the progress of the file upload to make this work we go to the upload file method and wraps the upload task around with the set state and after the upload is finished we set the upload task to null [Music] you

Channel: HeyFlutter․com

Views: 77,988

Keywords: file upload, firebase, firebase cloud storage, firebase storage, firebase storage upload image, firebase tutorial, flutter, flutter file upload, flutter firebase, flutter firebase upload, flutter tutorial, flutter upload image, flutter upload image from gallery, flutter upload image to firebase storage, flutter upload image to server, google flutter, upload file to firebase storage, upload files, upload image, upload video

Id: 3x92z0oHbtY

Length: 2min 27sec (147 seconds)

Published: Tue Mar 29 2022