Lift yourself up…

Uploading….a tireless work, anyone does at any time.Why not me????


The world of uploading was narrowed down by me which maybe correspond to our daily activities…….

Downloading latest wallpaper (image downloading), sending audio (audio uploading) and applying through LinkedIn (pdf uploading).

This article covers how to upload different types of files..

  1. Image (Of-course)
  2. Video (obviously)
  3. Audio (Kidding me??)
  4. Pdf (I’ll do for my CVs)
Firebase, Cloud Storage and Flutter….
Firebase, Cloud Storage and Flutter….

Enter Flutter…

Question : How to select files from our device ?

Answer :

File picker plugin, which allows us to access any type of file from any device (Android / iOS).

How to use : Add as dependency in pubspec.yaml and adding the dart file in your file.

file_picker: ^1.1.1
import 'package:file_picker/file_picker.dart';

Now, we can get any type of file from the device. Next step is uploading….

Enter firebase…(Cloud Storage)

Install the plugin firebase_storage

dependencies:  firebase_storage: ^2.0.0

import 'package:firebase_storage/firebase_storage.dart';

Next, linking the selected file and the firebase storage.

NOTE : You need to have firebase project and all the setup done, before using any utilities related to Firebase…

final StorageReference storageRef =

StorageReference (Part of firebase_storage), is used to get an instance of the Cloud Storage reference.

Here, the fileName is the name which you want to give to the file uploaded.

final String fileName = Random().nextInt(10000).toString() +'.$extension';  //IN MY CASE.....

Next step is to put the above file in the storage upload task using : 

final StorageUploadTask uploadTask = storageRef.putFile(
contentType: type + '/' + extension,

storageRef.putFile() : takes in the file.

You can specify the various parameters regarding the file in StorageMetadata:

  1. Content-Type : The content type (MIME type) of the StorageReference.
  2. Cache-Control, Content-Disposition, Content-Encoding, Content-Language and CustomMetaData.

This uploadTask is a future, so you might wanna show the user some progress bar etc. After the file is uploaded, you may want to get the download url…right???? We do this by….

final StorageTaskSnapshot downloadUrl = 
(await uploadTask.onComplete);
final String url = (await downloadUrl.ref.getDownloadURL());
print('URL Is $url');

Some documentation of getDownloadURL() : 

Asynchronously retrieves a long lived download URL with a revokable token. This can be used to share the file with others, but can be revoked by a developer in the Firebase Console if desired.

By this time, you should see the file inside the Cloud Storage.

Firebase and Cloud Storage.
Firebase and Cloud Storage.

As soon as the image enters our cloud storage, a Cloud Function gets triggered which then converts the big image into a thumbnail.

NOTE : We need to write a Cloud Function for generating thumbnail.

Cloud Function.
Cloud Function.


The download url which we got from above, will be used for downloading the image.

Either we can use the widget for displaying the image or we can save the file in the cache and then show..

Depends on You….:)

For the second part, lets see

String uri = Uri.decodeFull(httpPath);
final RegExp regex = RegExp('([^?/]*\.(jpg))');
final String fileName = regex.stringMatch(uri);

We take the downloaded url (here the httpPath) and get the fileName only out of the entire url.

final Directory tempDir = Directory.systemTemp;
final File file = File('${tempDir.path}/$fileName');

This initiates temporary directory and creates a file inside that directory. You may wanna use import ‘dart:io’.

//actual downloading stuff
final StorageReference ref = FirebaseStorage.instance.ref().child(fileName);
    final StorageFileDownloadTask downloadTask = ref.writeToFile(file);

This downloads the file from the cloud storage bucket and writes to the temp file created above.

For giving some time to download, you may wanna use the below line :

final int byteNumber = (await downloadTask.future).totalByteCount;

You can upload videos, pdfs, mp3 just by selecting those files and then continuing as above.


  • flutterapp

    Thanks for the image tutorial.
    How can I do the following after putting the image jpg to firebase storage?
    1) Check if the image already exists, if so, do not copy
    2) store the image link into Firebase collection document
    3) Get the link in second screen from Firebase collection document
    4) Use the link to display the image on second screen

Valuable comments