how to upload image on flutter to MySQL

Question

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 1

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.