Direct image upload to cloudinary using axios

user_8426770 0
Viewed 744

I'm having a strange problem where the upload function return a 400 error while with the same code in another component, it works like a charm

handleSubmit = (e) => {
        e.preventDefault()
        var url = "https://api.cloudinary.com/v1_1/my_image_server/image/upload";
        const formData = new FormData();
        formData.append("file", this.state.img);
        formData.append("upload_preset", "the_correct_preset"); 
        formData.append("api_key", "the_correct_key");
        formData.append("timestamp", (Date.now() / 1000) | 0);
        return axios.post(url, formData, {
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            }
        })
        .catch(err => console.log("There has been ERROR: " + err))

As i have mentioned above, this is the same exact copy & paste code in another component which works flawlessly. Can you guys please help me out, thanks in advance!

cloudinary axios reactjs
1 Answers

400 happens when the syntax of the request isn't what is expected.

Have you checked each value that you provide to the body of your request? e.g this.state.img's value.

user_34323730
Related