Image upload using react-native and php does not work

Question

I am uploading an image using react-native and my API is PHP based. When I test my API using Post Man it works correctly but when I pass an image from the react-native app it shows me an error-

SyntaxError: JSON Parse error: Unexpected end of input

Here is the code for sending an image using the POST method at the react-native side-

uploadImageToServer = () => {

    const data = new FormData();
        data.append('image', {
          name: this.state.name, // rn_image_picker_lib_temp_b9855c66-9093-433e-af06-475ef6e82a3f.jpg
          type: this.state.type, // image/jpeg
          uri: this.state.uri, // file:///data/user/0/com.tmbs_ekta/cache/rn_image_picker_lib_temp_b9855c66-9093-433e-af06-475ef6e82a3f.jpg
     });

    fetch('https://tmbsbavan.com/api/family_method.php', {
      method: 'POST',
      headers: {
        'Content-Type': 'multipart/form-data',
      },
      body: data,
    }).then((response) => response.json())
    .then((json) => {
      console.log(json);

    }).catch((err) => { console.log(err); });
 
  }

Server-side PHP code-

<?php
    $target_dir = "profile_pic";
    $target_dir = '../'.$target_dir . "/" .rand() . "_" . time() . ".jpeg";
    
    if(move_uploaded_file($_FILES['image']['tmp_name'], $target_dir)){
        $MESSAGE = "Image Uploaded Successfully." ;
        echo json_encode($MESSAGE);
    }
?>

Please help me with how can I solve this issue. In Postman the API is working properly but in react native. it's showing an error.

When i am using a postman, image get uploaded successfully to the server. but when I call API in react native. image can't upload — Rilesh Patel
– Rilesh Patel, Commented Dec 1, 2022 at 14:33
Are you developing with Android? And one of the debug method is check any error returned by the PHP server, use .then((response) => response.text()) to check that. — kiuQ
– kiuQ, Commented Dec 2, 2022 at 1:15
Thanks a lot sir @PeterTam this is will be help me for finding serverside error response — Rilesh Patel
– Rilesh Patel, Commented Dec 4, 2022 at 5:32

JSONCMD · Accepted Answer · 2022-12-02 08:04:59Z

1

An unconfigured cors may be the problem

<?php
header("Access-Control-Allow-Origin: *");

answered Dec 2, 2022 at 8:04

JSONCMD

754 bronze badges

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

1 Comment

Rilesh Patel Over a year ago

Okky, you save my day. thank you....

Collectives™ on Stack Overflow

Image upload using react-native and php does not work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related