Flutter – Upload Images on FireStore Storage

Firestore is a free platform that provides users or developers to test their apps without any cost. However, you have to pay a small amount of money with which you hosted your app and earn money through their services. Firebase or Firestore provides a variety of services:

• Firestore Database
• Analytics
• Security
• Verification and many more

In this article, we will discuss how to upload the image to the Firestore.

Implementation

First, you have to add the dependency from the pubs.dart website. Just write image picker there will appear the dependency,

import 'package:image_picker/image_picker.dart';

Another package is:

import 'package:firebase_storage/firebase_storage.dart';

Starting with how to upload the image:

First, declare the variable named:

File? _image;

This is the code part that will create the center widget which checks if the _image variable is empty then it will declare “No image selected ” else the image will be shown.

Expanded(
         child: Center(
         child: _image == null
                 ? Text('No image selected.')
                       : Image.file(_image!),
       ),
),

The next code is that it creates the button if it is clicked then it will redirect you to the gallery and allows you to select the image.

ElevatedButton(
               onPressed: () async {
                   final image = await ImagePicker().getImage(source: ImageSource.gallery);
                           if (image != null) {
                             _image = File(image.path);
                           }
                         },
                   child: Text('Select image'),
  ),

Next code part is it will set the variable name, storage reference by the name of ‘driver _images’ in Firebase and the put method is used to upload the image to the Firebase then we also use the downloadUrl variable which gets the URL through the reference which is used at the time of importing the image and other details.

var imageName = DateTime.now().millisecondsSinceEpoch.toString();
var storageRef = FirebaseStorage.instance.ref().child('driver_images/$imageName.jpg');
var uploadTask = storageRef.putFile(_image!);
var downloadUrl = await (await uploadTask).ref.getDownloadURL();

Here is the full code in Dart:

Dart

import 'dart:io';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:image_picker/image_picker.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class RealtimeDatabaseInsert extends StatelessWidget {
 RealtimeDatabaseInsert({Key? key}) : super(key: key);

 var nameController = new TextEditingController();
 var ageController = new TextEditingController();
 var dlController = new TextEditingController();
 var adController = new TextEditingController();
 var phnController = new TextEditingController();

 final firestore = FirebaseFirestore.instance;
 File? _image;
 get data => null;

 @override
 Widget build(BuildContext context) {
   return Center(
       child: Scaffold(
     body: SafeArea(
       child: SingleChildScrollView(
         child: Padding(
           padding: const EdgeInsets.all(20.0),
           child: Column(
             children: [
               Text(
                 'Insert Driver Details',
                 style: TextStyle(fontSize: 28),
               ),
               Text("Add Data"),
               Container(
                 height: 150,
                 width: 300,
                 decoration: BoxDecoration(
                   border: Border.all(color: Colors.black),
                   borderRadius: BorderRadius.circular(20),
                 ),
                 child: Center(
                   child: Column(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: [
                       Expanded(
                         child: Center(
                           child: _image == null
                               ? Text('No image selected.')
                               : Image.file(_image!),
                         ),
                       ),
                       ElevatedButton(
                         onPressed: () async {
                           final image = await ImagePicker().getImage(source: ImageSource.gallery);
                           if (image != null) {
                             _image = File(image.path);
                           }
                         },
                         child: Text('Select image'),
                       ),
                     ],
                   ),
                 ),
               ),
               SizedBox(
                 height: 30,
               ),
               SizedBox(
                 height: 50,
               ),
               TextFormField(
                 controller: nameController,
                 maxLength: 15,
                 decoration: InputDecoration(
                     labelText: 'Name',
                     border: OutlineInputBorder(
                         borderSide: BorderSide(color: Colors.amber))),
               ),
               SizedBox(
                 height: 15,
               ),
               TextFormField(
                 controller: ageController,
                 keyboardType: TextInputType.number,
                 decoration: InputDecoration(
                     labelText: 'Age',
                     border: OutlineInputBorder(
                         borderSide: BorderSide(color: Colors.amber))),
               ),
               SizedBox(
                 height: 15,
               ),
               TextFormField(
                 controller: dlController,
                 maxLength: 20,
                 decoration: InputDecoration(
                     labelText: 'Driving Licencse Number',
                     border: OutlineInputBorder(
                         borderSide: BorderSide(color: Colors.amber))),
               ),
               SizedBox(
                 height: 15,
               ),
               TextFormField(
                 controller: adController,
                 decoration: InputDecoration(
                     labelText: 'Address',
                     border: OutlineInputBorder(
                         borderSide: BorderSide(color: Colors.amber))),
               ),
               SizedBox(
                 height: 15,
               ),
               TextFormField(
                 controller: phnController,
                 maxLength: 10,
                 keyboardType: TextInputType.number,
                 decoration: InputDecoration(
                     labelText: 'Phone No.',
                     border: OutlineInputBorder(
                         borderSide: BorderSide(color: Colors.amber))),
               ),
               SizedBox(
                 height: 20,
               ),
               ElevatedButton(
                 onPressed: () async {
                   if (nameController.text.isNotEmpty &&
                       ageController.text.isNotEmpty &&
                       dlController.text.isNotEmpty &&
                       adController.text.isNotEmpty &&
                       phnController.text.isNotEmpty
                   && _image.toString().isNotEmpty) {
                     showDialog(
                       context: context,
                       builder: (BuildContext context) {
                         return AlertDialog(
                           title: Text("Confirmation"),
                           content: Text(
                               "Are you sure you want to submit these details?"),
                           actions: [
                             TextButton(
                               child: Text(
                                 "Cancel",
                                 style: TextStyle(color: Colors.amber),
                               ),
                               onPressed: () {
                                 nameController.clear();
                                 ageController.clear();
                                 dlController.clear();
                                 adController.clear();
                                 phnController.clear();
                                 Navigator.of(context).pop();
                               },
                             ),
                             TextButton(
                               child: Text(
                                 "Submit",
                                 style: TextStyle(color: Colors.amber),
                               ),
                               onPressed: () async {
                                 // Upload image file to Firebase Storage
                                 var imageName = DateTime.now().millisecondsSinceEpoch.toString();
                                 var storageRef = FirebaseStorage.instance.ref().child('driver_images/$imageName.jpg');
                                 var uploadTask = storageRef.putFile(_image!);
                                 var downloadUrl = await (await uploadTask).ref.getDownloadURL();

                                 firestore.collection("Driver Details").add({
                                   "Name": nameController.text,
                                   "Age": ageController.text,
                                   "Driving Licence": dlController.text,
                                   "Address.": adController.text,
                                   "Phone No.": phnController.text,
                                   // Add image reference to document
                                   "Image": downloadUrl.toString()
                                 });
                                 Navigator.of(context).pop();
                                 nameController.clear();
                                 ageController.clear();
                                 dlController.clear();
                                 adController.clear();
                                 phnController.clear();
                               },
                             ),
                           ],
                         );
                       },
                     );
                   }
                 },
                 child: Text(
                   "Submit Details",
                 ),
                 style: ElevatedButton.styleFrom(
                     backgroundColor: Colors.amber,
                     shape: RoundedRectangleBorder(
                         borderRadius: BorderRadius.circular(10))),
               )
             ],
           ),
         ),
       ),
     ),
   ));
 }
}

This is how the data is uploaded to the Firebase 

And the images are also being uploaded to the storage section of Firebase

And our app screen looks like this 

This is how the images in the Firestore are being uploaded in Flutter using Android Studio.