Skip to content

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.

Copy link
Owner Author

BilalBudhani commented Jul 25, 2017

@qasimalbaqali

This comment has been minimized.

Copy link

qasimalbaqali commented Feb 2, 2018

Thank you 👍

@ScottAgirs

This comment has been minimized.

Copy link

ScottAgirs commented Sep 21, 2018

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

@Balvee

This comment has been minimized.

Copy link

Balvee commented Nov 2, 2018

damn right its good stuff

@NoMan2000

This comment has been minimized.

Copy link

NoMan2000 commented Nov 30, 2018

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

Should probably be:

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

@spyshower

This comment has been minimized.

Copy link

spyshower commented Apr 15, 2019

@ScottAgirs did you find a solution?

@electropsycho

This comment has been minimized.

Copy link

electropsycho commented Jun 21, 2019

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

Should probably be:

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

Yes because of short cut rule. here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.