Debian Question posted in
The oficial documentation can be found here.

React Native upload file using fetch, server $_FILES return object, how to access tmp_name – Debian

i have some problem with upload image from react-native to server directory. i tried many times, hours to solve this but got nothing. i also googled this but icant find the solution, i hope in this community someone can help me. so, below is my configuration:

package.json

"react-native": "0.63.4",
"react-native-image-picker": "^3.1.4",
"rn-fetch-blob": "^0.12.0"

upload_image.php on server

<?php
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

var_dump($_FILES);
?>

this is how i upload file

RNFetchBlob.fetch(
      'POST',
      'http://[REDACTED]/api_sertifikat/upload_image.php',
      {
        'Content-Type': 'multipart/form-data',
      },
      [
        // element with property `filename` will be transformed into `file` in form data
        {name: 'image', filename: 'avatar.png', data: this.state.pic},
      ],
    ).then((resp) => {
      console.log(resp);
      alert('your image uploaded successfully');
      this.setState({avatarSource: null});
    });
  };

Response from server

[Sun Jan 31 2021 16:41:33.974]  LOG      {"array": [Function anonymous], "base64": [Function anonymous], "blob": [Function anonymous], "data": "array(1) {
  ["image"]=>
  array(5) {
    ["name"]=>
    string(10) "avatar.png"
    ["type"]=>
    string(24) "application/octet-stream"
    ["tmp_name"]=>
    string(14) "/tmp/phpHeBX4W"
    ["error"]=>
    int(0)
    ["size"]=>
    int(94)
  }
}
", "flush": [Function anonymous], "info": [Function anonymous], "json": [Function anonymous], "path": [Function anonymous], "readFile": [Function anonymous], "readStream": [Function anonymous], "respInfo": {"headers": {"Access-Control-Allow-Headers": "*", "Access-Control-Allow-Methods": "*", "Access-Control-Allow-Origin": "*", "Connection": "Keep-Alive", "Content-Type": "text/html; charset=UTF-8", "Date": "Sun, 31 Jan 2021 09:41:33 GMT", "Keep-Alive": "timeout=5, max=100", "Server": "Apache/2.4.25 (Debian)", "Vary": "Accept-Encoding"}, "redirects": ["http://[REDACTED]/api_sertifikat/upload_image.php"], "respType": "", "rnfbEncode": "utf8", "state": "2", "status": 200, "taskId": "5bt3eellca6y8xel6lu8w", "timeout": false}, "session": [Function anonymous], "taskId": "5bt3eellca6y8xel6lu8w", "text": [Function anonymous], "type": "utf8"}

Expected response, similar like this:

array(1) {
  ["something_name"]=>
  array(5) {
    ["name"]=>
    string(44) "WhatsApp Image 2021-01-26 at 7.40.39 PM.jpeg"
    ["type"]=>
    string(10) "image/jpeg"
    ["tmp_name"]=>
    string(24) "C:xampptmpphpE87D.tmp"
    ["error"]=>
    int(0)
    ["size"]=>
    int(114133)
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Solution for this is just access as usual $_FILES['tmp_name'], and work fine.


  2. 0

    use json_encode instead of var_dump

    The problem you’re facing is that the server is not responding with data that your react-native application can use.

    PHP’s var_dump is not intended to produce a data encoding that’s suitable for consumption by other computers. What it does produce is text that helps a human developer understand the type and value of a variable.

    Now, it’s true that you might be able to write some javascript that could parse the output of var_dump, but that could be surprisingly difficult, and it’s just not worth it. It is far better to modify your PHP to return exactly the data needed by your mobile app, in a format your mobile app can consume easily.

    My PHP skills are really rusty, this question was asked 6 months ago with no activity since then, so I suspect OP has moved on and there’s no real value in my going to the effort of putting together a working code sample. (I did a little bit of research just now, and was horrified to see how clumsy PHP is. It’s hard for me to believe I worked in PHP for six years.)

    Perhaps another SO user will put that answer together to earn sweet internet points.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search