{"id":25628401,"url":"https://github.com/siamahnaf/upload","last_synced_at":"2025-04-14T14:43:34.795Z","repository":{"id":274838105,"uuid":"924236170","full_name":"siamahnaf/upload","owner":"siamahnaf","description":"A fully headless React package for handling image and file uploads with complete UI control. It provides four flexible components— ImageUpload, MultiImageUpload, FileUpload, and MultiFileUpload —using render props for seamless customization. Perfect for developers who need total control over the upload experience.","archived":false,"fork":false,"pushed_at":"2025-02-13T14:09:54.000Z","size":47,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-05T04:07:43.771Z","etag":null,"topics":["react-upload","upload","upload-file","upload-image","upload-images"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@siamf/upload","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/siamahnaf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2025-01-29T16:49:18.000Z","updated_at":"2025-02-13T14:09:57.000Z","dependencies_parsed_at":"2025-01-29T19:26:37.017Z","dependency_job_id":"f06935b8-90c3-446b-8983-59d1cb144482","html_url":"https://github.com/siamahnaf/upload","commit_stats":null,"previous_names":["siamahnaf/siamf-upload","siamahnaf/upload"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fupload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fupload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fupload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/siamahnaf%2Fupload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/siamahnaf","download_url":"https://codeload.github.com/siamahnaf/upload/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248898743,"owners_count":21179832,"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":["react-upload","upload","upload-file","upload-image","upload-images"],"created_at":"2025-02-22T18:30:49.079Z","updated_at":"2025-04-14T14:43:34.773Z","avatar_url":"https://github.com/siamahnaf.png","language":"TypeScript","readme":"\u003cbr/\u003e\n\u003cpicture\u003e\n  \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780157/Personal%20Logo/logo-white_e6fujz.png\"\u003e\n  \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png\"\u003e\n  \u003cimg alt=\"Siam Ahnaf\" src=\"https://res.cloudinary.com/dub0dpenl/image/upload/v1731780152/Personal%20Logo/logo-dark_qqwrqu.png\" height=\"auto\" width=\"240\"\u003e\n\u003c/picture\u003e \n\u003cbr/\u003e \u003cbr/\u003e\n\n# @siamf/upload\nA fully headless React package for handling image and file uploads with complete UI control. It provides four flexible components— `ImageUpload`, `MultiImageUpload`, `FileUpload`, and `MultiFileUpload` —using render props for seamless customization. Perfect for developers who need total control over the upload experience.\n\n\u003ca href=\"https://www.buymeacoffee.com/siamahnaf\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 60px !important;width: 217px !important;\" \u003e\u003c/a\u003e\n\n- Easy to use\n- Full UI Control (This package only provide functionality)\n- SSR Support\n- Latest React Support\n\n# Installation\n\n```bash\n$ npm i @siamf/upload\n```\n\n# Usage\n\n### `ImageUpload`\n\n```javascript\n\"use client\"\nimport { useState } from \"react\";\nimport { ImageUpload, ImageType } from \"@siamf/upload\";\n\nconst Page = () =\u003e {\n  //State\n  const [selectedImage, setSelected] = useState\u003cImageType\u003e(null);\n\n  const onHandleFile = (value: ImageType) =\u003e {\n    setSelected(value);\n  }\n\n  return (\n    \u003cdiv className=\"px-40 py-40\"\u003e\n      \u003cImageUpload\n        onChange={onHandleFile}\n        value={selectedImage}\n      \u003e\n        {({\n          isDragging,\n          dragProps,\n          onImageUpload,\n          imageInfo,\n          onImageRemove,\n          errors,\n        }) =\u003e (\n          \u003cdiv\u003e\n            \u003cdiv className={`border border-solid border-red-600 p-8 ${isDragging \u0026\u0026 \"bg-green-600\"}`} {...dragProps} onClick={onImageUpload}\u003e\n              Upload Now\n            \u003c/div\u003e\n            \u003cdiv\u003e\n              {imageInfo \u0026\u0026\n                \u003cdiv className=\"my-4 border-4 p-5 border-solid border-black\"\u003e\n                  \u003cimg src={imageInfo.dataURL} /\u003e\n                \u003c/div\u003e\n              }\n              \u003cbutton onClick={onImageRemove}\u003e\n                Remove File\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/ImageUpload\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Page;\n```\n\n\n### `MultiImageUpload`\n\n```javascript\n\"use client\"\nimport { useState } from \"react\";\nimport { MultiImageUpload, MultiImageType } from \"@siamf/upload\";\n\nconst Page = () =\u003e {\n  //State\n  const [imageList, setImageList] = useState\u003cMultiImageType\u003e([]);\n\n  const onHandleFile = (value: MultiImageType) =\u003e {\n    setImageList(value);\n  }\n\n  return (\n    \u003cdiv className=\"px-40 py-40\"\u003e\n      \u003cMultiImageUpload\n        onChange={onHandleFile}\n        value={imageList}\n      \u003e\n        {({\n          isDragging,\n          dragProps,\n          onImageUpload,\n          imageInfo,\n          onImageRemove,\n          onImageRemoveAll,\n          onImageUpdate,\n          errors,\n        }) =\u003e (\n          \u003cdiv\u003e\n            \u003cdiv className={`border border-solid border-red-600 p-8 ${isDragging \u0026\u0026 \"bg-green-600\"}`} {...dragProps} onClick={onImageUpload}\u003e\n              Upload Now\n            \u003c/div\u003e\n            \u003cdiv\u003e\n              {imageInfo.map((item, i) =\u003e (\n                \u003cdiv className=\"my-4 border-4 p-5 border-solid border-black\"\u003e\n                  \u003cimg src={item?.dataURL} /\u003e\n                  \u003cbutton onClick={() =\u003e onImageRemove(i)}\u003eRemove File\u003c/button\u003e\n                  \u003cbutton onClick={() =\u003e onImageUpdate(i)}\u003eUpdate File\u003c/button\u003e\n                \u003c/div\u003e\n              ))}\n              \u003cbutton onClick={onImageRemoveAll}\u003e\n                Remove All\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/MultiImageUpload\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Page;\n```\n\n### `FileUpload`\n\n```javascript\n\"use client\"\nimport { useState } from \"react\";\nimport { FileUpload, FileType } from \"@siamf/upload\";\n\nconst Page = () =\u003e {\n  //State\n  const [selectedFile, setSelected] = useState\u003cFileType\u003e(null);\n\n  const onHandleFile = (value: FileType) =\u003e {\n    setSelected(value);\n  }\n\n  return (\n    \u003cdiv className=\"px-40 py-40\"\u003e\n      \u003cFileUpload\n        onChange={onHandleFile}\n        value={selectedFile}\n      \u003e\n        {({\n          isDragging,\n          dragProps,\n          onFileUpload,\n          fileInfo,\n          onFileRemove,\n          errors,\n        }) =\u003e (\n          \u003cdiv\u003e\n            \u003cdiv className={`border border-solid border-red-600 p-8 ${isDragging \u0026\u0026 \"bg-green-600\"}`} {...dragProps} onClick={onFileUpload}\u003e\n              Upload Now\n            \u003c/div\u003e\n            \u003cdiv\u003e\n              {fileInfo \u0026\u0026\n                \u003cdiv className=\"my-4 border-4 p-5 border-solid border-black\"\u003e\n                  \u003cp\u003e{fileInfo.fileInfo.name}\u003c/p\u003e\n                \u003c/div\u003e\n              }\n              \u003cbutton onClick={onFileRemove}\u003e\n                Remove File\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/FileUpload\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Page;\n```\n\n### `MultiFileUpload`\n\n```javascript\n\"use client\"\nimport { useState } from \"react\";\nimport { MultiFileUpload, MultiFileType } from \"@siamf/upload\";\n\nconst Page = () =\u003e {\n  //State\n  const [fileList, setFileList] = useState\u003cMultiFileType\u003e([]);\n\n  const onHandleFile = (value: MultiFileType) =\u003e {\n    setFileList(value);\n  }\n\n  return (\n    \u003cdiv className=\"px-40 py-40\"\u003e\n      \u003cMultiFileUpload\n        onChange={onHandleFile}\n        value={fileList}\n      \u003e\n        {({\n          isDragging,\n          dragProps,\n          onFileUpload,\n          fileInfo,\n          onFileRemove,\n          onFileRemoveAll,\n          onFileUpdate,\n          errors,\n        }) =\u003e (\n          \u003cdiv\u003e\n            \u003cdiv className={`border border-solid border-red-600 p-8 ${isDragging \u0026\u0026 \"bg-green-600\"}`} {...dragProps} onClick={onFileUpload}\u003e\n              Upload Now\n            \u003c/div\u003e\n            \u003cdiv\u003e\n              {fileInfo.map((item, i) =\u003e (\n                \u003cdiv className=\"my-4 border-4 p-5 border-solid border-black\"\u003e\n                  \u003cp\u003e{item?.fileInfo.name}\u003c/p\u003e\n                  \u003cbutton onClick={() =\u003e onFileRemove(i)}\u003eRemove File\u003c/button\u003e\n                  \u003cbutton onClick={() =\u003e onFileUpdate(i)}\u003eUpdate File\u003c/button\u003e\n                \u003c/div\u003e\n              ))}\n              \u003cbutton onClick={onFileRemoveAll}\u003e\n                Remove All\n              \u003c/button\u003e\n            \u003c/div\u003e\n          \u003c/div\u003e\n        )}\n      \u003c/MultiFileUpload\u003e\n    \u003c/div\u003e\n  );\n};\n\nexport default Page;\n```\n\n**Example for Validation**\n\n```javascript\n...\n  {({ imageList, onImageUpload, onImageRemoveAll, errors }) =\u003e (\n    errors \u0026\u0026 \u003cdiv\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    \u003c/div\u003e\n  )}\n...\n```\n\n# Available Options\n\n## `ImageUpload`\n\n### Props\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Default/Required \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e inputProps \u003c/td\u003e\n    \u003ctd\u003e Available props for input field \u003c/td\u003e\n    \u003ctd\u003e HTMLProps\u003cHTMLInputElement\u003e \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e acceptType \u003c/td\u003e\n    \u003ctd\u003e Image Accept type \u003c/td\u003e\n    \u003ctd\u003e ImageAcceptType | Exclude\u003cImageAcceptType, ImageAcceptType.ALL\u003e[] \u003c/td\u003e\n    \u003ctd\u003e ImageAcceptType.ALL \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e maxFileSize \u003c/td\u003e\n    \u003ctd\u003e Max file size validation(KB) \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e resolutionWidth \u003c/td\u003e\n    \u003ctd\u003e Image resolution width validation \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e resolutionHeight \u003c/td\u003e\n    \u003ctd\u003e Image resolution height validation \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e resolutionType \u003c/td\u003e\n    \u003ctd\u003e Resolution type for validations \u003c/td\u003e\n     \u003ctd\u003e \"absolute\" | \"less\" | \"more\" | \"ratio\" \u003c/td\u003e\n    \u003ctd\u003e \"absolute\" \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e children \u003c/td\u003e\n    \u003ctd\u003e UI for upload zone or button \u003c/td\u003e\n     \u003ctd\u003e (props: ImageExportTypes) =\u003e React.ReactNode \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onChange \u003c/td\u003e\n    \u003ctd\u003e Image upload listener function \u003c/td\u003e\n     \u003ctd\u003e (value: ImageType) =\u003e void; \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e value \u003c/td\u003e\n    \u003ctd\u003e Default Value \u003c/td\u003e\n     \u003ctd\u003e ImageType \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onError \u003c/td\u003e\n    \u003ctd\u003e Image upload error listener \u003c/td\u003e\n     \u003ctd\u003e (errors: ImageErrorTypes) =\u003e void; \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### ImageExportTypes\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e dragProps \u003c/th\u003e\n    \u003cth\u003e Element for implementing drag and drop features \u003c/th\u003e\n    \u003cth\u003e Object \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e isDragging \u003c/td\u003e\n    \u003ctd\u003e Listen is it dragging or not \u003c/td\u003e\n    \u003ctd\u003e boolean \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onImageUpload \u003c/td\u003e\n    \u003ctd\u003e Handler for triggering image upload \u003c/td\u003e\n    \u003ctd\u003e () =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e imageInfo \u003c/td\u003e\n    \u003ctd\u003e Selected image information \u003c/td\u003e\n    \u003ctd\u003e ImageType \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e errors \u003c/td\u003e\n    \u003ctd\u003e Error listener \u003c/td\u003e\n    \u003ctd\u003e ImageErrorTypes \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onImageRemove \u003c/td\u003e\n    \u003ctd\u003e Handler for removing selected Image \u003c/td\u003e\n    \u003ctd\u003e () =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## `MultiImageUpload`\n\n### Props\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Default/Required \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e inputProps \u003c/td\u003e\n    \u003ctd\u003e Available props for input field \u003c/td\u003e\n    \u003ctd\u003e HTMLProps\u003cHTMLInputElement\u003e \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e acceptType \u003c/td\u003e\n    \u003ctd\u003e Image Accept type \u003c/td\u003e\n    \u003ctd\u003e ImageAcceptType | Exclude\u003cImageAcceptType, ImageAcceptType.ALL\u003e[] \u003c/td\u003e\n    \u003ctd\u003e ImageAcceptType.ALL \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e maxFileSize \u003c/td\u003e\n    \u003ctd\u003e Max file size validation(KB) \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e resolutionWidth \u003c/td\u003e\n    \u003ctd\u003e Image resolution width validation \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e resolutionHeight \u003c/td\u003e\n    \u003ctd\u003e Image resolution height validation \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e resolutionType \u003c/td\u003e\n    \u003ctd\u003e Resolution type for validations \u003c/td\u003e\n     \u003ctd\u003e \"absolute\" | \"less\" | \"more\" | \"ratio\" \u003c/td\u003e\n    \u003ctd\u003e \"absolute\" \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e children \u003c/td\u003e\n    \u003ctd\u003e UI for upload zone or button \u003c/td\u003e\n     \u003ctd\u003e (props: MultiImageExportTypes) =\u003e React.ReactNode \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onChange \u003c/td\u003e\n    \u003ctd\u003e Image upload listener function \u003c/td\u003e\n     \u003ctd\u003e (value: MultiImageType) =\u003e void \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e value \u003c/td\u003e\n    \u003ctd\u003e Default Value \u003c/td\u003e\n     \u003ctd\u003e MultiImageType \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onError \u003c/td\u003e\n    \u003ctd\u003e Image upload error listener \u003c/td\u003e\n     \u003ctd\u003e (errors: MultiImageErrorTypes) =\u003e void \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e maxNumber \u003c/td\u003e\n    \u003ctd\u003e Maximum files to be selected \u003c/td\u003e\n     \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e 10 \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### MultiImageExportTypes\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e dragProps \u003c/th\u003e\n    \u003cth\u003e Element for implementing drag and drop features \u003c/th\u003e\n    \u003cth\u003e Object \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e isDragging \u003c/td\u003e\n    \u003ctd\u003e Listen is it dragging or not \u003c/td\u003e\n    \u003ctd\u003e boolean \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onImageUpload \u003c/td\u003e\n    \u003ctd\u003e Handler for triggering image upload \u003c/td\u003e\n    \u003ctd\u003e () =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e imageInfo \u003c/td\u003e\n    \u003ctd\u003e Selected image information \u003c/td\u003e\n    \u003ctd\u003e MultiImageType \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e errors \u003c/td\u003e\n    \u003ctd\u003e Error listener \u003c/td\u003e\n    \u003ctd\u003e MultiImageErrorTypes \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onImageRemove \u003c/td\u003e\n    \u003ctd\u003e Handler for removing selected Image \u003c/td\u003e\n    \u003ctd\u003e (index: number) =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onImageUpdate \u003c/td\u003e\n    \u003ctd\u003e Handler for updating a particular image \u003c/td\u003e\n    \u003ctd\u003e (index: number) =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onImageRemoveAll \u003c/td\u003e\n    \u003ctd\u003e Handler for removing all image \u003c/td\u003e\n    \u003ctd\u003e () =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## `FileUpload`\n\n### Props\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Default/Required \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e inputProps \u003c/td\u003e\n    \u003ctd\u003e Available props for input field \u003c/td\u003e\n    \u003ctd\u003e HTMLProps\u003cHTMLInputElement\u003e \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e acceptType \u003c/td\u003e\n    \u003ctd\u003e File Accept type \u003c/td\u003e\n    \u003ctd\u003e FileAcceptType | Exclude\u003cFileAcceptType, FileAcceptType.ALL\u003e[] \u003c/td\u003e\n    \u003ctd\u003e FileAcceptType.ALL \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e maxFileSize \u003c/td\u003e\n    \u003ctd\u003e Max file size validation(KB) \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e children \u003c/td\u003e\n    \u003ctd\u003e UI for upload zone or button \u003c/td\u003e\n     \u003ctd\u003e (props: FileExportTypes) =\u003e React.ReactNode \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onChange \u003c/td\u003e\n    \u003ctd\u003e File upload listener function \u003c/td\u003e\n     \u003ctd\u003e (value: FileType) =\u003e void \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e value \u003c/td\u003e\n    \u003ctd\u003e Default Value \u003c/td\u003e\n     \u003ctd\u003e FileType \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onError \u003c/td\u003e\n    \u003ctd\u003e File upload error listener \u003c/td\u003e\n     \u003ctd\u003e (errors: FileErrorTypes) =\u003e void; \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### ImageExportTypes\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e dragProps \u003c/th\u003e\n    \u003cth\u003e Element for implementing drag and drop features \u003c/th\u003e\n    \u003cth\u003e Object \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e isDragging \u003c/td\u003e\n    \u003ctd\u003e Listen is it dragging or not \u003c/td\u003e\n    \u003ctd\u003e boolean \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onImageUpload \u003c/td\u003e\n    \u003ctd\u003e Handler for triggering file upload \u003c/td\u003e\n    \u003ctd\u003e () =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e fileInfo \u003c/td\u003e\n    \u003ctd\u003e Selected file information \u003c/td\u003e\n    \u003ctd\u003e FileType \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e errors \u003c/td\u003e\n    \u003ctd\u003e Error listener \u003c/td\u003e\n    \u003ctd\u003e FileErrorTypes \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onFileRemove \u003c/td\u003e\n    \u003ctd\u003e Handler for removing selected File \u003c/td\u003e\n    \u003ctd\u003e () =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\n## `MultiFileUpload`\n\n### Props\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e Name \u003c/th\u003e\n    \u003cth\u003e Description \u003c/th\u003e\n    \u003cth\u003e Type \u003c/th\u003e\n    \u003cth\u003e Default/Required \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e inputProps \u003c/td\u003e\n    \u003ctd\u003e Available props for input field \u003c/td\u003e\n    \u003ctd\u003e HTMLProps\u003cHTMLInputElement\u003e \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e acceptType \u003c/td\u003e\n    \u003ctd\u003e File Accept type \u003c/td\u003e\n    \u003ctd\u003e FileAcceptType | Exclude\u003cFileAcceptType, FileAcceptType.ALL\u003e[] \u003c/td\u003e\n    \u003ctd\u003e FileAcceptType.ALL \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e maxFileSize \u003c/td\u003e\n    \u003ctd\u003e Max file size validation(KB) \u003c/td\u003e\n    \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e children \u003c/td\u003e\n    \u003ctd\u003e UI for upload zone or button \u003c/td\u003e\n     \u003ctd\u003e (props: MultiFileExportTypes) =\u003e React.ReactNode \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onChange \u003c/td\u003e\n    \u003ctd\u003e File upload listener function \u003c/td\u003e\n     \u003ctd\u003e (value: MultiFileType) =\u003e void \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e value \u003c/td\u003e\n    \u003ctd\u003e Default Value \u003c/td\u003e\n     \u003ctd\u003e MultiFileType \u003c/td\u003e\n    \u003ctd\u003e required \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onError \u003c/td\u003e\n    \u003ctd\u003e File upload error listener \u003c/td\u003e\n     \u003ctd\u003e (errors: MultiFileErrorTypes) =\u003e void \u003c/td\u003e\n    \u003ctd\u003e optional \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e maxNumber \u003c/td\u003e\n    \u003ctd\u003e Maximum files to be selected \u003c/td\u003e\n     \u003ctd\u003e number \u003c/td\u003e\n    \u003ctd\u003e 10 \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n### MultiImageExportTypes\n\u003ctable width=\"100%\"\u003e\n  \u003ctr\u003e\n    \u003cth\u003e dragProps \u003c/th\u003e\n    \u003cth\u003e Element for implementing drag and drop features \u003c/th\u003e\n    \u003cth\u003e Object \u003c/th\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e isDragging \u003c/td\u003e\n    \u003ctd\u003e Listen is it dragging or not \u003c/td\u003e\n    \u003ctd\u003e boolean \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e onFileUpload \u003c/td\u003e\n    \u003ctd\u003e Handler for triggering file upload \u003c/td\u003e\n    \u003ctd\u003e () =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e fileInfo \u003c/td\u003e\n    \u003ctd\u003e Selected file information \u003c/td\u003e\n    \u003ctd\u003e MultiFileType \u003c/td\u003e\n  \u003c/tr\u003e\n   \u003ctr\u003e\n    \u003ctd\u003e errors \u003c/td\u003e\n    \u003ctd\u003e Error listener \u003c/td\u003e\n    \u003ctd\u003e MultiFileErrorTypes \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onFileRemove \u003c/td\u003e\n    \u003ctd\u003e Handler for removing particular file \u003c/td\u003e\n    \u003ctd\u003e (index: number) =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onFileUpdate \u003c/td\u003e\n    \u003ctd\u003e Handler for updating a particular file \u003c/td\u003e\n    \u003ctd\u003e (index: number) =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e onFileRemoveAll \u003c/td\u003e\n    \u003ctd\u003e Handler for removing all file \u003c/td\u003e\n    \u003ctd\u003e () =\u003e void \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n# Stay in touch\n\n- Author - [Siam Ahnaf](https://www.siamahnaf.com/)\n- Website - [https://www.siamahnaf.com/](https://www.siamahnaf.com/)\n- LinkedIn - [https://www.linkedin.com/in/siamahnaf/](https://www.linkedin.com/in/siamahnaf/)\n- Github - [https://github.com/siamahnaf](https://github.com/siamahnaf)","funding_links":["https://www.buymeacoffee.com/siamahnaf"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Fupload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsiamahnaf%2Fupload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsiamahnaf%2Fupload/lists"}