{"id":22155295,"url":"https://github.com/yuvaleros/material-ui-dropzone","last_synced_at":"2025-04-14T23:22:10.264Z","repository":{"id":41081434,"uuid":"107120485","full_name":"Yuvaleros/material-ui-dropzone","owner":"Yuvaleros","description":"A Material-UI file upload dropzone ","archived":false,"fork":false,"pushed_at":"2024-03-13T13:14:33.000Z","size":6262,"stargazers_count":484,"open_issues_count":110,"forks_count":247,"subscribers_count":7,"default_branch":"master","last_synced_at":"2024-10-30T05:26:12.709Z","etag":null,"topics":["dropzone","file-upload","material-ui","modal","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/Yuvaleros.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":"docs/support.md","governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-10-16T11:50:16.000Z","updated_at":"2024-10-19T07:37:02.000Z","dependencies_parsed_at":"2024-04-09T22:50:50.486Z","dependency_job_id":"2d86d33a-0216-4e1c-86d5-c20688c8082a","html_url":"https://github.com/Yuvaleros/material-ui-dropzone","commit_stats":{"total_commits":351,"total_committers":54,"mean_commits":6.5,"dds":0.6182336182336182,"last_synced_commit":"8f0be37c5d77012d6ec6cf9d84f4a9e1cc638d77"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yuvaleros%2Fmaterial-ui-dropzone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yuvaleros%2Fmaterial-ui-dropzone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yuvaleros%2Fmaterial-ui-dropzone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Yuvaleros%2Fmaterial-ui-dropzone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Yuvaleros","download_url":"https://codeload.github.com/Yuvaleros/material-ui-dropzone/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248975734,"owners_count":21192279,"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":["dropzone","file-upload","material-ui","modal","react"],"created_at":"2024-12-02T02:16:04.440Z","updated_at":"2025-04-14T23:22:10.238Z","avatar_url":"https://github.com/Yuvaleros.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# material-ui-dropzone\n\n\u003e Material-UI-dropzone is a [React](https://github.com/facebook/react) component using [Material-UI](https://github.com/mui-org/material-ui) and is based on the excellent [react-dropzone](https://github.com/react-dropzone/react-dropzone) library.\n\n[![License](https://img.shields.io/github/license/yuvaleros/material-ui-dropzone)](https://github.com/Yuvaleros/material-ui-dropzone/blob/master/LICENSE) \u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg)](#contributors)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n[![Rebuild Dist Workflow Status](https://img.shields.io/github/workflow/status/yuvaleros/material-ui-dropzone/Rebuild%20Dist?label=build)](https://github.com/Yuvaleros/material-ui-dropzone/actions?query=workflow%3A%22Rebuild+Dist%22) [![Update Docs Workflow Status](https://img.shields.io/github/workflow/status/yuvaleros/material-ui-dropzone/Update%20Docs?label=docs)](https://github.com/Yuvaleros/material-ui-dropzone/actions?query=workflow%3A%22Update+Docs%22)\n\n[![npm package](https://img.shields.io/npm/v/material-ui-dropzone)](https://www.npmjs.com/package/material-ui-dropzone) [![npm downloads](https://img.shields.io/npm/dm/material-ui-dropzone.svg)](https://www.npmjs.com/package/material-ui-dropzone)\n\nThis components provide either a file-upload dropzone or a file-upload dropzone inside of a dialog.\n\nThe file-upload dropzone features some snazzy \"File Allowed/Not Allowed\" effects, previews and alerts.\n\n## Installation\n\n```shell\nnpm install --save material-ui-dropzone\n```\n\nor\n\n```shell\nyarn add material-ui-dropzone\n```\n\n## Support\n\n`material-ui-dropzone` complies to the following support matrix.\n\n| version | React            | Material-UI    |\n| ------- | ---------------- | -------------- |\n| `3.x`   | `16.8+`          | `4.x`          |\n| `2.x`   | `15.x` or `16.x` | `3.x` or `4.x` |\n\n## Screenshots\n\nThis is the Dialog component:\n\n![Dialog](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic.jpg)\n![Dialog with Previews](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic5.JPG)\n\nWhen you drag a file onto the dropzone, you get a neat effect:\n\n![Drag Overlay](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic2.JPG)\n\nAnd if you drag in a wrong type of file, you'll get yelled at:\n\n![Drag Error Overlay](https://raw.githubusercontent.com/Yuvaleros/material-ui-dropzone/master/pics/demo_pic4.JPG)\n\n**N.B. This has some limitations (see [here](https://github.com/react-dropzone/react-dropzone/tree/master/examples/accept#browser-limitations) for more details).**\n\n## Documentation and Examples\n\nSee [https://yuvaleros.github.io/material-ui-dropzone](https://yuvaleros.github.io/material-ui-dropzone) for Documentation and Examples.\n\n## Components\n\n### DropzoneArea\n\nThis components creates the dropzone, previews and snackbar notifications without a dialog\n\n```jsx static\nimport React, {Component} from 'react'\nimport {DropzoneArea} from 'material-ui-dropzone'\n\nclass DropzoneAreaExample extends Component{\n  constructor(props){\n    super(props);\n    this.state = {\n      files: []\n    };\n  }\n  handleChange(files){\n    this.setState({\n      files: files\n    });\n  }\n  render(){\n    return (\n      \u003cDropzoneArea\n        onChange={this.handleChange.bind(this)}\n        /\u003e\n    )\n  }\n}\n\nexport default DropzoneAreaExample;\n```\n\n### DropzoneDialog\n\nThis component provides the DropzoneArea inside of a MaterialUI Dialog.\n\n```jsx static\nimport React, { Component } from 'react'\nimport {DropzoneDialog} from 'material-ui-dropzone'\nimport Button from '@mui/material/Button';\n\nexport default class DropzoneDialogExample extends Component {\n    constructor(props) {\n        super(props);\n        this.state = {\n            open: false,\n            files: []\n        };\n    }\n\n    handleClose() {\n        this.setState({\n            open: false\n        });\n    }\n\n    handleSave(files) {\n        //Saving files to state for further use and closing Modal.\n        this.setState({\n            files: files,\n            open: false\n        });\n    }\n\n    handleOpen() {\n        this.setState({\n            open: true,\n        });\n    }\n\n    render() {\n        return (\n            \u003cdiv\u003e\n                \u003cButton onClick={this.handleOpen.bind(this)}\u003e\n                  Add Image\n                \u003c/Button\u003e\n                \u003cDropzoneDialog\n                    open={this.state.open}\n                    onSave={this.handleSave.bind(this)}\n                    acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']}\n                    showPreviews={true}\n                    maxFileSize={5000000}\n                    onClose={this.handleClose.bind(this)}\n                /\u003e\n            \u003c/div\u003e\n        );\n    }\n}\n```\n\n## License\n\nMIT\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://github.com/Yuvaleros\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/3898166?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYuvaleros\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-Yuvaleros\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=Yuvaleros\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-Yuvaleros\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=Yuvaleros\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#question-Yuvaleros\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/pulls?q=is%3Apr+reviewed-by%3AYuvaleros\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#maintenance-Yuvaleros\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/panz3r\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/1754457?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMattia Panzeri\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-panz3r\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=panz3r\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-panz3r\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=panz3r\" title=\"Documentation\"\u003e📖\u003c/a\u003e \u003ca href=\"#example-panz3r\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"#infra-panz3r\" title=\"Infrastructure (Hosting, Build-Tools, etc)\"\u003e🚇\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/issues?q=author%3Apanz3r\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#question-panz3r\" title=\"Answering Questions\"\u003e💬\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/pulls?q=is%3Apr+reviewed-by%3Apanz3r\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e \u003ca href=\"#maintenance-panz3r\" title=\"Maintenance\"\u003e🚧\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/max-carroll\"\u003e\u003cimg src=\"https://avatars2.githubusercontent.com/u/13512675?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMax Carroll\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-max-carroll\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=max-carroll\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#design-max-carroll\" title=\"Design\"\u003e🎨\u003c/a\u003e \u003ca href=\"#example-max-carroll\" title=\"Examples\"\u003e💡\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/pulls?q=is%3Apr+reviewed-by%3Amax-carroll\" title=\"Reviewed Pull Requests\"\u003e👀\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/mattcorner\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/27866636?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatthew Corner\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/issues?q=author%3Amattcorner\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"#ideas-mattcorner\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=mattcorner\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/loongyh\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/20846761?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eBarry Loong\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-loongyh\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=loongyh\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/blouin\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/20212446?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eJF Blouin\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"#ideas-blouin\" title=\"Ideas, Planning, \u0026 Feedback\"\u003e🤔\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=blouin\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"http://stackoverflow.com/users/2275818/anthony-raymond\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/7503585?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eAnthony Raymond\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=anthonyraymond\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#example-anthonyraymond\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/isaacbuckman\"\u003e\u003cimg src=\"https://avatars1.githubusercontent.com/u/34870239?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eisaacbuckman\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/issues?q=author%3Aisaacbuckman\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=isaacbuckman\" title=\"Code\"\u003e💻\u003c/a\u003e \u003ca href=\"#example-isaacbuckman\" title=\"Examples\"\u003e💡\u003c/a\u003e\u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\u003ca href=\"https://github.com/MatthijsMud\"\u003e\u003cimg src=\"https://avatars3.githubusercontent.com/u/11519728?v=4\" width=\"80px;\" alt=\"\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eMatthijsMud\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/issues?q=author%3AMatthijsMud\" title=\"Bug reports\"\u003e🐛\u003c/a\u003e \u003ca href=\"https://github.com/Yuvaleros/material-ui-dropzone/commits?author=MatthijsMud\" 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\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%2Fyuvaleros%2Fmaterial-ui-dropzone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuvaleros%2Fmaterial-ui-dropzone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuvaleros%2Fmaterial-ui-dropzone/lists"}