Skip to content

Instantly share code, notes, and snippets.

@BilalBudhani
Last active September 17, 2023 07:21
Show Gist options
  • Save BilalBudhani/97c36307bfb184d32f4125bcedc0fd55 to your computer and use it in GitHub Desktop.
Save BilalBudhani/97c36307bfb184d32f4125bcedc0fd55 to your computer and use it in GitHub Desktop.
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
});
}
@Balvee
Copy link

Balvee commented Nov 2, 2018

damn right its good stuff

@NoMan2000
Copy link

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

Should probably be:

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

@spyshower
Copy link

@ScottAgirs did you find a solution?

@leonmak
Copy link

leonmak commented Jan 4, 2020

it's for rounding down lol

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