Image Upload And Crop using Ant Design

Image upload and crop component made easier using AntD.

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

Digging deeper

You can get full documentation or check our complete example :

• https://ant.design/components/upload/#components-upload-demo-crop-image
• https://github.com/nanxiaobei/antd-img-crop#props
• https://ant.design/components/upload/#API

To dos :

[x] Testing e2e

Any helps wanted !

License

MIT

Treeware license

This package is also a Treeware.

If you use it in production, then we kindly ask buy the world a tree to thank us for our work.

By contributing to the Treeware forest you’ll be creating employment for local families and restoring wildlife habitats.

Support us

Support us on Open Collective or buy us a Tree :

• https://opencollective.com/co-labs