how to upload image on flutter to MySQL

I am a newbie in a flutter. Can someone show me how to upload an image to my MySQL? I can’t find any solution in the past weeks.

My Code:

import 'dart:io';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as HTTP;
import 'package:image_picker/image_picker.dart';
import 'package:phpfood/OwnerPage.dart';
import 'globals.dart' as globals;
import 'dart:async';

class AddProduct extends StatefulWidget {
  @override
  _AddProductState createState() => _AddProductState();
}

class _AddProductState extends State<AddProduct> {

  TextEditingController controllerName = new TextEditingController();
  TextEditingController controllerPrice = new TextEditingController();
  TextEditingController controllerType = new TextEditingController();

  File _image;

  Future getImageGallery() async{
    // ignore: deprecated_member_use
    var imageFile = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _image = imageFile;
    });
  }
  Future getImageCamera() async{
    // ignore: deprecated_member_use
    var imageFile = await ImagePicker.pickImage(source: ImageSource.camera);
    setState(() {
      _image = imageFile;
    });
  }

 Future addProduct() async{

    var url = 'http://10.0.2.2/foodsystem/addproduct.php';
    //String base64Image = base64Encode(_image.readAsBytesSync());
    //String fileName = _image.path.split("/").last;


    http.post(url, body: {
      "productname": controllerName.text,
  "productprice": controllerPrice.text,
  "producttype": controllerType.text,
  "product_owner": globals.restaurantId,
  //"image": base64Image,
  //"imageName": fileName,
  "image": _image.path,
  //"image": _image.path.split('/').last,
});
  }
 /* Future addProduct(File imageFile) async{
    // ignore: deprecated_member_use
var stream= new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
var length= await imageFile.length();
var uri = Uri.parse("http://10.0.2.2/foodsystem/uploadg.php");

var request = new http.MultipartRequest("POST", uri);

var multipartFile = new http.MultipartFile("image", stream, length, filename: basename(imageFile.path));

request.files.add(multipartFile);
request.fields['productname'] = controllerName.text;
request.fields['productprice'] = controllerPrice.text;
request.fields['producttype'] = controllerType.text;
request.fields['product_owner'] = globals.userId;

var respond = await request.send();
if(respond.statusCode==200){
  print("Image Uploaded");
}else{
  print("Upload Failed");
    }

  }*/

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("ADD PRODUCT"),),
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: ListView(
          children: [
        new Column(
          children: [
            SizedBox(
              height: 25,
            ),
            Container(
              height: 230,
              width: 250,
              child: Center(
                child: _image == null
                ? new Text("No Image Selected!") : new Image.file(_image),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 110),
              child: Row(
                children: [
                  RaisedButton(
                    child: Icon(Icons.image),
                    color: Colors.red.shade200,
                    onPressed: getImageGallery,
                  ),
                  RaisedButton(
                    child: Icon(Icons.camera_alt),
                    color: Colors.red.shade200,
                    onPressed: getImageCamera,
                  ),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("Product Name", style: TextStyle(fontSize: 18),),
            ),
            Padding(
              padding: const EdgeInsets.only(left:10,right:10,top:0,bottom:0 ),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(15)),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    controller: controllerName,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      hintText: 'Nasi Lemak Kerang',
                      border: InputBorder.none,
                    ),
                  ),
                ),
              ),
            ),
            /*new TextField(
              controller: controllerName,
              decoration: new InputDecoration(
                hintText: "Nasi Lemak Kerang",
              ),
            ),*/
            SizedBox(
              height: 10,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("Product Price (RM)", style: TextStyle(fontSize: 18),),
            ),
            Padding(
              padding: const EdgeInsets.only(left:10,right:10,top:0,bottom:0 ),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(15)),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    controller: controllerPrice,
                    textAlign: TextAlign.center,
                    autocorrect: true,
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        counterText: '',
                        hintText: '12'),
                    inputFormatters: [
                      FilteringTextInputFormatter.digitsOnly,
                      //LengthLimitingTextInputFormatter(11)
                    ],
                    maxLength: 11,
                  ),
                ),
              ),
            ),
            /*new TextField(
              controller: controllerPrice,
              decoration: new InputDecoration(
                  hintText: "12",
              ),
            ),*/
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text("Product Type", style: TextStyle(fontSize: 18),),
            ),
            Padding(
              padding: const EdgeInsets.only(left:10,right:10,top:0,bottom:0 ),
              child: Container(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(15)),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextFormField(
                    controller: controllerType,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                      hintText: 'breakfast, lunch, dinner',
                      border: InputBorder.none,
                    ),
                  ),
                ),
              ),
            ),
            /*new TextField(
              controller: controllerType,
              decoration: new InputDecoration(
                  hintText: "breakfast, lunch, dinner",
              ),
            ),*/
            new Padding(padding: const EdgeInsets.all(10.0),),

            /*new RaisedButton(
              child: new Text("ADD PRODUCT"),
              color: Colors.red,
              onPressed: (){
                addProduct(_image);
              }
            ),*/

            new RaisedButton(
                child: new Text("ADD PRODUCT"),
                color: Colors.red,
                onPressed: (){
                  addProduct();
                  Navigator.of(context).push(
                      MaterialPageRoute(builder: (BuildContext context)=> OwnerPage(username: globals.userName, user_id: globals.userId)));
                },
            ),
            /*FloatingActionButton(
              onPressed: (){
                return showDialog(
                  context: context,
                  builder: (context){
                    return AlertDialog(
                      content: Text(controllerPrice.text),
                    );
                  },
                );
              },
            )*/

          ],

        ),
      ],
    ),
  ),
);
  }
}

my PHP code:

<?php

  include 'conn.php';


  $product_owner = $_POST['product_owner'];
  $productname = $_POST['productname'];
  $productprice = $_POST['productprice'];
  $producttype = $_POST['producttype'];
  $image = $_POST['image'];

  //$realImage = base64_decode($image);

  $connect->query("INSERT INTO product (product_name, product_price, product_type, product_owner, image) VALUES ('".$productname."','".$productprice."','".$producttype."','".$product_owner."','".$image."')")


?>

MySQL database:

It only uploaded my image path to the database. Please help me. I have understood that “image”: _image.path, this code is the result why my database is saving the image path instead of a photo. I am already trying to search using the path location and save the image to the htdoc file but does not work when I am uploading it. The image is nowhere can be found in the htdoc. please help me.

Answer

Check out answers to How to upload an image in Flutter? for more on uploading files from flutter. You will want to use a MultipartRequest from http library.

A google search should also show you how to save the file to MySQL, probably as a blob. It’s a whole topic on its own, you might end up saving the files to the filesystem and storing paths in the database.