0

I have read in the document here: https://github.com/mg365/react-native-customized-image-picker that I could get the response object of data from an image, but when I tried it I got undefined. I can get other objects like size, mime, and path like this: 

    SelectPhoto = () =>{
     ImagePicker.openPicker({
     cropping: true,
     title: 'Select a Picture',
     isCamera: true,
    }).then((imgResponse) => {
      console.log(imgResponse[0].path); <-- This logs the correct path
      console.log(imgResponse[0].data); <-- This logs the undefined
      let imgSource = { uri: imgResponse[0].path };
      this.setState({
        userimgSource: imgSource,
      });
    });
   }

My ultimate goal is to upload an image to a server and I think having the data is required? I am using the RNFetchBlob multipart/form-data. Any help on this is appreciated, thank you!

tarzen chugh
  • 10,561
  • 4
  • 20
  • 30
Laney Williams
  • 573
  • 3
  • 13
  • 34

1 Answers1

1

First of all data prop is not at all required, you can upload your file using path. If you really want data then there is a prop name "includeBase64"(by default it false) set it to true.

   SelectPhoto = () =>{
     ImagePicker.openPicker({
     cropping: true,
     title: 'Select a Picture',
     isCamera: true,
     includeBase64:true
    
    })

NOTE: Setting {includeBase64: true} will convert your image to base64 which may lead to OUT OF MEMORY issue in android when you try to upload a large image.

To Upload Your using path and React-Native-Fetch-Blob 

    RNFetchBlob.fetch('POST', URL, {
        // dropbox upload headers
        ...
        'Content-Type': 'multipart/form-data',
        // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
        // Or simply wrap the file path with RNFetchBlob.wrap().
    }, [
            // element with property `filename` will be transformed into `file` in form data

            { name: 'file', filename: 'Image.png', data: RNFetchBlob.wrap(response.uri) },
            // custom content type

        ]).then((res) => {

        })
        .catch((err) => {
            // error handling ..
        })

And if you have RN>=0.54 then You don't need fetch-blob to upload image React-native now has full blob support.try this

var photo = {
      uri: URI,
      type:image/png, // check your object you will get  mime-type in image picker response.
      name: file,
      fileName:Image.png
    };
    var body = new FormData();
    body.append('file', photo);
    axios({
        method: 'post',
        url: 'URL',
        data: body,
        config: { headers: {'Content-Type': 'multipart/form-data' }}
    })

reference Links

upload video using React-native-fetch-blob

react-native blob support announcement

send Form data using Axios

Rajat Gupta
  • 1,864
  • 1
  • 9
  • 17
  • Thank you so much! I have one more question. I have asked another question on SO because I still didn't know what to do. This question has my upload.php, how would I configure it?: https://stackoverflow.com/questions/51110949/php-receiving-null-data-from-react-native-while-uploading-images – Laney Williams Jun 30 '18 at 12:28
  • Also I got an unexpected token error on `'Content-Type': 'multipart/form-data',`. – Laney Williams Jun 30 '18 at 16:03
  • I have answered your other question. If this answer is helpful then kindly upvote this. – Rajat Gupta Jul 02 '18 at 09:32