Search code examples
javascriptnode.jsreactjscloudinary

I keep getting a Bad request error when trying to post Image to Cloudinary

i'm trying to upload an image to cloudinary using axios and react. I have two functions. One for appending the formData, and the other for making a request

// APPEND CLOUDINARY DETAILS
export function appendCloudinaryDetails(fileUrl){
  let formData = new FormData();
  formData.append("api_key", 'APIKEYHERE');
  formData.append("api_secret", 'APISECRETHERE');
  formData.append("file", 'fileUrl');
  formData.append("cloud_name", fileUrl);
  formData.append("upload_preset", "rhi2i6xg");    
  return formData;
}

// STORE THE DATA ON CLOUDINARY
export function storeOnCloudinary(formData){
  return () => {
    return axios.post("https://api.cloudinary.com/v1_1/my-company/image/upload", formData,{
      headers: { "X-Requested-With": "XMLHttpRequest", "Allow-Control-Allow-Origin": "*" },
    });
  }
}

And this is how i use it:

// Append Cloudinary Details
let formData = appendCloudinaryDetails(this.state.backdropCroppedImageUrl);

// Store the backdrop on Cloudinary
this.props.storeOnCloudinary(formData).then(
   response => {
     ...
   }
);

But running this gives me a 400 error response. As shown below:

enter image description here

Solution

  • I don't know if this is a faithful copy of your code, or it was changed in order to hide sensitive information in the posted question, but according to it, you are appending to the formData the backdropCroppedImageUrl as the 'cloud_name' instead of setting it on 'file', and in 'file' you're setting a string.