how add image to firestore in flutter image picker

Question

I want add photo to firestore. Can you please tell me how to do that?

I am using image picker to pick photo in my flutter app.

My code is below

import 'package:flutter/material.dart';
import 'package:onlinecity/component/TextField/inputField.dart';



import 'package:onlinecity/component/Button/roundedButton.dart';
import 'package:onlinecity/component/Button/textButton.dart';
import 'style.dart';
import 'package:onlinecity/theme/style.dart';
import 'package:flutter/services.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:async';
import 'dart:io';

class AddOfferScreen extends StatefulWidget {


  @override
  AddOfferScreenState createState() => new AddOfferScreenState();
}

class AddOfferScreenState extends State<AddOfferScreen> {
  final GlobalKey<FormState> _formKey = new GlobalKey<FormState>();
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  bool _autovalidate = false;
  String _productTitle;
  String _category;
  String _contactNumber;
  Future<File> _imageFile;

  void _onImageButtonPressed(ImageSource source) {
    setState(() {
      _imageFile = ImagePicker.pickImage(source: source);
    });
  }

  _onPressed() {
    print("button clicked");
  }

  void showInSnackBar(String value) {
    _scaffoldKey.currentState
        .showSnackBar(new SnackBar(content: new Text(value)));
  }

  bool _handleSubmitted() {
    final FormState form = _formKey.currentState;
    if (form.validate()) {
      form.save();
      return true;
    }
    return false;
  }
  void validateAndSubmit() async{
    if (_handleSubmitted()){
      try {
        Firestore.instance.collection('todos').document().setData({"productTitle":_productTitle,"category":_category,"contactNumber":_contactNumber});

      }
      catch (e){
        print('Error: $e');
      }
    }

  }

  void _showaddphoto(){
    AlertDialog dialog = new AlertDialog(
      actions: <Widget>[
        new IconButton(icon: new Icon(Icons.camera_alt), onPressed: () => _onImageButtonPressed(ImageSource.camera),
          tooltip: 'Take a Photo'),
        new IconButton(icon: new Icon(Icons.sd_storage), onPressed:  () => _onImageButtonPressed(ImageSource.gallery),
          tooltip: 'Pick Image from gallery')

      ],
    );
    showDialog(context: context,child: dialog);

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    Size screenSize = MediaQuery.of(context).size;
    //print(context.widget.toString());
    return new Scaffold(
        key: _scaffoldKey,
        body: new SingleChildScrollView(
          child: new Container(
            padding: new EdgeInsets.all(16.0),
            decoration: new BoxDecoration(image: backgroundImage),
            child: new Column(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                new SizedBox(
                    height: screenSize.height / 2 + 20,
                    child: new Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Text(
                          "CREATE ACCOUNT",
                          textAlign: TextAlign.center,
                          style: headingStyle,
                        )
                      ],
                    )),
                new Column(
                  children: <Widget>[
                    new Form(
                        key: _formKey,
                        autovalidate: _autovalidate,
                        //onWillPop: _warnUserAboutInvalidData,
                        child: new Column(
                          children: <Widget>[
                            new FutureBuilder<File>(
                              future: _imageFile,
                              builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
                                if (snapshot.connectionState == ConnectionState.done &&
                                    snapshot.data != null) {
                                  return new Image.file(snapshot.data);
                                } else if (snapshot.error != null) {
                                  return const Text('error picking image.');
                                } else {
                                  return const Text('You have not yet picked an image.');

                                }
                              },
                            ),
                            new RaisedButton.icon(onPressed: _showaddphoto, icon: new Icon(Icons.add_a_photo), label: new Text('Add Photo')),

                            new InputField(
                              hintText: "product title",
                              obscureText: false,
                              textInputType: TextInputType.text,
                              textStyle: textStyle,
                              textFieldColor: textFieldColor,
                              icon: Icons.person_outline,
                              iconColor: Colors.white,
                              bottomMargin: 20.0,
                              validateFunction: (value)=> value.isEmpty ? 'UserName can\'t be empty' : null,
                              onSaved: (value)=> _productTitle = value,
                            ),

                            new InputField(
                              hintText: "Category",
                              obscureText: false,
                              textInputType: TextInputType.emailAddress,
                              textStyle: textStyle,
                              textFieldColor: textFieldColor,
                              icon: Icons.mail_outline,
                              iconColor: Colors.white,
                              bottomMargin: 20.0,
                              validateFunction: (value)=> value.isEmpty ? 'Email can\'t be empty' : null,
                              onSaved: (value)=> _category = value,
                            ),
                            new InputField(
                              hintText: "Contact Number",
                              obscureText: true,
                              textInputType: TextInputType.text,
                              textStyle: textStyle,
                              textFieldColor: textFieldColor,
                              icon: Icons.lock_open,
                              iconColor: Colors.white,
                              bottomMargin: 40.0,
                              validateFunction: (value)=> value.isEmpty ? 'Contact number can\'t be empty' : null,
                              onSaved:  (value)=> _contactNumber = value,
                            ),
                            new RoundedButton(
                                buttonName: "Continue",
                                onTap: validateAndSubmit,
                                width: screenSize.width,
                                height: 50.0,
                                bottomMargin: 10.0,
                                borderWidth: 1.0)
                          ],
                        )),
                    new TextButton(
                      buttonName: "Terms & Condition", onPressed: _onPressed,buttonTextStyle: buttonTextStyle,)
                  ],
                )
              ],
            ),
          ),
        ));
  }
}

Answer 1

  import 'package:firebase_storage/firebase_storage.dart';

  /////////

        var fileName = "fileName.jpeg";
  StorageUploadTask putFile =
      storage.ref().child("folder/$fileName").putFile(_image);
  putFile.future.catchError(onError);

  UploadTaskSnapshot uploadSnapshot = await putFile.future;

  print("image uploaded");

  Map<String, dynamic> pictureData = new Map<String, dynamic>();
  pictureData["url"] = uploadSnapshot.downloadUrl.toString();


  DocumentReference collectionReference =
      Firestore.instance.collection("collection").document(fileName);

  await Firestore.instance.runTransaction((transaction) async {
    await transaction.set(collectionReference, pictureData);
    print("instance created");
  }).catchError(onError);

Here, this will put file to storage, and then save downloadUrl to your collection. instead of document(fileName) you can choose your own document ID.

Answer 2

I think it's better to use Cloud Storage and write only its reference to Cloud Firestore. Cloud Firestore isn't for saving media like images, sounds or movies.

Answer 3

I would recommend uploading the image to cloud storage. You can then download the url and upload the url to firestore.

Here's the code to upload an image to storage.

Future uploadFiles(File file) async {
  try {
    await firebase_storage.FirebaseStorage.instance.ref('Images/image.png').putFile(file);
    print("Successfully upload file ${i + 1}");
  } on firebase_core.FirebaseException catch (e) {
    print('error is ${e.message}');
  }
}