React Drag And Drop With Cropper

Sandbox Demo

Demo

Tabel of Contents

1. Features
2. Installation
3. Usage
4. Example
5. Props
6. Quick Example

Features

1. Responsive (you can use pixels or percentages).
2. Upload / Browse images.
3. Crop with custom crop size and can be disabled.
4. Free Crop is also avilable.
5. No Document Manipulation.
6. Standard image formats are accepted.
7. Images with Errors are highlighted with different color.
8. Drag and Drop can be done both row and colomn wise.
9. Customizable images and buttons.

Installation

npm i react-custom-dnd --save

Usage

import Dnd from "react-custom-dnd";

Example

function DndDemo() {
  const callback = payload => {
    if (payload.error) return console.log(payload.error);
    console.log(payload);
  };
  return <Dnd callback={callback} />;
}

Props

Except Callback all the props are optional

Callback

Callback is invoked when onMouseOut React Event occur on the Dnd.

const callback = payload => {
  if (payload.error) return console.log(payload.error);
  console.log(payload);
};

Normal Response

After all the required validation (like crop ratio,image type etc,.) are done the payload will contain

payload: {
  fileObject: [],//contains file object of the images uploaded,
  imageUrls:[],//contains the data url of the image uploaded
}

Error Response

payload: {
  error: ""; // Error like crop ratio,image type, etc,.
}

CallBack Demo

Crop

To enable Crop use crop props, by default false

<Dnd crop />

or

<Dnd crop = true />

you can disable it by passing props crop = false

<Dnd crop = false />

or

<Dnd />

Crop Ratio

Crop ratio helps to crop the image in a required aspect ratio.

const cropRatio = {
  unit: "%",
  width: 30,
  aspect: 5 / 3 //aspect ratio is 5/3
};

/*
Default value involves
  unit: "%"
  width: 30
  aspect: 4 / 3
*/

<Dnd cropRatio={cropRatio} />;

It works fine even unit and width is not mentioned.

const cropRatio = {
  unit: "%",
  width: 30
};

If aspect ratio is not given default will be 4:3

Free Crop

If freeCrop is enabled, you can crop in any ratio but crop validation is not done. By default false

<Dnd freeCrop={true}>

Crop preview

Mentioning unit and width (By Default)

By default Crop is initiated

Without mentioning unit and width

You have to initiate the crop here.

Maximum Image Uploads

Maximum images that can be uploaded. Default value is 12.

<Dnd maxImageUpload = 12 />

MimeType

The MimeTypes can be mentioned with seperator / like jpeg/png. By default it supports jpeg/jpg/gif/png

<Dnd mimeType="png/jpeg/jpg/gif" />

MimeType Example

<Dnd mimeType="png" />               //If you want to upload only png
<Dnd mimeType="png/jpg" />           //If you want to upload png and jpg
//like so...

Label and Sub Label

Default Label is Drag and drop images here.

<Dnd label="Drag and drop images here" subLabel="or click to upload" />

Label Preview

Message

Default Message is Hold and Drag to rearrange the order.

<Dnd message="Hold and Drag to rearrange the order" />

Message Preview

Error Messages

Error Messages includes

const errorMessages = {
  maxImageUpload: "You Cant Upload More than 3 images",
  imageFormat: "This image Format is not Supported",
  aspectRatio: "Image is not in  the proper aspect ratio"
};
/*
Default Error Messages
  maxImageUpload: "You Cant Upload More than 12 Files"
  imageFormat: "Only Jpeg/Jpg/Png/Gif Allowed"
  aspectRatio: "Image is not in  the proper aspect ratio"
*/
<Dnd errorMessages={errorMessages} />;

these messages will return in payload.

Icons

You can change label,cancel and crop icons

const icons = {
  labelIcon: , // Your icon goes here
  cancelIcon: , // Your icon goes here
  cropIcon:  // Your icon goes here
};

<Dnd icons={icons} />;

Icons preview (By Default)

Button Value

Button values includes Crop and Cancel by default.You can change that by using buttonvalues props.

const buttonvalue = {
  cancelButton: "Cancel", //optionl
  cropButton: "Confrim" // required
};
/*
  cancelButton: "Cancel",
  cropButton: "Crop"
*/

<Dnd buttonvalue={buttonvalue} />;

Button preview 1

;

const buttonvalue = {
  cropButton: "Confrim"
};
/*
  cancelButton: "Cancel",
  cropButton: "Crop"
*/

<Dnd buttonvalue={buttonvalue} />;

Button preview 2

;

Styles

const style = {
  //styles
}

<Dnd style={style} />

Styles you can change

Drag and Drop Area Styles

You can only change width and height

 DRAG_AND_DROP_AREA: {
    width: "60%", // width of the drag and drop area
    height: "300px" // height of the drag and drop area
  }

Drag and Drop Area preview

Message Styles

You can only change top, fontsize, color

  DRAG_AND_DROP_MESSAGE: {
    top: "400px",
    fontSize: "small", //font size of the message
    color: "grey" // color of the message
  }

Message preview

Crop and Cancel Button Styles

You can add any styles, they are not fixed

Note : The styles you provide here may affect the Crop Modal

 CROP_BUTTON: {
    background: "green", // background of the crop button
    color: "white", // color of the crop button
    width: "200px" //  width of the crop button
  },
  CANCEL_BUTTON: {
    background: "red", //background of the cancel button
    color: "white", //color of the cancel button
    width: "200px" //width of the cancel button
  },

