{"_id":"@andfk/react-images-uploading","_rev":"1-b39e6e6a4b8d33a3ea7934029ad11f3b","name":"@andfk/react-images-uploading","dist-tags":{"latest":"3.0.0"},"versions":{"3.0.0":{"name":"@andfk/react-images-uploading","version":"3.0.0","description":"A simple images uploader without UI. Building by yourself","author":{"name":"imvutoan"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/andfk/React-images-uploading.git"},"homepage":"https://github.com/vutoan266/React-images-uploading/blob/master/README.md","main":"dist/index.js","engines":{"node":">=8","npm":">=5"},"scripts":{"test":"cross-env CI=1 react-scripts-ts test --env=jsdom","test:watch":"react-scripts-ts test --env=jsdom","build":"rollup -c","start":"rollup -c -w","prepare":"yarn run build"},"dependencies":{},"peerDependencies":{"prop-types":"^15.5.4","react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0"},"devDependencies":{"@types/jest":"^23.1.5","@types/react":"^16.3.13","@types/react-dom":"^16.0.5","babel-core":"^6.26.3","babel-runtime":"^6.26.0","cross-env":"^5.1.4","gh-pages":"^1.2.0","react":"^16.4.1","react-dom":"^16.4.1","react-scripts-ts":"^2.16.0","rollup":"^0.62.0","rollup-plugin-babel":"^3.0.7","rollup-plugin-commonjs":"^9.1.3","rollup-plugin-node-resolve":"^3.3.0","rollup-plugin-peer-deps-external":"^2.2.0","rollup-plugin-typescript2":"^0.17.0","rollup-plugin-url":"^1.4.0","typescript":"3.7.3"},"keywords":["image","images","upload","uploader","uploading","react image upload","react images uploading"],"bugs":{"url":"https://github.com/vutoan266/React-images-uploading/issues"},"gitHead":"1d68594585d78b43beba3555a43fc1b62fa3bdbc","_id":"@andfk/react-images-uploading@3.0.0","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"integrity":"sha512-3xzLyDex2NOPzGEkXmbFr2DGxVgSUv3OISJgDZneVkFwqgRFLouncXjx83q1fyPMxPzfXQcOFhQ8KoA/1rqNKg==","shasum":"f5912cc6e0014fa477c99c96566f0641c942b0a3","tarball":"https://registry.npmjs.org/@andfk/react-images-uploading/-/react-images-uploading-3.0.0.tgz","fileCount":7,"unpackedSize":56728,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA3LCRA9TVsSAnZWagAAKKEP/33EjFvxJjXDHQvwHizF\n+vRsTcUgR+SulOEzmLkSXqHt2y3yMPW6+Igi/x2L9Qt8k9hqTz3pNFU2BLHW\ns5eDiZs1Ak2MKBMv6oqQ7fh03rNgqMxGgaR7GOP9QHHmBvSoJxSR/Nhqvhph\navthFXoyAQ8+f4IBCxndld1QkDNFNtdF2gy2fQbMGo6iG1fMdvC+yY8wARgG\nVthB9iwNMLX7icqkxovTVIWfbHqfC+dDtd723cmmPB7SeY+Lz+CqJ4867icV\nK+s5wVXAcgsqTtvXAVK4NwPzukUgGvmMjPe3dx3vBid3YX1hsfz9Bzxxoo4p\nrn7dPfMzgfdi02ou/enYS1j/gtewawo8WjauYX3kz0qKy9Qr+qz52zTXsibq\nV0zQHTWI75NSwoCIOSc77/JJn21SHkbjdIREjnAsBTtmB8pklZQM4uSz9h63\nSDqlwCK0RjcS7tR7eT8s+fgr+mJa8OPvrdiIbVpxreN6nW3BymH6wdNULVuf\nujCEBG1I5vR8+iJeDHsZq+J+hV2pF8lylWxbccdlbZcq7z/D/3U0lvYacgSq\n2aiNtrhV6Aw3M5atXYYrooGVR4g9rCQbEL4WbeC33gBvU4eZlBTKcEy9C3l9\nQbdXOK5WBbUO6yLBcE6fyg8Jxda8yR01uoDN/HTJ+a//+FnIe8cWUGow2pjJ\nEBud\r\n=zOv+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+OnXY0T18a4JxRWLVzZ7eR80rXmXKaEO+Ws66MSY03AIgHIMXpQXX7pnYWLv6hzdgi/mgrHIkYeldE5LPdCPHmxw="}]},"maintainers":[{"name":"andfk","email":"hello@andresfran.co"}],"_npmUser":{"name":"andfk","email":"hello@andresfran.co"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-images-uploading_3.0.0_1598033355191_0.9455695411327985"},"_hasShrinkwrap":false}},"time":{"created":"2020-08-21T18:09:15.155Z","3.0.0":"2020-08-21T18:09:15.310Z","modified":"2022-04-04T13:58:16.840Z"},"maintainers":[{"name":"andfk","email":"hello@andresfran.co"}],"description":"A simple images uploader without UI. Building by yourself","homepage":"https://github.com/vutoan266/React-images-uploading/blob/master/README.md","keywords":["image","images","upload","uploader","uploading","react image upload","react images uploading"],"repository":{"type":"git","url":"git+https://github.com/andfk/React-images-uploading.git"},"author":{"name":"imvutoan"},"bugs":{"url":"https://github.com/vutoan266/React-images-uploading/issues"},"license":"MIT","readme":"# react-images-uploading\n\nTemporary publish of package until [PR](https://github.com/vutoan266/react-images-uploading/pull/13) \n>\n\n[![NPM](https://img.shields.io/npm/v/react-images-uploading.svg)](https://www.npmjs.com/package/react-images-uploading) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n# Images uploader\n\nA simple images uploader without UI. Building by yourself.\n\n## [#Demo](https://codesandbox.io/s/react-images-uploading-demo-u0khz)\n\n## [Introduce blog](https://medium.com/@imvutoan/make-image-upload-in-react-easier-with-react-images-uploading-and-your-ui-983fed029ee2)\n\n## Install\n\nWith npm\n\n```bash\nnpm install --save react-images-uploading\n```\n\nWith yarn\n\n```bash\nyarn add react-images-uploading\n```\n\n## Usage\n\n```tsx\nimport * as React from \"react\";\n\nimport ImageUploading from \"react-images-uploading\";\n// { ImageUploadingPropsType, ImageListType, ImageType } is type for typescript\n\nconst maxNumber = 10;\nconst maxMbFileSize = 5 * 1024 * 1024; // 5Mb\n\nclass Example extends React.Component {\n  onChange = (imageList) => {\n    // data for submit\n    console.log(imageList);\n  };\n  onError = (errors, files) => {\n    console.log(errors, files);\n  };\n\n  render() {\n    return (\n      <ImageUploading\n        onChange={this.onChange}\n        maxNumber={maxNumber}\n        multiple\n        maxFileSize={maxMbFileSize}\n        acceptType={[\"jpg\", \"gif\", \"png\"]}\n        onError={this.onError}\n      >\n        {({ imageList, onImageUpload, onImageRemoveAll }) => (\n          // write your building UI\n          <div>\n            <button onClick={onImageUpload}>Upload images</button>\n            <button onClick={onImageRemoveAll}>Remove all images</button>\n\n            {imageList.map((image) => (\n              <div key={image.key}>\n                <img src={image.dataURL} />\n                <button onClick={image.onUpdate}>Update</button>\n                <button onClick={image.onRemove}>Remove</button>\n              </div>\n            ))}\n          </div>\n        )}\n      </ImageUploading>\n    );\n  }\n}\n```\n\n### Validate\n\n```\n...\n  {({ imageList, onImageUpload, onImageRemoveAll, errors }) => (\n    <div>\n      {errors.maxNumber && <span>Number of selected images exceed maxNumber</span>}\n      {errors.acceptType && <span>Your selected file type is not allow</span>}\n      {errors.maxFileSize && <span>Selected file size exceed maxFileSize</span>}\n      {errors.resolution && <span>Selected file is not match your desired resolution</span>}\n    </div>\n  )}\n...\n```\n\n### Resolution\n\n- \"absolute\": resolutionWidth and resolutionHeight is equal with selected image absolutely\n- \"ratio\": resolutionWidth/resolutionHeight ratio is equal with width/height ratio of selected image\n- \"less: image width must less than resolutionWidth and image height must less than resolutionHeight\n- \"more: image width must more than resolutionWidth and image height must more than resolutionHeight\n\n## Props\n\n| parameter        | type     | options                                   | default | description                                                                    |\n| ---------------- | -------- | ----------------------------------------- | ------- | ------------------------------------------------------------------------------ |\n| multiple         | boolean  |                                           | false   | Set true for multiple choose                                                   |\n| maxNumber        | number   |                                           | 1000    | Number of images user can select if mode = \"multiple\"                          |\n| onChange         | function |                                           |         | Called every update                                                            |\n| onError          | function | (errors, files) => void                   |         | Called if have error on validate each update                                   |\n| defaultValue     | array    | \\[\\{dataURL: \\.\\.\\. \\}, \\.\\.\\.\\]          |         | Init data                                                                      |\n| acceptType       | array    | \\['jpg', 'gif', 'png'\\]                   | \\[\\]    | Supported image extension                                                      |\n| maxFileSize      | number   |                                           |         | Max image size\\(Byte\\) \\(will use in the image validation\\)                    |\n| resolutionType   | string   | \"absolute\" \\| \"less\" \\| \"more\" \\| \"ratio\" |         | Using for validate image with your width \\- height resolution that you provide |\n| resolutionWidth  | number   | > 0                                       |         |                                                                                |\n| resolutionHeight | number   | > 0                                       |         |                                                                                |\n\n## Exported options\n\n| parameter                 | type     | description                                                               |\n| ------------------------- | -------- | ------------------------------------------------------------------------- |\n| imageList                 | array    | List of images for render. Each item in imageList has some options below. |\n| imageList[index].key      | string   | Generate filename                                                         |\n| imageList[index].dataURL  | string   | Url image or base64                                                       |\n| imageList[index].onUpdate | function | Call function for replace a new image on current position                 |\n| imageList[index].onRemove | function | Call function for remove current image                                    |\n| onImageUpload             | function | Call for upload new image(s)                                              |\n| onImageRemoveAll          | function | Call for remove all image(s)                                              |\n| errors                    | object   | Export type of validation                                                 |\n\n## License\n\nMIT © [](https://github.com/)\n","readmeFilename":"README.md"}