rn-cloudinary-upload.md

Upload image to Cloudinary in React Native

Step-1: Install & configure RNFetchBlob

npm install --save rn-fetch-blob

or

yarn add rn-fetch-blob

Automatically Link Native Modules

react-native link
RNFB_ANDROID_PERMISSIONS=true react-native link

For manual linking please check the official doc

Step-2: Import RNFetchBlob

import RNFetchBlob from 'rn-fetch-blob';

Step-3: Add upload code

_uploadImage = filePath => {
    try {
      RNFetchBlob.fetch(
        'POST', 
        'https://api.cloudinary.com/v1_1/YOUR_CLOUD_NAME/image/upload?upload_preset=YOUR_UPLOAD_PRESET', 
        { 
          'Content-Type': 'multipart/form-data' 
        }, 
        [
          { 
            name: 'file', 
            filename: this._getFilename(filePath), 
            data: RNFetchBlob.wrap(filePath) 
          }
    ])
    .then(res => res.json())
      .then(response => console.log("Cloudinary response:", response))
    } catch(err) {
      console.log("Upload Error:", err)
    }
  }
  
  
  _getFilename = path => {
    const fileArray = path.split('/');
    return fileArray[fileArray.length - 1];
  }

Thanks!