CODEWITHSUNDEEP
react-nativeaxioscloudinary
Dessuane
Dessuane

Reputation: 85

Upload React-Native imagePicker with axios on Cloudinary

I try to upload some image from the camera gallery on localhost and prod environnement. My code works with a valid url like : https://res.cloudinary.com/dtdiwoz7o/image/upload/v1586706052/cn-2016-sashaonyshchenko-1920x1920-1510074905_dyfldk.jpg But when I pass the image file path, it's return an 400 error. Here is my code with some log :

  _avatarClicked = () => {
const options = {
  title: 'Select Photo',
  storageOptions: {
    skipBackup: true,
    path: 'images',
  },
};
ImagePicker.showImagePicker(options, (response) => {
  if (response.didCancel) {
    return
  }
  else if (response.error) {
    return
  }
  else {

    let data = {
      file: response.uri,
      upload_preset: "my_preset_name",
    }

    axios.post("https://api.cloudinary.com/v1_1/my_cloud_name/image/upload", data)
      .then(res => console.log(res))
      .catch(err => console.log(err))

  }
})

}

log of my repsponse.uri : (file:///Users/clement/Library/Developer/CoreSimulator/Devices/62E85527-A2AC-46CD-B517-E6039F99E056/data/Containers/Data/Application/E218E950-3A1C-40EB-8289-3837EC89FBBB/Documents/images/46674162-E32B-4302-B28A-5EF9150206D0.jpg)

I tried to replace in data file this by this 'const source' but it doesn't work : 

     const source = {
      uri: response.uri,
      type: response.type,
      name: response.fileName,
    }

I saw and test this on the react-native)image-picker documentation but I've got the same 400 error...

 // const source = { uri: 'data:image/jpeg;base64,' + response.data };

I also try to Base64.encode(response.url) or Base64.encodeURI(response.url)

Please, can you help me ? And sorry for my bad english

"react-native": "~0.61.4", "react-native-image-picker": "^2.3.1",

///////////////////////////

I found the solution : 

  let data = {
  file: 'data:image/jpg;base64,' + response.data,
  upload_preset: "my_preset_name",
}

axios.post("https://api.cloudinary.com/v1_1/my_cloud_name/image/upload/", data)
  .then(res => console.log(res))
  .catch(err => console.log(err))

Upvotes: 1

Views: 1392

Answers (1)

Dessuane
Dessuane

Reputation: 85

Ok I find the solution :

  let data = {
      file: 'data:image/jpg;base64,' + response.data,
      upload_preset: "my_preset_name",
    }

    axios.post("https://api.cloudinary.com/v1_1/my_cloud_name/image/upload/", data)
      .then(res => console.log(res))
      .catch(err => console.log(err))

Upvotes: 2

Related Questions