Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Cloudinary example #146

Open
Mareva-dev opened this issue Apr 19, 2021 · 0 comments
Open

Cloudinary example #146

Mareva-dev opened this issue Apr 19, 2021 · 0 comments

Comments

@Mareva-dev
Copy link

Mareva-dev commented Apr 19, 2021

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant