react-dropzone-uploader icon indicating copy to clipboard operation
react-dropzone-uploader copied to clipboard

Cloudinary example

Open Mareva-dev opened this issue 3 years ago • 0 comments

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?

Mareva-dev avatar Apr 19 '21 14:04 Mareva-dev