{"id":23628274,"url":"https://github.com/rouftom/react-mui-fileuploader","last_synced_at":"2025-04-30T18:42:35.313Z","repository":{"id":43099214,"uuid":"412898512","full_name":"rouftom/react-mui-fileuploader","owner":"rouftom","description":"🗃️ React mui fileuploader is a react component based on @mui v5 that allows you to upload files with an awesome ui component","archived":false,"fork":false,"pushed_at":"2024-08-10T06:33:11.000Z","size":282,"stargazers_count":29,"open_issues_count":16,"forks_count":21,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-09T07:38:07.618Z","etag":null,"topics":["filepicker","javascript","mui","reactjs"],"latest_commit_sha":null,"homepage":"","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/rouftom.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-02T19:55:29.000Z","updated_at":"2024-08-20T20:23:16.000Z","dependencies_parsed_at":"2025-01-18T11:11:22.014Z","dependency_job_id":"726e6c4b-1451-4e94-9567-c57dd0a482aa","html_url":"https://github.com/rouftom/react-mui-fileuploader","commit_stats":{"total_commits":26,"total_committers":4,"mean_commits":6.5,"dds":0.2692307692307693,"last_synced_commit":"738da257dc632836a52dd03f87cf348e8114ddbd"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rouftom%2Freact-mui-fileuploader","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rouftom%2Freact-mui-fileuploader/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rouftom%2Freact-mui-fileuploader/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rouftom%2Freact-mui-fileuploader/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rouftom","download_url":"https://codeload.github.com/rouftom/react-mui-fileuploader/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251764489,"owners_count":21640070,"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":["filepicker","javascript","mui","reactjs"],"created_at":"2024-12-28T00:32:32.498Z","updated_at":"2025-04-30T18:42:35.276Z","avatar_url":"https://github.com/rouftom.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/Lnp9rkM"],"categories":[],"sub_categories":[],"readme":"\u003cp style=\"text-align: center;\"\u003e\u003ca href=\"\" target=\"_blank\"\u003e\u003cimg alt=\"\" style=\"text-align: center;\" src=\"public/preview.png\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch1 style=\"text-align: center;\"\u003e🗃️ React Material Fileuploader\u003c/h1\u003e\n\u003cp style=\"text-align: center;\"\u003edeveloped with \u003ca target=\"_blank\" href=\"https://mui.com\"\u003e@mui v5\u003c/a\u003e \u003c/p\u003e\n\n\u003cp style=\"text-align: center;\"\u003e\n  \u003cimg alt=\"MIT license\" src=\"https://img.shields.io/badge/license-MIT-blue.svg\"\u003e\n  \u003cimg alt=\"GitHub release (latest by date)\" src=\"https://img.shields.io/github/v/release/rouftom/react-mui-fileuploader\"\u003e\n  \u003cimg alt=\"GitHub code size in bytes\" src=\"https://img.shields.io/github/languages/code-size/rouftom/react-mui-fileuploader\"\u003e\n  \u003cimg alt=\"Snyk Vulnerabilities for GitHub Repo\" src=\"https://img.shields.io/snyk/vulnerabilities/github/rouftom/react-mui-fileuploader\"\u003e\n\u003c/p\u003e\n\n---\n\nReact mui fileuploader is a React component based on @mui v5 that allows you to upload files with an awesome ui component.\n\n## [DEMO](https://eb6ie7.csb.app/)\n\n## 🚀 Installation\n\n```nodejs\n  npm install react-mui-fileuploader\n```\n\n## 💻 Usage\n\n```javascript \nconst handleFileUploadError = (error) =\u003e {\n  // Do something...\n}\n\nconst handleFilesChange = (files) =\u003e {\n  // Do something...\n  setUploadedFiles([...files]);\n}\n\nreturn (\n  \u003cFileUpload \n    getBase64={false}\n    multiFile={true}\n    disabled={false}\n    title=\"My awesome file uploader\"\n    header=\"[Drag to drop]\"\n    leftLabel=\"or\"\n    rightLabel=\"to select files\"\n    buttonLabel=\"click here\"\n    buttonRemoveLabel=\"Remove all\"\n    maxFileSize={10}\n    maxUploadFiles={0}\n    maxFilesContainerHeight={357}\n    acceptedType={'image/*'}\n    errorSizeMessage={'fill it or remove it to use the default error message'}\n    allowedExtensions={['jpg', 'jpeg']}\n    onFilesChange={handleFilesChange}\n    onError={handleFileUploadError}\n    imageSrc={'path/to/custom/image'}\n    BannerProps={{ elevation: 0, variant: \"outlined\" }}\n    showPlaceholderImage={true}\n    PlaceholderGridProps={{ md: 4 }}\n    LabelsGridProps={{ md: 8 }}\n    onContextReady={context =\u003e {\n      // access to component context here\n    }}\n    ContainerProps={{\n      elevation: 0,\n      variant: \"outlined\",\n      sx: { p: 1 }\n    }}\n    PlaceholderImageDimension={{\n      xs: { width: 128, height: 128 },\n      sm: { width: 128, height: 128 },\n      md: { width: 164, height: 164 },\n      lg: { width: 256, height: 256 }\n    }}\n  /\u003e\n)\n```\n\n## 🎨 Possible application\n\n```javascript\nimport React, { useState } from \"react\"\nimport { createRoot } from \"react-dom/client\"\nimport FileUpload from \"react-mui-fileuploader\"\n\nfunction MuiFileUploader() {\n  const [filesToUpload, setFilesToUpload] = useState([])\n\n  const handleFilesChange = (files) =\u003e {\n    // Update chosen files\n    setFilesToUpload([ ...files ])\n  };\n\n  const uploadFiles = () =\u003e {\n    // Create a form and post it to server\n    let formData = new FormData()\n    filesToUpload.forEach((file) =\u003e formData.append(\"files\", file))\n\n    fetch(\"/file/upload\", {\n      method: \"POST\",\n      body: formData\n    })\n  }\n\n  return (\n    \u003c\u003e\n      \u003cFileUpload\n        multiFile={true}\n        onFilesChange={handleFilesChange}\n        onContextReady={(context) =\u003e {}}\n      /\u003e\n      \u003cbutton onClick={uploadFiles}\u003eUpload\u003c/button\u003e\n    \u003c/\u003e\n  )\n}\n\nconst root = createRoot(document.getElementById(\"root\"))\nroot.render(\u003cMuiFileUploader /\u003e)\n```\n\n[![Edit react-mui-fileuploader example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/thirsty-visvesvaraya-r9u6ho?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n## Data structure\n\n| Name \t|  Type \t|   Required\t|  Details \t|  \n|------\t|---\t|---\t|---\t|\n|    getBase64  \t|  `boolean` \t|  `false` \t|  Get the original input files. Default value  `false` \t|\n|    multiFile  \t|  `boolean` \t|  `false` \t|  Multifile support. Default value  `true` \t|\n|    title  \t|  `string` \t|  `false` \t|  Component title \t|\n|    header  \t|  `string` \t|  `false` \t|  Banner component big title \t|\n|    showPlaceholderImage  \t|  `boolean` \t|  `false` \t|   Show or hide placeholder image | \n|    imageSrc  \t|  `string` \t|  `false` \t|   Banner image placeholder source path | \n|    imageSrcAlt  \t|  `string` \t|  `false` \t|   Banner image placeholder label\t|\n|    leftLabel  \t|  `string` \t|  `false` \t|  Banner left label  | \n|    rightLabel  \t|  `string` \t|  `false` \t|  Banner right label \t| \n|    buttonLabel  \t|  `string` \t|  `false` \t|  Banner button label \t| \n|    buttonRemoveLabel  \t|  `string` \t|  `false` \t|  Remove button label \t| \n|    disabled  \t|  `boolean` \t|  `false` \t|  This property enables or disables the component. Default value `false` \t|  \n|    maxFileSize  \t|  `number` \t|  `false` \t|  Maximum size (in mb) for files to add. Default value `0`. Value `0` means `unlimited size` \t| \n|    maxUploadFiles  \t|  `number` \t|  `false` \t|  Maximum files to add. Default to `0`. Value `0` means `unlimited size` \t| \n|    errorSizeMessage  \t|  `string` \t|  `false` \t|  Error returned when a file exceeds `maxFileSize` limit \t| \n|    acceptedType  \t|  `string` \t|  `false` \t|  Accepted file type. Default value `image/*` \t| \n|    allowedExtensions  \t|  `array` \t|  `false` \t|  Array of allowed extensions. For example, you can specify `['jpg', 'jpeg', 'png']`as allowedExtensions \t| \n|    filesContainerHeight  \t|  `number` \t|  `false` \t|  Container Height \t| \n|    maxFilesContainerHeight  \t|  `number` \t|  `false` \t|  Container max height. Default value `300` \t| \n|    onError  \t|  `function` \t|  `false` \t|  Returned error message when error occurs \t| \n|    onFilesChange  \t|  `function` \t|  `false` \t|  Event handler returned when files changes \t| \n|    onContextReady  \t|  `function` \t|  `false` \t|  Returns the component context api  \t| \n|    BannerProps  \t|  `object` \t|  `false` \t|  Banner props. Only MUI props are accepted \t| \n|    ContainerProps  \t|  `object` \t|  `false` \t|  Container props. Only MUI props are accepted \t| \n|    PlaceholderImageDimension  \t|  `object` \t|  `false` \t|  Dimensions (width and height) of the placeholder image. You can specify them in the properties `xs: {width: 64, height: 64}`, `sm: {width: 64, height: 64}`, `md: {width: 64, height: 64}`, `lg: {width: 64, height: 64}`, etc. |\n|    PlaceholderGridProps  \t|  `object` \t|  `false` \t|  Customize the placeholder Grid `xs`, `sm`, `md`, `lg`, `xl` sizes |\n|    LabelsGridProps  \t|  `object` \t|  `false` \t|  Customize the labels Grid `xs`, `sm`, `md`, `lg`, `xl` sizes |\n\n## 😁 Authors\n\n- Muller Roufaou ([rouftom](http://github.com/rouftom))\n\n\n## 🤔 FAQ\n\n* __Where can I find more documentation?__\n\n  This library is a marriage of [@mui](http://mui.com/getting-started/usage/) and a React setup created with [React](https://fr.reactjs.org/). Either one would be a great place to start!\n\n\n## 🙇‍♂️ Extra\n\n    Do you like this library ? Buy me a coffee or support me with a star on Github\n\n\u003ca href=\"https://www.buymeacoffee.com/Lnp9rkM\" target=\"_blank\"\u003e\u003cimg src=\"https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png\" alt=\"Buy Me A Coffee\" style=\"height: 40px !important;width: 180px !important;\" \u003e\u003c/a\u003e\n\n* Btc address: `bc1qettgagenn9nc8ks7ghntjfme96yvvkfhntk774`\n\n* Eth address: `0xB0413d8D0336E263e289A915c383e152155881E0`\n\n\n\n## License\n\n### react-mui-fileuploader\n\nMIT License\n\nCopyright (c) 2023 rouftom\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frouftom%2Freact-mui-fileuploader","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frouftom%2Freact-mui-fileuploader","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frouftom%2Freact-mui-fileuploader/lists"}