Crop and Cancel Button preview

Crop and Cancel Icon Styles

You can only change these properties.

  DRAG_AND_DROP_AREA_ITEM_CANCEL_ICON: {
    color: "grey",
    float: " right",
    top: "",
    bottom: "",
    left: "",
    right: "",
    cursor: "pointer",
    position:"relative"
  },
  DRAG_AND_DROP_AREA_ITEM_CROP_ICON: {
    color: "red",
    float: " right",
    top: "50px",
    bottom: "",
    left: "23px",
    right: "",
    cursor: "pointer",
    position:"relative"
  },

Crop and Cancel Icon preview

Drag And Drop Area Item Styles

You can only change these properties. The red border around it refers that the image is not in the proper aspect ratio

  DRAG_AND_DROP_AREA_ITEM: {
      width: "200px",
      height: "100px",
      margin: "8px",
      textAlign: "center",
      borderRadius: "6px"
  }
  DRAG_AND_DROP_AREA_ITEM_ERROR: {
    border: "3px solid red" // If image is not in the proper aspect ratio the border will change to given color
  }

Drag And Drop Area Item preview

Entire Style Object

You can change the styles, otherwise the default styles will appear.

const style = {
  DRAG_AND_DROP_AREA: {
    width: "90%", // width of the drag and drop area
    height: "450px" // height of the drag and drop area
  },
  DRAG_AND_DROP_MESSAGE: {
    top: "400px",
    fontSize: "small", //font size of the message
    color: "grey" // color of the message
  },
  CROP_BUTTON: {
    background: "green", // background of the crop button
    color: "white", // color of the crop button
    width: "200px" //  width of the crop button
  },
  CANCEL_BUTTON: {
    background: "red", //background of the cancel button
    color: "white", //color of the cancel button
    width: "200px" //width of the cancel button
  },
  DRAG_AND_DROP_AREA_ITEM_CANCEL_ICON: {
    color: "grey",
    float: " right",
    top: "",
    bottom: "",
    left: "",
    right: "",
    cursor: "pointer"
  },
  DRAG_AND_DROP_AREA_ITEM_CROP_ICON: {
    color: "red",
    float: " right",
    top: "50px",
    bottom: "",
    left: "23px",
    right: "",
    cursor: "pointer"
  },
  DRAG_AND_DROP_AREA_ITEM: {
    width: "103px",
    height: "77px",
    margin: "8px",
    textAlign: "center",
    borderRadius: "6px"
  },
  DRAG_AND_DROP_AREA_ITEM_ERROR: {
    border: "3px solid red" // If image is not in the proper aspect ratio the border will change to given color
  }
};

Quick Example

In the following Example, Material UI Icons are used.

import React from "react";
import { render } from "react-dom";
import Dnd from "../src";
import CancelPresentationIcon from "@material-ui/icons/CancelPresentation";
import WallpaperIcon from "@material-ui/icons/Wallpaper";
import CropFreeIcon from "@material-ui/icons/CropFree";

const DemoComponent = () => {
  const callback = payload => {
    if (payload.error) return console.log(payload.error);
    console.log(payload);
  };
  const cropRatio = {
    unit: "%",
    width: 30,
    aspect: 4 / 3
  };
  const maxImageUpload = 20;
  const buttonvalue = {
    cancelButton: "Cancel",
    cropButton: "Crop"
  };
  const style = {
    DRAG_AND_DROP_AREA: {
      width: "60%",
      height: "300px"
    },
    DRAG_AND_DROP_MESSAGE: {
      top: "250px",
      fontSize: "small",
      color: "grey"
    },
    CROP_BUTTON: {
      background: "green",
      color: "white",
      width: "200px"
    },
    CANCEL_BUTTON: {
      background: "red",
      color: "white",
      width: "200px"
    },
    DRAG_AND_DROP_AREA_ITEM_CANCEL_ICON: {
      color: "grey",
      float: " right",
      top: "",
      bottom: "",
      left: "",
      right: "",
      cursor: "pointer"
    },
    DRAG_AND_DROP_AREA_ITEM_CROP_ICON: {
      color: "red",
      float: " right",
      top: "50px",
      bottom: "",
      left: "23px",
      right: "",
      cursor: "pointer"
    },
    DRAG_AND_DROP_AREA_ITEM: {
      width: "200px",
      height: "100px",
      margin: "8px",
      textAlign: "center",
      borderRadius: "6px"
    },
    DRAG_AND_DROP_AREA_ITEM_ERROR: {
      border: "3px solid red"
    }
  };
  const errorMessage = {
    maxImageUpload: "You Cant Upload More than 3 images",
    imageFormat: "This image Format is not Supported",
    aspectRatio: "Image is not in  the proper aspect ratio"
  };
  const icons = {
    labelIcon: <WallpaperIcon />,
    cancelIcon: <CancelPresentationIcon />,
    cropIcon: <CropFreeIcon />
  };
  return (
    <Dnd
      callback={callback}
      maxImageUpload={maxImageUpload}
      mimeType="png/jpeg/jpg/gif"
      label="Drag and drop images here"
      subLabel="or click to upload"
      message="Hold and Drag to rearrange the order"
      errorMessages={errorMessage}
      crop
      cropRatio={cropRatio}
      icons={icons}
      buttonvalue={buttonvalue}
      style={style}
    />
  );
};

export default DemoComponent;