@app-masters/react-cloudinary-uploader

A file uploader in React for uploading the picture to Cloudinary

Stats

StarsIssuesVersionUpdatedCreatedSize
@app-masters/react-cloudinary-uploader
840.1.427 months ago4 years agoMinified + gzip package size for @app-masters/react-cloudinary-uploader in KB

Readme

react-cloudinary-uploader

A Cloudinary React file uploader.

Installation and usage

npm install @app-masters/react-cloudinary-uploader --save

Usage

You ever must import cloudinary globals on your html head.

<script src="//widget.cloudinary.com/global/all.js" type="text/javascript">

After this you could choose between to uses methods; Component and Static

Static

You can use ReactCloudinaryUploader over static call receiving a promisse.

let options = {
    cloud_name: "demo",
    upload_preset: "a5vxnzbp",
    multiple: true,
    returnJustUrl: true
};

ReactCloudinaryUploader.open(options).then(image=>{
    if (this.props.returnJustUrl)
        image = image.url;
    console.log("image",image);
}).catch(err=>{
    console.error(err);
});

Component - WIP

Allow you to use it like a component, showing a button and the result image.

<ReactCloudinaryUploader
    cloudName='appmasters-io'
    uploadPreset='willim-dev'
    onUploadSuccess={(image)=>{
        console.log("success uploading! Image data",image);
    }}
/>

Options

ReactCloudinaryUploader Options

  • multiple: Enable upload more than one file
  • returnJustUrl: Ever return just the image URL, without metadata

Cloudinary Options

The component accepts few properties as input. cloudName and uploadPreset are required properties for this component.

  • cloudName: the cloud name that you can find in your configuration in Cloudinary.
  • uploadPreset: The upload_preset that you can find in your settins (Upload) in Cloudinary.
  • showPoweredBy [true | false]: It shows the poweredBy logo in the widget.
  • allowedFormats: An array of allowed format. (e.g. ['jpeg', 'png'])
  • maxFileSize: If specified, perform client side validation that prevents uploading files bigger than the given bytes size (e.g. 130000)
  • maxImageWidth: If specified, client-side scale-down resizing takes place before uploading if the width of the selected file is bigger than the specified value. (e.g. 2000)
  • maxImageHeight: If specified, client-side scale-down resizing takes place before uploading if the height of the selected file is bigger than the specified value. (e.g. 2000)
  • sources ["local", "web", "web"]: List of file sources
  • defaultSource: The default selected source tab when the widget is opened.
  • multiple: Whether selecting and uploading multiple images is allowed.
  • maxFiles: The maximum number of files allowed in multiple upload mode.
  • cropping ["server" | null]: Whether to enable interactive cropping of images before uploading.
  • croppingAspectRatio: If specified, enforce the given aspect ratio on selected region when performing interactive cropping. (e.g. 0.5)
  • publicId: Custom public ID to assign to a single uploaded image.
  • folder: Folder name for all uploaded images. Acts as the prefix of assigned public IDs.
  • tags: One or more tags to assign to the uploaded images.
  • resourceType ["auto", "image", "raw"]: The resource type of the uploaded files.
  • contextAlt: Additional context metadata to attach to the uploaded images.
  • contextCaption: Additional context metadata to attach to the uploaded images.
  • buttonClass: Allows overriding the default CSS class name of the upload button added to your site.
  • buttonCaption: Allows overriding the default caption of the upload button added to your site.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.