@cherrypulp/image-upload NPM

Image Upload And Crop using Ant Design

Image upload and crop component made easier using AntD.

npm

Demo

A demo is available here : https://codesandbox.io/s/image-upload-rqfis7?file=/src/App.js

Getting started

This package works inside an Ant Design Project and assume that you have loaded the Ant Design Style.

Here is the getting started for the AntD Setup : https://ant.design/docs/react/getting-started. You can also download the minimal CSS to import if you don't fully load Ant Design : https://github.com/nanxiaobei/antd-img-crop#styles.

In your project just make :

yarn add @cherrypulp/image-upload 
# or
npm i @cherrypulp/image-upload --save

Then :

import {ImageUpload} from "@cherrypulp/image-upload";

const MyComponent = () => {
  return (<>
    <ImageUpload action={"/api/upload"} src={"https://dummyimage.com/600x400/000/fff"} />
    {-- Exemple using a banner with a width 3x larger than height @see https://www.websightdesign.com/helpdesk/article?category=12000001079&folder=5000134798&article=5000638101  --}
    <ImageUpload action={"/api/upload"} aspect={3} src={"https://dummyimage.com/600x400/000/fff"} />
  </>);
}

export default MyComponent;

Fully controlled example

This package give you access to all the properties and features of Ant Img Crop and Ant Uploader.

Here is a working example on how to override default behavior :

https://codesandbox.io/s/image-upload-rqfis7?file=/src/App.js

Properties

Properties	Type	Default	Description
action *	string	-	Action where the image will be posted
src*	string	-	Src of the current picture
defaultSrc	string	-	Default src image file if null
name	string	"image"	default name used to post the picture in the api (default = "image")
aspect	number	1	Ratio of the picture (default = 1 = square)
cropOptions	Object	{ rotate: true }	Default cropOptions @see https://github.com/nanxiaobei/antd-img-crop#props
uploadOptions	Object	{ listType : "picture", onPreview: () => {} }	AntD Upload options @see https://ant.design/components/upload/#components-upload-demo-crop-image
uploadButton	React.ReactNode or null	-	You can override it with a React Component
maxSize	number	10	Max file size in Mo (default = 10mo max)