react-dropzone-uploader
react-dropzone-uploader copied to clipboard
Cloudinary example
Hello,
Is someone able to deliver an example to upload multiple files to cloudinary with react-dropzone-uploader ??? It's something that can't be found anywhere.
import React from "react";
import "react-dropzone-uploader/dist/styles.css";
import Dropzone from "react-dropzone-uploader";
const ImagesUploader = () => {
// specify upload params and url for your files
const getUploadParams = ({ file }) => {
const body = new FormData();
body.append("file", file);
body.append("upload_preset", {preset-name});
body.append("api_key", {api-key});
return { url: "https://api.cloudinary.com/v1_1/{cloud-name}/image/upload", body } ;
}
// called every time a file's `status` changes
const handleChangeStatus = ({ meta, file }, status) => { console.log(status, meta, file) }
// receives array of files that are done uploading when submit button is clicked
const handleSubmit = (files, allFiles) => {
console.log(files.map(f => f.meta))
allFiles.forEach(f => f.remove())
}
return (
<Dropzone
onChangeStatus={handleChangeStatus}
onSubmit={handleSubmit}
multiple={true}
inputContent="Add images"
inputWithFilesContent="More"
submitButtonContent="Save images"
/>
);
};
export default ImagesUploader;
Something like that for example. This one is not working but maybe someone can correct it?