# @cherrypulp/image-upload > Image upload and crop component made easier using AntD. Latest version **1.0.9** (published 2022-05-24) · 0 weekly downloads ## Install ```sh npm install @cherrypulp/image-upload pnpm add @cherrypulp/image-upload yarn add @cherrypulp/image-upload bun add @cherrypulp/image-upload ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.9 | | Published | 2022-05-24 | | First published | 2022-05-23 | | Weekly downloads | 0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 3 | | Unpacked size | 27.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Maintainers | dbennani_cherry, danielsum, cherrypulpcom, monkeymonk, anthonypauwels | ## Links - npm: https://www.npmjs.com/package/@cherrypulp/image-upload - npm.io page: https://npm.io/package/@cherrypulp/image-upload ## Dependencies (3) - [antd](https://npm.io/package/antd.md) ^4.20.5 - [antd-img-crop](https://npm.io/package/antd-img-crop.md) ^4.2.3 - [@ant-design/icons](https://npm.io/package/@ant-design/icons.md) ^4.7.0 ## Recent versions - 1.0.9 (latest) — 2022-05-24 - 1.0.8 — 2022-05-24 - 1.0.7 — 2022-05-24 - 1.0.6 — 2022-05-24 - 1.0.5 — 2022-05-24 - 1.0.4 — 2022-05-24 - 1.0.3 — 2022-05-24 - 1.0.2 — 2022-05-23 - 1.0.1 — 2022-05-23 - 1.0.0 — 2022-05-23 - 0.1.1 — 2022-05-23 - 0.1.0 — 2022-05-23 ## README # Image Upload And Crop using Ant Design Image upload and crop component made easier using AntD. [![Latest Version on NPM](https://img.shields.io/npm/v/@cherrypulp/image-upload.svg?style=flat-square)](https://npmjs.com/package/@cherrypulp/image-upload) ![npm](https://img.shields.io/npm/dt/@cherrypulp/image-upload) [![Software License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md) ## Demo A demo is available here : [https://codesandbox.io/s/image-upload-rqfis7?file=/src/App.js](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](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](https://github.com/nanxiaobei/antd-img-crop#styles). In your project just make : ````bash yarn add @cherrypulp/image-upload # or npm i @cherrypulp/image-upload --save ```` Then : ````javascript import {ImageUpload} from "@cherrypulp/image-upload"; const MyComponent = () => { return (<> {-- Exemple using a banner with a width 3x larger than height @see https://www.websightdesign.com/helpdesk/article?category=12000001079&folder=5000134798&article=5000638101 --} ); } 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](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](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](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) | ## Digging deeper You can get full documentation or check our complete example : - [https://ant.design/components/upload/#components-upload-demo-crop-image](https://ant.design/components/upload/#components-upload-demo-crop-image) - [https://github.com/nanxiaobei/antd-img-crop#props](https://github.com/nanxiaobei/antd-img-crop#props) - [https://ant.design/components/upload/#API](https://ant.design/components/upload/#API) # To dos : [x] Testing e2e Any helps wanted ! # License MIT # Treeware license This package is also a [Treeware](https://treeware.earth). If you use it in production, then we kindly ask [**buy the world a tree**](https://plant.treeware.earth/danielsum/@cherrypulp/image-upload) 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](https://opencollective.com/co-labs) --- _Source: https://npm.io/package/@cherrypulp/image-upload · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._