Firebase, Cloud Storage and Flutter

Lift yourself up…

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

Begin….

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)

---

Enter Flutter…

Question : How to select files from our device ?

Answer : https://pub.dartlang.org/packages/file_picker

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 =
        FirebaseStorage.instance.ref().child(fileName);

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(
      File(filePath),
      StorageMetadata(
        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.

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.

---

Downloading…

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

Either we can use the Image.network 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;
    print(byteNumber);

---

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