{"id":13683283,"url":"https://github.com/vutoan266/react-images-uploading","last_synced_at":"2025-05-16T13:02:46.100Z","repository":{"id":39705623,"uuid":"229240000","full_name":"vutoan266/react-images-uploading","owner":"vutoan266","description":"The simple images uploader applied Render Props pattern that allows you to fully control UI component and behaviors.","archived":false,"fork":false,"pushed_at":"2023-03-05T11:23:49.000Z","size":3191,"stargazers_count":321,"open_issues_count":55,"forks_count":53,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-10T05:47:21.677Z","etag":null,"topics":["image","image-upload","images","react","react-images-upload","react-images-uploading","reactjs","typescript","upload","uploader"],"latest_commit_sha":null,"homepage":"https://github.com/vutoan266/react-images-uploading","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vutoan266.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-20T10:06:45.000Z","updated_at":"2025-04-21T17:03:28.000Z","dependencies_parsed_at":"2024-06-17T06:53:06.041Z","dependency_job_id":"7a86591a-dce9-4427-96b9-873fe00e9ee5","html_url":"https://github.com/vutoan266/react-images-uploading","commit_stats":{"total_commits":102,"total_committers":8,"mean_commits":12.75,"dds":0.7450980392156863,"last_synced_commit":"b712986b1704c61ea32b00ad9f6a3bb5281d15aa"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutoan266%2Freact-images-uploading","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutoan266%2Freact-images-uploading/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutoan266%2Freact-images-uploading/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vutoan266%2Freact-images-uploading/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vutoan266","download_url":"https://codeload.github.com/vutoan266/react-images-uploading/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535792,"owners_count":22087397,"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":["image","image-upload","images","react","react-images-upload","react-images-uploading","reactjs","typescript","upload","uploader"],"created_at":"2024-08-02T13:02:06.182Z","updated_at":"2025-05-16T13:02:46.025Z","avatar_url":"https://github.com/vutoan266.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# react-images-uploading\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/6290720/91559755-9d6e8c00-e973-11ea-9bde-4b60c89f441a.png\" width=\"250\" /\u003e\n\u003c/div\u003e\n\nThe simple images uploader applied `Render Props` pattern. (You can read more about this pattern [here](https://reactjs.org/docs/render-props.html)).\n\nThis approach allows you to fully control UI component and behaviours.\n\n\u003e See [the intro blog post](https://medium.com/@imvutoan/make-image-upload-in-react-easier-with-react-images-uploading-and-your-ui-983fed029ee2)\n\n[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest) ![Github_Actions](https://github.com/vutoan266/react-images-uploading/workflows/CI/CD/badge.svg) [![NPM](https://img.shields.io/npm/v/react-images-uploading.svg)](https://www.npmjs.com/package/react-images-uploading) [![NPM](https://img.shields.io/npm/dm/react-images-uploading.svg)](https://www.npmjs.com/package/react-images-uploading) [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/vutoan266/react-images-uploading/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/vutoan266/react-images-uploading/pulls) [![Package Quality](https://npm.packagequality.com/shield/react-images-uploading.svg)](https://packagequality.com/#?package=react-images-uploading) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![Package Quality](https://npm.packagequality.com/badge/react-images-uploading.png)](https://packagequality.com/#?package=react-images-uploading)\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n  - [Note](#note)\n- [Exported options](#exported-options)\n- [Contributors ✨](#contributors-)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n## Installation\n\n**npm**\n\n```bash\nnpm install --save react-images-uploading\n```\n\n**yarn**\n\n```bash\nyarn add react-images-uploading\n```\n\n## Usage\n\nYou can check out the basic demo here:\n\n- Javascript: [https://codesandbox.io/s/react-images-uploading-demo-u0khz](https://codesandbox.io/s/react-images-uploading-demo-u0khz)\n- Typescript: [https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm](https://codesandbox.io/s/react-images-uploading-demo-typescript-fr2zm)\n- Server Side rendering (NextJS): [https://codesandbox.io/s/react-images-uploading-ssr-j1qq2](https://codesandbox.io/s/react-images-uploading-ssr-j1qq2)\n\n**Basic**\n\n```tsx\nimport React from 'react';\nimport ImageUploading from 'react-images-uploading';\n\nexport function App() {\n  const [images, setImages] = React.useState([]);\n  const maxNumber = 69;\n\n  const onChange = (imageList, addUpdateIndex) =\u003e {\n    // data for submit\n    console.log(imageList, addUpdateIndex);\n    setImages(imageList);\n  };\n\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cImageUploading\n        multiple\n        value={images}\n        onChange={onChange}\n        maxNumber={maxNumber}\n        dataURLKey=\"data_url\"\n      \u003e\n        {({\n          imageList,\n          onImageUpload,\n          onImageRemoveAll,\n          onImageUpdate,\n          onImageRemove,\n          isDragging,\n          dragProps,\n        }) =\u003e (\n          // write your building UI\n          \u003cdiv className=\"upload__image-wrapper\"\u003e\n            \u003cbutton\n              style={isDragging ? { color: 'red' } : undefined}\n              onClick={onImageUpload}\n              {...dragProps}\n            \u003e\n              Click or Drop here\n            \u003c/button\u003e\n            \u0026nbsp;\n            \u003cbutton onClick={onImageRemoveAll}\u003eRemove all images\u003c/button\u003e\n            {imageList.map((image, index) =\u003e (\n              \u003cdiv key={index} className=\"image-item\"\u003e\n                \u003cimg src={image['data_url']} alt=\"\" width=\"100\" /\u003e\n                \u003cdiv className=\"image-item__btn-wrapper\"\u003e\n                  \u003cbutton onClick={() =\u003e onImageUpdate(index)}\u003eUpdate\u003c/button\u003e\n                  \u003cbutton onClick={() =\u003e onImageRemove(index)}\u003eRemove\u003c/button\u003e\n                \u003c/div\u003e\n              \u003c/div\u003e\n            ))}\n          \u003c/div\u003e\n        )}\n      \u003c/ImageUploading\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n**Validation**\n\n```ts\n...\n  {({ imageList, onImageUpload, onImageRemoveAll, errors }) =\u003e (\n    errors \u0026\u0026 \u003cdiv\u003e\n      {errors.maxNumber \u0026\u0026 \u003cspan\u003eNumber of selected images exceed maxNumber\u003c/span\u003e}\n      {errors.acceptType \u0026\u0026 \u003cspan\u003eYour selected file type is not allow\u003c/span\u003e}\n      {errors.maxFileSize \u0026\u0026 \u003cspan\u003eSelected file size exceed maxFileSize\u003c/span\u003e}\n      {errors.resolution \u0026\u0026 \u003cspan\u003eSelected file is not match your desired resolution\u003c/span\u003e}\n    \u003c/div\u003e\n  )}\n...\n```\n\n**Drag and Drop**\n\n```tsx\n...\n  {({ imageList, dragProps, isDragging }) =\u003e (\n    \u003cdiv {...dragProps}\u003e\n      {isDragging ? \"Drop here please\" : \"Upload space\"}\n      {imageList.map((image, index) =\u003e (\n        \u003cimg key={index} src={image.data_url} /\u003e\n      ))}\n    \u003c/div\u003e\n  )}\n...\n```\n\n## Props\n\n| parameter         | type                                | options                                   | default | description                                                           |\n| ----------------- | ----------------------------------- | ----------------------------------------- | ------- | --------------------------------------------------------------------- |\n| value             | array                               |                                           | []      | List of images                                                        |\n| onChange          | function                            | (imageList, addUpdateIndex) =\u003e void       |         | Called when add, update or delete action is called                    |\n| dataURLKey        | string                              |                                           | dataURL | Customized field name that base64 of selected image is assigned to    |\n| multiple          | boolean                             |                                           | false   | Set `true` for multiple chooses                                       |\n| maxNumber         | number                              |                                           | 1000    | Number of images user can select if mode = `multiple`                 |\n| onError           | function                            | (errors, files) =\u003e void                   |         | Called when it has errors                                             |\n| acceptType        | array                               | ['jpg', 'gif', 'png']                     | []      | The file extension(s) to upload                                       |\n| maxFileSize       | number                              |                                           |         | Max image size (Byte) and it is used in validation                    |\n| resolutionType    | string                              | 'absolute' \\| 'less' \\| 'more' \\| 'ratio' |         | Using for image validation with provided width \u0026 height               |\n| resolutionWidth   | number                              | \u003e 0                                       |         |                                                                       |\n| resolutionHeight  | number                              | \u003e 0                                       |         |                                                                       |\n| inputProps        | React.HTMLProps\\\u003cHTMLInputElement\\\u003e |                                           |         |                                                                       |\n| allowNonImageType | boolean                             |                                           | false   | Using for uploading non-image type purpose (E.g. txt, pdf, heic, ...) |\n\n### Note\n\n**resolutionType**\n\n| value    | description                                                              |\n| :------- | :----------------------------------------------------------------------- |\n| absolute | image's width === resolutionWidth \u0026\u0026 image's height === resolutionHeight |\n| ratio    | (resolutionWidth / resolutionHeight) === (image width / image height)    |\n| less     | image's width \u003c resolutionWidth \u0026\u0026 image's height \u003c resolutionHeight     |\n| more     | image's width \u003e resolutionWidth \u0026\u0026 image's height \u003e resolutionHeight     |\n\n## Exported options\n\n| parameter        | type                                      | description                                                         |\n| :--------------- | :---------------------------------------- | :------------------------------------------------------------------ |\n| imageList        | array                                     | List of images to render.                                           |\n| onImageUpload    | function                                  | Called when an element is clicks and triggers to open a file dialog |\n| onImageRemoveAll | function                                  | Called when removing all images                                     |\n| onImageUpdate    | (updateIndex: number) =\u003e void             | Called when updating an image at `updateIndex`.                     |\n| onImageRemove    | (deleteIndex: number \\| number[]) =\u003e void | Called when removing one or list image.                             |\n| errors           | object                                    | Exported object of validation                                       |\n| dragProps        | object                                    | Native element props for drag and drop feature                      |\n| isDragging       | boolean                                   | \"true\" if an image is being dragged                                 |\n\n## Contributors ✨\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://medium.com/@imvutoan\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/18349710?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003evutoan266\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vutoan266/react-images-uploading/commits?author=vutoan266\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-vutoan266\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/vutoan266/react-images-uploading/commits?author=vutoan266\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#maintenance-vutoan266\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e \u003ca href=\"https://github.com/vutoan266/react-images-uploading/commits?author=vutoan266\" title=\"Tests\"\u003e⚠️\u003c/a\u003e \u003ca href=\"https://github.com/vutoan266/react-images-uploading/pulls?q=is%3Apr+reviewed-by%3Avutoan266\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://www.dzungnguyen.dev/about\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/6290720?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDavid Nguyen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vutoan266/react-images-uploading/commits?author=davidnguyen179\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#ideas-davidnguyen179\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/vutoan266/react-images-uploading/commits?author=davidnguyen179\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"https://github.com/vutoan266/react-images-uploading/pulls?q=is%3Apr+reviewed-by%3Adavidnguyen179\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/conandk\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/12934183?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eDK\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vutoan266/react-images-uploading/commits?author=conandk\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#infra-conandk\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"#ideas-conandk\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/vutoan266/react-images-uploading/pulls?q=is%3Apr+reviewed-by%3Aconandk\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"https://github.com/vutoan266/react-images-uploading/commits?author=conandk\" title=\"Documentation\"\u003e📖\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://masesisaac.me/\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/9384060?v=4\" width=\"100px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eIsaac Maseruka\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/vutoan266/react-images-uploading/commits?author=masesisaac\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-enable --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\nThis project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvutoan266%2Freact-images-uploading","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvutoan266%2Freact-images-uploading","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvutoan266%2Freact-images-uploading/lists"}