react-dropzone-cloudinary

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

Usage no npm install needed!

<script type="module">
  import reactDropzoneCloudinary from 'https://cdn.skypack.dev/react-dropzone-cloudinary';
</script>

README

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