Skip to main content

Recent posts

One post tagged with "fetch api"

View All Tags

Uploading Images to Cloudinary with the Fetch API

John Reilly

John Reilly

I was recently checking out a very good post which explained how to upload images using React Dropzone and SuperAgent to Cloudinary.

It's a brilliant post; you should totally read it. Even if you hate images, uploads and JavaScript. However, there was one thing in there that I didn't want; SuperAgent. It's lovely but I'm a Fetch guy. That's just how I roll. The question is, how do I do the below using Fetch?

handleImageUpload(file) {
let upload = request.post(CLOUDINARY_UPLOAD_URL)
.field('upload_preset', CLOUDINARY_UPLOAD_PRESET)
.field('file', file);
upload.end((err, response) => {
if (err) {
console.error(err);
}
if (response.body.secure_url !== '') {
this.setState({
uploadedFileCloudinaryUrl: response.body.secure_url
});
}
});
}

Well it actually took me longer to work out than I'd like to admit. But now I have, let me save you the bother. To do the above using Fetch you just need this:

handleImageUpload(file) {
const formData = new FormData();
formData.append("file", file);
formData.append("upload_preset", CLOUDINARY_UPLOAD_PRESET); // Replace the preset name with your own
fetch(CLOUDINARY_UPLOAD_URL, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
if (data.secure_url !== '') {
this.setState({
uploadedFileCloudinaryUrl: data.secure_url
});
}
})
.catch(err => console.error(err))
}

To get a pre-canned project to try this with take a look at Damon's repo.