1

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

enter image description here

Improve this question

4 Answers 4

Reset to default
4

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:

enter image description here

Result in htdoc folder:

enter image description here

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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.

Improve this answer

8 Comments

may I know, where should I refer to when to read the image that is uploaded into MySQL using multipartFile?
@MohdAzwan I am so sorry, but could you clarify your question?
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.
@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.
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.
|
0

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.

Improve this answer

Comments

0

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']);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.