Search code examples
react-nativemultipartform-datamultipart

Unhandled promise rejection: SyntaxError: JSON Parse error: Unrecognized token '<' in react native


I am new to react native. I have created a form to upload images to server. But when I try to upload images keep getting error like this => [Unhandled promise rejection: SyntaxError: JSON Parse error: Unrecognized token '<'] please help thanks. I want to send data in multipart format

here is my code

 const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
     // base64: true,
    });
    if (result.cancelled) {
      return;
    }
  
    let localUri = result.uri;
    let filename = localUri.split('/').pop();
  
    let match = /\.(\w+)$/.exec(filename);
    let type = match ? `image/${match[1]}` : `image`;
  
    let formData = new FormData();
    formData.append('photo', { uri: localUri, name: filename, type });
  
    console.log(formData)
    return await fetch('https//xyxtech/Android_API_CI/upload_multipart_data', {
      method: 'POST',
      body: formData,
      // header: {
      //   'content-type': 'multipart/form-data',
      // },
      headers: {'Accept': 'application/json, text/plain, */*', 'content-type': 'multipart/form-data'},
    })
    .then((returnValue) => returnValue.json())
  // .catch(err=>err)
  .then(function(response) {
    console.log(response)
    Alert.alert("File uploaded");
    // return response.json();
  });
  };

Solution

  • This is not a React Native issue per se. Your server responds with non-JSON body which cannot be parsed here:

    .then((returnValue) => returnValue.json())

    This likely means that your HTTP request is incorrect. Why is it incorrect – sorry, can't help you, since I'm not familiar with the API you are trying to use.