react-dropzone-cloudinary

React component to upload files to cloudinary using drag and drop provided through react-dropzone

Documentation and examples at https://react-dropzone.js.org. Source code at https://github.com/react-dropzone/react-dropzone/.

Installation

Install it from npm and include it in your React build process

npm install --save react-dropzone-cloudinary

or:

yarn add react-dropzone-cloudinary

Demo

See it here

Usage

import React, { useCallback } from "react";
import ReactDropzoneCloudinary from "react-dropzone-cloudinary";

// const onComplete = data=> console.log(data)

<ReactDropzoneCloudinary
  apiKey="YOUR_API_KEY"
  apiSecret="YOUR_API_SECRET"
  cloudName="YOUR_CLOUD_NAME"
  public_id="YOUR_PUBLIC_ID"
  format="FILE_FORMAT"
  upload_preset="YOUR_UPLOAD_PRESET"
  onComplete={onComplete}
/>;

Props

• className: _Proptypes.string

• dropzoneConfig: Proptypes.object Options for the nested dropzone component.

• onComplete: Proptypes.func Callback called after the upload has been completed. Receives the file data sent from cloudinary as argument.

• onError: Proptypes.func Callback called whever an error is encountered during the upload. Receives a standard axios error return value.

• onProgress: Proptypes.func Callback called while uploading. Receives a number 0-1 for the uploaded ratio.

• cloudinaryConfig: Proptypes.object Options that are needed to make the upload to cloudinary. It requires the following keys:

  • apiKey: Proptypes.required.string Cloudinary API KEY
  • apiSecret: Proptypes.required.string Cloudinary API SECRET
  • cloudName: Proptypes.required.string Cloudinary Account cloudname
  • public_id: Proptypes.string Cloudinary Account public id
  • format: Proptypes.string The file format for the uploaded files
  • upload_preset: Proptypes.string Cloudinary Account Upload Preset

License

MIT