CODEWITHSUNDEEP
phpapacheflutterdartclient-server
Naratip Paedilokkun
Naratip Paedilokkun

Reputation: 1

How to flutter/dart send Image data to apache server php file

i want to send image from flutter client to php apache server but error null when send data image to middleware (green message is error)

code flutter client : i think body content wrong format

 static final String uploadEndPoint =
     'http://192.168.1.4/toothScanr/uploads.php';
 Future<File> file;
 String status = '';
 String base64Image;
 File tmpFile;
 String errMessage = 'Error Uploading Image';

 void upload(String fileName) async {
   http.post(uploadEndPoint, body: {
     "image": base64Image,
     "name": fileName,
   }).then((result) {
     setStatus(result.statusCode == 200 ? result.body : errMessage);
   }).catchError((error) {
     setStatus(error);
   });
   
 }

 Widget build(BuildContext context) {
   Widget showImage() {
     return FutureBuilder<File>(
       future: file,
       builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
         if (snapshot.connectionState == ConnectionState.done &&
             null != snapshot.data) {
           tmpFile = snapshot.data;
           base64Image = base64Encode(snapshot.data.readAsBytesSync());
           return Flexible(
             child: Image.file(
               snapshot.data,
               fit: BoxFit.fill,
             ),
           );
         } else if (null != snapshot.error) {
           return const Text(
             'Error Picking Image',
             textAlign: TextAlign.center,
           );
         } else {
           return const Text(
             'No Image Selected',
             textAlign: TextAlign.center,
           );
         }
       },
     );
   }

code php apache server

restAPI just post to aws server but image file from client not yet error null

<?php

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

$target_dir = "/home/ubuntu/picture/";
$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
 $image = $_POST['image'];
       $name = $_POST['name'];
       $POST_DATA = base64_encode($image);

       $curl = curl_init();
       curl_setopt($curl, CURLOPT_URL, "xxx.xxx.xxx.xxx:5000/image/test");
       curl_setopt($curl, CURLOPT_TIMEOUT, 30);
       curl_setopt($curl, CURLOPT_POST, 1);
       curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
       curl_setopt($curl, CURLOPT_POSTFIELDS, $POST_DATA);
       $response = curl_exec($curl);
       curl_close ($curl);
       
       echo $response;
?>

why?

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------A

Upvotes: 0

Views: 276

Answers (1)

martin tan
martin tan

Reputation: 914

Since you are just passing the base64image instead of uploading a file, then you should remove these lines in your PHP script. Stop expecting a file to be uploaded to $_FILES["file"] in your PHP script.

Since there is nothing uploaded to $_FILES["file"], this explains the error Undefined index: file in ...

Since $_FILES["file"] is null (due to the above error), this explains the error Trying to access array offset on value of type null ...

(the "array offset" they are talking about is "name" in $_FILES["file"]["name"] // <-- This one).

$target_file = $target_dir . basename($_FILES["file"]["name"]);

$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

One more mistake I found in your PHP script:

$POST_DATA = base64_encode($image); // <-- this should be base64_decode($image);

If you want to upload files to your PHP script, you need to use the MultipartRequest class provided by http in Flutter. But I recommend using the dio library because it provides FormData class which will make uploading files + your own data easier.

FormData formData = new FormData.from({
   "image": base64Image,
   "name": fileName,
   "file": new UploadFileInfo(file, "something.jpg")
});
response = await dio.post(uploadEndPoint, data: formData);

Upvotes: 0

Related Questions