json - react-native-fetch-blob error RNFetchBlob multipart request builder has found a field without 'data'

Question

I have try an upload image for react native using react-native-image-picker.

react-native-image-picker fine as well i cac pick an images from my emulator. but wheren i combine it with react-native-fetch=blob give me the error

"RNFetchBlob multipart request builder has found a fiel without data ... "

from the error, i figure the source problem is sent data null.

rewriting the code and find solution in internet, the syntax always same.

setting.js

constructor(props) {
    super(props);
    this.state = {
      hours: 17,
      minutes: 0,
      modalPassword: false,
      modalNotification: false,
      modalUpload: false,
      modalSuccess: false,
      password: '',
      oldPassword: '',
      userLogin: '',
      avatarSource: require('../assets/img/v41.png'),
      pic: null,
    };
    this.segmentedPicker = React.createRef();
    this._responseList();
  }

  myfun = () => {
    //alert('clicked');

    ImagePicker.launchImageLibrary(options, (response) => {
      if (response.didCancel) {
        console.log('User cancelled image picker');
      } else if (response.error) {
        console.log('Image Picker Error: ', response.error);
      } else {
        let source = {uri: response.uri};

        this.setState({
          avatarSource: source,
          pic: response.data,
        });
      }
    });
  };

and here is the handle uploading

uploadPic = () => {
    RNFetchBlob.fetch(
      'post',
      'https://att.vector41.org/changephoto.php',
      {
        Authorization: 'Bearer access-token',
        otherHeader: 'foo',
        'Content-Type': 'multipart/form-data',
      },
      [
        {
          name: 'image',
          filename: 'image.png',
          type: 'image/png',
          data: this.state.pic,
        },
      ],
    )
      .then((resp) => {
        alert(resp.data);
        this.setState({avatarSource: null});
      })
      .catch((err) => {
        alert('error');
      });
  };

my APi

<?php

$target_dir = "../portal/test_upload/";

if (!file_exists($target_dir)) {
  mkdir($target_dir, 0777, true);
}

$target_dir = $target_dir . "/" . rand() . '_' . time() . ".jpg";

if (move_uploaded_file($_FILES['image']['tmp_name'], $target_dir)) {
  echo json_encode([
    "Message" => "The File Has Been Uploaded!",
    "Status" => "Ok"
  ]);
} else {
  echo json_encode([
    "Message" => "Sorry, There was an error uploading your file!",
    "Status" => "Error"
  ]);
}

trying solve the problem

data: this.state.pic,

the data property who give by null data, i try transform it into string

String(this.state.pic)

but it give me another error again.

hey, i try this

data: 'this.state.pic',

the file is created. but the problem is the image is error and the image choose before not move to the folder.

the size is 9kb and cant even open it!

thank you, hope you all can help me...

question from:https://stackoverflow.com/questions/65935482/react-native-fetch-blob-error-rnfetchblob-multipart-request-builder-has-found-a

Answer 1

Waitting for answers