Direct image upload to cloudinary using axios

Question

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!

Hi have you checked each value that you provide to the body of your request? e.g this.state.img's value. — t3__rry
dude, you saved my day, i can't believe i've spent days banging my head without thinking of this in the first place! You should write the answer and get some stack points, you earned it! — Phạm Quang Mẫn
Ehe I'm glad it helped you, I will put that in an answer thanks ;) — t3__rry

t3__rry t3__rry · Accepted Answer · 2018-09-10T10:47:21

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.

Direct image upload to cloudinary using axios

1 Answers