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 | |
}); | |
} |
This comment has been minimized.
This comment has been minimized.
Thank you |
This comment has been minimized.
This comment has been minimized.
Good stuff! How would you add eager image resizing and cropping? |
This comment has been minimized.
This comment has been minimized.
damn right its good stuff |
This comment has been minimized.
This comment has been minimized.
Should probably be:
|
This comment has been minimized.
This comment has been minimized.
@ScottAgirs did you find a solution? |
This comment has been minimized.
This comment has been minimized.
it's for rounding down lol |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
Read the full blog post to get an overview https://bilalbudhani.com/upload-multiple-files-to-cloudinary-using-react-dropzone-axios/