how to upload image using flutter and php in the MySQL

Question

I wanna ask how can I post an image file to the MySQL using post method? Since what I did is only upload the file pathway and not the image.

my post request:

Future addProduct() async{

var url = 'http://10.0.2.2/foodsystem/addproduct.php';


http.post(url, body: {
  "productname": controllerName.text,
  "productprice": controllerPrice.text,
  "producttype": controllerType.text,
  "product_owner": globals.userId,
  "image": _image.path,
  //"image": _image.path.split('/').last,
});

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."')")


?>

my MySQL table

score 4 · Accepted Answer · edited Feb 14 '21 at 16:38

This is the solution that I use to upload the image to the database. Basically, I am using the image path to save into MySQL. Then the image itself I save it in the htdoc folder and it works.

Flutter code: (important library need to be imported first)

import "package:async/async.dart";

import 'package:path/path.dart';

import 'dart:io';

import 'package:http/http.dart' as http;

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.restaurantId;

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

PHP code:

<?php

  include 'conn.php';


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

  $imagePath = "uploads/".$image;

  move_uploaded_file($_FILES['image']['tmp_name'],$imagePath);
  $connect->query("INSERT INTO product (product_name, product_price, product_type, product_owner, image) VALUES ('".$productname."','".$productprice."','".$producttype."','".$product_owner."','".$image."')");
//$connect->query("INSERT INTO product (product_name,image) VALUES ('".$productname."','".$image."')");

?>

Result in MySQL:

Result in htdoc folder:

score 1 · Answer 2 · answered Dec 20 '20 at 23:33

1

You are actually correct about storing path of the image into MySQL instead of the actual image data. MySQL is not built to store image data.

You can send image data to the backend with the way they describe here: How to upload images and file to a server in Flutter?

Then once you receive the image data, you can store the image in a directory in the server. What you save in MySQL should only be a image path within the server or a URL to the image.

answered Dec 20 '20 at 23:33

dshukertjr

15,244
11
57
94

may I know, where should I refer to when to read the image that is uploaded into MySQL using multipartFile? – Mohd Azwan Jan 02 '21 at 08:21
@MohdAzwan I am so sorry, but could you clarify your question? – dshukertjr Jan 02 '21 at 08:56
after I successfully upload into MySQL, how can I access the picture in the application? I already succeed in saving the name of the image into MySQL and the answer is below, yet I am not sure how to use the image. – Mohd Azwan Jan 02 '21 at 12:02
1

@MohdAzwan That depends on a lot of things, but if you have a url for your backend, and let's say you saved your image in a folder called `images`, then you could access it like `https://example.com/images/filename.jpg` or something like that. – dshukertjr Jan 02 '21 at 12:06
I am pretty sure that the code is within the application environment itself since I already use that using asset in pubspec.yaml. but the image that I want to use coming from a different directory like from desktop or htdocs, I am trying to use the link such as C:\xampp\htdocs\foodsystem\uploads to access the image but the studio showing a crash on the system. – Mohd Azwan Jan 02 '21 at 12:20
@MohdAzwan Have you tried 'http://10.0.2.2/foodsystem/image_name.jpeg'? – dshukertjr Jan 02 '21 at 12:24
thank you, your comment above did trigger me to save the image inside the application environment itself instead of saving it in the htdocs file in xampp. Just need to ensure that the image will exist in the asset folder to access it. Thank you so much – Mohd Azwan Jan 02 '21 at 12:33
@MohdAzwan My pleasure. – dshukertjr Jan 02 '21 at 12:35

score 0 · Answer 3 · answered Dec 21 '20 at 05:13

You can actually store image in MySQL . It's primitive type is BLOB. it's useful if image size is less, as image can loaded fast. If image size is large then time to load it would be large hence it's not recommended to do so. Storing image path is still a better option.

score 0 · Answer 4 · answered Dec 21 '20 at 05:38

Yes, you can store images in the database, but it's not advisable in my opinion, and it's not general practice.

A general practice is to store images in directories on the file system and store references to the images in the database. e.g. path to the image,the image name, etc.. Or alternatively, you may even store images on a content delivery network (CDN) or numerous hosts across some great expanse of physical territory, and store references to access those resources in the database.

Images can get quite large, greater than 1MB. And so storing images in a database can potentially put unnecessary load on your database and the network between your database and your web server if they're on different hosts.

You'll need to save as a blob, LONGBLOB datatype in mysql will work.

CREATE TABLE 'test'.'pic' (
    'idpic' INTEGER UNSIGNED NOT NULL AUTO_INCREMENT,
    'caption' VARCHAR(45) NOT NULL,
    'img' LONGBLOB NOT NULL,
  PRIMARY KEY ('idpic')
)

its a bad practice but it can be done. Not sure if this code would scale well, though.

  $data = file_get_contents($_FILES['photo']['tmp_name']);

how to upload image using flutter and php in the MySQL

4 Answers4