problem upload image with 'rn-fetch-blob' in 'IOS'

Question

I use rn-fetch-blob to upload an image. This works correctly in Android but does not work in iOS. I use data parameter in response to create image link , and when I check response from iOS I found data is null in iOS response . I don't know why why data parameter is null when status is 200.

I tried all answers for same issues but they did not work for me!

code for Upload Image:

export const UploadImageService2 = async (
  file: any,
): AxiosRequestConfig => {
  console.log("UploadImageService2");
  console.log("file: " + file);
  let seps = `${file.path}`.split('/');
  let filename = seps[seps.length - 1];
  var fp = file.path + "";
  const realPath = Platform.OS === 'ios' ? fp.replace('file://', '') : fp;
  console.log("fb: " + fp);
  console.log("filePath: " + realPath);

  const data = [
    {
      name: 'Files',
      filename,
      type: file.mime,
      // binary field data from a file path, use `wrap` method to wrap the path
      data: RNFetchBlob.wrap(decodeURIComponent(realPath)),
      // binary field data encoded in BASE64
      // data: RNFetchBlob.base64.encode(file),
    },
  ];
  console.log("dataObj: " + JSON.stringify(data));
  const response = await RNFetchBlob.fetch(
    'POST',
    `${BaseUrl}api/image`,

    {
      Authorization: 'Bearer ',
      'Content-Type': 'multipart/form-data',
    },
    data,
  );

  return {
    ...(response ? response : {}),
    ...file,
  };

};

That's function called by this:

 _uploadSingleImage = async (file: any, sendCheckupForm) => {
    console.log("_uploadSingleImage");
    console.log("_file: " + JSON.stringify(file));
    let response = await UploadImageService2(file);
    // let response = await UploadImageService(file);
    console.log('resp=>>>', response)
    if (get(response, ['respInfo', 'status']) === 200) {
      console.log("okkk");
      const responseData = get(response, ['data'], file.name);
      console.log("responseData: " + JSON.stringify(responseData));
      const fileUrl = responseData.replace(/^"(.+(?="$))"$/, '$1');
      // const fileUrl = 'myTestImage';
      const attachedFiles = this.state.attachedFiles.map(i => i.path === response.path ? { ...i, status: 'success', FileName: fileUrl } : i);
      console.log("attachedFiles: " + JSON.stringify(attachedFiles));
      this.setState({ attachedFiles });
      console.log('fileUrl', fileUrl)
      this.setState({ receptionImage: fileUrl });
      if (sendCheckupForm) {
        // this.setState({showCheckupForm: false});
        this.props.sendCheckupForms(
          this.props.token,
          this.props.orderDetails.Id,
          {
            fileList: [fileUrl],
          },
        );
        this.props.getOrder(this.props.token, this.props.orderId);
      }
    } else {
      console.log("Erorrr");
      const attachedFiles = this.state.attachedFiles.map(i => i.path === response.path ? { ...i, status: 'error' } : i);
      this.setState({ attachedFiles });
    }
  };

This is example Json response for rn-fetch-blob in iOS:

{ taskId: 'jgd8phv6w98zryggebvvkg',
  type: 'utf8',
  respInfo: 
   { redirects: [ 'https://cp.azmayeshonline.com/api/image' ],
     status: 200,
     timeout: false,
     taskId: 'jgd8phv6w98zryggebvvkg',
     headers: 
      { 'x-aspnet-version': '4.0.30319',
        'Content-Length': '42',
        'x-frame-options': 'AllowAll',
        Date: 'Tue, 27 Oct 2020 19:34:43 GMT',
        Expires: '-1',
        Server: 'Microsoft-IIS/10.0',
        'Content-Type': 'application/json; charset=utf-8',
        'Cache-Control': 'no-cache',
        'x-powered-by': 'ASP.NET',
        Pragma: 'no-cache' },
     respType: 'json',
     state: '2',
     rnfbEncode: 'utf8' },
  info: [Function],
  array: [Function],
  blob: [Function],
  text: [Function],
  json: [Function],
  base64: [Function],
  flush: [Function],
  session: [Function],
  readStream: [Function],
  readFile: [Function],
  exif: null,
  filename: 'IMG_0002.JPG',
  path: '/Users/mesimac/Library/Developer/CoreSimulator/Devices/52589261-2055-4237-9DED-E4F8D71FD25B/data/Containers/Data/Application/5FC9EEDF-5710-4935-9380-F03114B291CF/tmp/react-native-image-crop-picker/7EF8432F-53A3-4A41-8068-159A5990623C.jpg',
  height: 1024,
  width: 1541,
  data: null,
  modificationDate: '1441224147',
  localIdentifier: 'B84E8479-475C-4727-A4A4-B77AA9980897/L0/001',
  size: 304799,
  sourceURL: null,
  mime: 'image/jpeg',
  cropRect: null,
  creationDate: '1255122560',
  status: 'loading' }

Anyone suggestions for how I can handle this?

Adrian Mole · Accepted Answer · 2021-02-25 15:52:02Z

2

Try using:

data:RNFetchBlob.wrap(realPath)

instead of:

data:RNFetchBlob.wrap(decodeURIComponent(realPath))

The rest of your code looks fine. Anyway, you are replacing the fp.replace('file://', ''), which is needed for iOS.

This is how I did it in my code:

data:RNFetchBlob.wrap(this.state.file.uri.replace("file://", ""))

edited Feb 25, 2021 at 15:52

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Dec 23, 2020 at 4:57

Maverick

12612 bronze badges

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

Collectives™ on Stack Overflow

problem upload image with 'rn-fetch-blob' in 'IOS'

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related