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.