{"id":20218255,"url":"https://github.com/cannercms/image-upload","last_synced_at":"2025-04-10T15:45:51.155Z","repository":{"id":57124584,"uuid":"76163619","full_name":"CannerCMS/image-upload","owner":"CannerCMS","description":"Based on antd image uploader","archived":false,"fork":false,"pushed_at":"2018-12-16T15:17:36.000Z","size":3063,"stargazers_count":8,"open_issues_count":1,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T13:36:23.395Z","etag":null,"topics":["ant-design","antd","gallery","image","image-processing","image-upload"],"latest_commit_sha":null,"homepage":"https://canner.github.io/image-upload/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CannerCMS.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-12-11T08:51:19.000Z","updated_at":"2022-09-25T15:36:42.000Z","dependencies_parsed_at":"2022-08-31T17:01:17.554Z","dependency_job_id":null,"html_url":"https://github.com/CannerCMS/image-upload","commit_stats":null,"previous_names":["canner/image-upload"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fimage-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fimage-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fimage-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CannerCMS%2Fimage-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CannerCMS","download_url":"https://codeload.github.com/CannerCMS/image-upload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248243511,"owners_count":21071055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ant-design","antd","gallery","image","image-processing","image-upload"],"created_at":"2024-11-14T06:37:45.321Z","updated_at":"2025-04-10T15:45:51.129Z","avatar_url":"https://github.com/CannerCMS.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# image-upload [![NPM version][npm-image]][npm-url]  [![Dependency Status][daviddm-image]][daviddm-url]\n\u003e An image-uploader based on ant design (https://ant.design/)\n\n![preview](./docs/image-upload.gif)\n\n## Installation\n\n```sh\n$ npm install --save @canner/image-upload\n```\n\n## Usage\n\n```js\nimport React, {Component} from 'react';\nimport ReactDOM from 'react-dom';\nimport ImageUpload from '../src/index';\n\nclass Demo extends Component {\n  constructor(props) {\n    super(props);\n    this.showPopup = this.showPopup.bind(this);\n    this.closePopup = this.closePopup.bind(this);\n\n    this.state = {\n      popup: false\n    };\n  }\n\n  showPopup() {\n    this.setState({\n      popup: true\n    });\n  }\n\n  closePopup() {\n    this.setState({\n      popup: false\n    });\n  }\n\n  onChange(value) {\n    console.log(value)\n  }\n\n  render() {\n\n    return (\n      \u003cdiv\u003e\n        \u003cbutton onClick={this.showPopup}\u003eshow edit\u003c/button\u003e\n        \u003cImageUpload\n          closeEditPopup={this.closePopup}\n          editPopup={this.state.popup}\n          onChange={this.onChange}\n          multiple={true}\n        /\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nReactDOM.render(\n  \u003cDemo/\u003e\n, document.getElementById('root'));\n\n```\n\n## Props\n\n| Name         | Type    | Default | Description |\n| ------------ | ------- | ------- | ----------- |\n| locale | string | 'en' | Set locale |\n| localeMessages | localeMessages: {[string]: string} | see `src/locale/en.js` | Locale messages |\n| onChange | `(value: string \\| Array\u003cstring\u003e) =\u003e void` | null | called every change, if `multiple` to true `value` is an array. |\n| closeEditPopup | `() =\u003e void` | null | called when close |\n| editPopup | boolean | false | should popup show or not |\n| multiple | boolean | false | allow upload multiple images or not. |\n| galleryConfig | `Array\u003c{name: string, gallery: Array\u003c{ url: string, name: string }\u003e}\u003e \\| null` | default `null` see `src/config.js` for demo settings | Setup albums for users to choose, in `Gallery` tab, disable if set to `null`. |\n| serviceConfig | depends on services | undefined | pass image configurations generate from: https://github.com/Canner/image-service-config |\n\n## Support i18n\n\nThis package support i18n, currently support languages:\n\n- en (see [src/locale/en.js](./src/locale/en.js))\n- zh_tw (see [src/locale/zh_tw.js](./src/locale/zh_tw.js))\n- Submit your language! PRs are welcome!\n\n**Usage:** import specific locale messages from `lib` folder, and pass it into `localeMessages` props.\n\n```js\nimport zhTWLocale from '@canner/image-upload/lib/locale/zh_tw';\n\n\u003cImageUpload\n  locale=\"zh\"\n  localeMessages={zhTWLocale}\n  {...otherProps}\n/\u003e\n```\n\n\n## Start example server\n\n```\nnpm start\n```\n\n## License\n\nApache-2.0 © [Canner](https://www.canner.io)\n\n\n[npm-image]: https://badge.fury.io/js/%40canner%2Fimage-upload.svg\n[npm-url]: https://npmjs.org/package/@canner/image-upload\n[travis-image]: https://travis-ci.org/Canner/image-upload.svg?branch=master\n[travis-url]: https://travis-ci.org/Canner/image-upload\n[daviddm-image]: https://david-dm.org/Canner/image-upload.svg?theme=shields.io\n[daviddm-url]: https://david-dm.org/Canner/image-upload\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fimage-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcannercms%2Fimage-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcannercms%2Fimage-upload/lists"}