Last active
September 17, 2023 07:21
-
-
Save BilalBudhani/97c36307bfb184d32f4125bcedc0fd55 to your computer and use it in GitHub Desktop.
Upload Multiple Files To Cloudinary With React & Axios
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@ScottAgirs did you find a solution?