Instantly share code, notes, and snippets.

Embed
What would you like to do?
Upload Multiple Files To Cloudinary With React & Axios
handleDrop = files => {
// Push all the axios request promise into a single array
const uploaders = files.map(file => {
// Initial FormData
const formData = new FormData();
formData.append("file", file);
formData.append("tags", `codeinfuse, medium, gist`);
formData.append("upload_preset", "pvhilzh7"); // Replace the preset name with your own
formData.append("api_key", "1234567"); // Replace API key with your own Cloudinary key
formData.append("timestamp", (Date.now() / 1000) | 0);
// Make an AJAX upload request using Axios (replace Cloudinary URL below with your own)
return axios.post("https://api.cloudinary.com/v1_1/codeinfuse/image/upload", formData, {
headers: { "X-Requested-With": "XMLHttpRequest" },
}).then(response => {
const data = response.data;
const fileURL = data.secure_url // You should store this URL for future references in your app
console.log(data);
})
});
// Once all the files are uploaded
axios.all(uploaders).then(() => {
// ... perform after upload is successful operation
});
}
@BilalBudhani

This comment has been minimized.

Owner

BilalBudhani commented Jul 25, 2017

@qasimalbaqali

This comment has been minimized.

qasimalbaqali commented Feb 2, 2018

Thank you 👍

@ScottAgirs

This comment has been minimized.

ScottAgirs commented Sep 21, 2018

Good stuff! How would you add eager image resizing and cropping?

@Balvee

This comment has been minimized.

Balvee commented Nov 2, 2018

damn right its good stuff

@NoMan2000

This comment has been minimized.

NoMan2000 commented Nov 30, 2018

formData.append("timestamp", (Date.now() / 1000) | 0);

Should probably be:

formData.append("timestamp", (Date.now() / 1000) || 0);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment