Image upload in react native Multipart form parse error

Question

I am using react-native-image-crop-picker lib to pick images after that I want to upload that image to server.Api working is validated in postman See screenshot

I am creating form data param to upload in react native, code is:

  (files as FILE[]).forEach(async (file, index) => {

    const payload = new FormData();
    const randomFileName = file.uri.replace('file:///storage/emulated/0/Android/data/com.village_ui/files/Pictures/', '');
        let attach_file = {
            uri: encodeURI(file.uri),
            type: file.mime || 'image/jpeg',
            name: randomFileName
        }
        payload.append('file',attach_file);

        let res = await fetch(
            'https://village-343316.uc.r.appspot.com/api/media/',
            {
              method: 'post',
              body: payload,
              headers: {
                'Content-Type': 'multipart/form-data',
              },
            }
          );
          let responseJson = await res.json();
          if (responseJson.status == 1) {
            alert('Upload Successful');
          }

});

But I am getting this error "detail: "Multipart form parse error - Invalid boundary in multipart: None"

Answer 1

  /**
   * File upload in React-Native
   * Handle state hooks while upload
   */
  import React, {useState} from 'react';
  import {View, Image, Button, Text} from 'react-native';
  import {launchImageLibrary} from 'react-native-image-picker';

  const App = () => {
    const [image, setImage] = useState('null');
    const [file, setFile] = useState('null');
    const [success, setSuccess] = useState('upload status');

    const baseurl = 'https://printrly.com/public/api/kyc';

    /*   ** PICK_IMAGE_FUNCTION_READ **
    * select image in asynchronus method
    * result append in formdata immediately
    * can use try catch to handle error
    * then set state with callback (note: setState method takes time to update value)
    * after handling and set value with callback
    * set file state and time to execute upload function
    */

    const pickImage = async () => {
      var results = await launchImageLibrary({
        mediaType: 'photo',
        quality: 1,
        includeBase64: false,
      });
      let result = results.assets[0];

      let data = new FormData();
      data.append('document', {
        uri: result.uri,
        type: result.type,
        name: result.fileName,
      });
      data.append('farmer_id', 6);
      data.append('doc_type', 'pan');

      console.log('form data', data);

      /* set image preview */
      setImage(uri => {
        return result.uri;
      });

      /* set file for formdata */
      setFile(pre => {
        return data;
      });

      /* after file value change setSuccess will execute */
      if (file) {
        setSuccess('click upload button');
      }
    };

    /*  ** UPLOAD_IMAGE_FUNCTION_READ **
    * Use file state in body
    * can use try catch to handle error
    * set success state
    */

    const upload = async () => {
      setSuccess('uploading..');
      let res = await fetch(baseurl, {
        method: 'post',
        body: file,
        headers: {
          Accept: 'application/json',
          'Content-Type': 'multipart/form-data',
          Authorization: 'Bearer 218|IbX8HhJu5jCfR94Jy2L7sBIOSLdDXK2DAeWqwkb6',
        },
      });
      res = await res.json();

      if (!res.error) {
        setSuccess(res.message);
      }
      console.log(res);
    };

    return (
      <View>
        <Text style={{fontSize: 20, color: 'green', padding: 10}}>{success}</Text>
        <Button title="select file" onPress={pickImage} />
        <Image
          source={{uri: image}}
          style={{width: 200, height: 200, margin: 40}}
        />
        <Button title="upload" onPress={upload} />
      </View>
    );
  };

  export default App;