{"id":13805155,"url":"https://github.com/corpix/material-ui-upload","last_synced_at":"2025-05-13T18:33:16.127Z","repository":{"id":57292204,"uuid":"76281521","full_name":"corpix/material-ui-upload","owner":"corpix","description":"Upload controls made in material-ui using FileAPI","archived":true,"fork":false,"pushed_at":"2020-03-15T10:47:03.000Z","size":1068,"stargazers_count":36,"open_issues_count":10,"forks_count":24,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-18T20:13:41.197Z","etag":null,"topics":["material-ui","react","upload-file","upload-pictures"],"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/corpix.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}},"created_at":"2016-12-12T17:56:12.000Z","updated_at":"2023-09-07T21:05:10.000Z","dependencies_parsed_at":"2022-08-27T16:50:49.046Z","dependency_job_id":null,"html_url":"https://github.com/corpix/material-ui-upload","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corpix%2Fmaterial-ui-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corpix%2Fmaterial-ui-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corpix%2Fmaterial-ui-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/corpix%2Fmaterial-ui-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/corpix","download_url":"https://codeload.github.com/corpix/material-ui-upload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254003503,"owners_count":21997897,"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":["material-ui","react","upload-file","upload-pictures"],"created_at":"2024-08-04T01:00:58.056Z","updated_at":"2025-05-13T18:33:15.491Z","avatar_url":"https://github.com/corpix.png","language":"JavaScript","funding_links":[],"categories":["Components"],"sub_categories":[],"readme":"material-ui-upload\n----------------------\n\n[![Build Status](https://travis-ci.org/corpix/material-ui-upload.svg?branch=master)](https://travis-ci.org/corpix/material-ui-upload)\n\nUpload controls made in material-ui using [FileAPI][file-api]\n\n# Components\n\n## Upload\n\nUpload button, based on [FlatButton][flat-button].\n\n![Upload button](screenshot-upload.png)\n\n## Upload Preview\n\nUpload with preview for images, based on [Card][card].\n\n\u003e Empty\n\n![Upload preview](screenshot-upload-preview-empty.png)\n\n\u003e With pictures\n\n![Upload preview](screenshot-upload-preview-with-pictures.png)\n\n# Requirements\n\n- Your project should be configured to use CSS modules\n\n# Installation\n\n``` shell\nyarn add material-ui-upload\n```\n\nOr with npm\n\n```shell\nnpm i --save material-ui-upload\n```\n\n# Usage example\n\n\u003e You could see live examples providen with storybook, just `make server` in the root of the repository.\n\n## Upload\n\n``` jsx\nimport React, {Component} from 'react';\nimport Upload from 'material-ui-upload/Upload';\n\nclass MyComponent extends Component {\n    onFileLoad = (e, file) =\u003e console.log(e.target.result, file.name);\n\n    render() {\n        return (\n            \u003cUpload label=\"Add\" onFileLoad={this.onFileLoad}/\u003e\n        );\n    }\n}\n\n```\n\n## UploadPreview\n\n``` jsx\nimport React, {Component} from 'react';\nimport UploadPreview from 'material-ui-upload/UploadPreview';\n\nclass MyComponent extends Component {\n    constructor() {\n        super();\n        this.state = {\n            pictures: {}\n        };\n    }\n\n    onChange = (pictures) =\u003e this.setState({pictures});\n\n    render() {\n        return (\n            \u003cUploadPreview\n              title=\"Picture\"\n              label=\"Add\"\n              initialItems={this.state.pictures}\n              onChange={this.onChange}\n              /\u003e\n        );\n    }\n}\n```\n\n# Properties\n\n## Upload\n\n[FlatButton][flat-button] props can be used on this component.\n\n\u003e For FlatButton props please see [material-ui docs][flat-button].\n\n| Name | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| fileTypeRegex | `RegExp` | `/.*/` | Regexp that matches allowed file names. |\n| onFileLoad | `function` | `(e, file) =\u003e undefined` | [FileReader#onload][onload] event handler which receives a `FileReader` event and original file object. |\n| buttonControl | `function` | `material-ui/FlatButton` | Control constructor to use as upload button. |\n\n## UploadPreview\n\nUpload component props can be used on this component.\n\n| Name | Type | Default | Description |\n| ---- | ---- | ------- | ----------- |\n| title | `string` | `''` | Title of the [Card][card]. |\n| onFileLoad | `function` | `(e, file) =\u003e undefined` | [FileReader#onload][onload] event handler which receives a `FileReader` event and original file object. |\n| label | `string` | `Upload` | Upload button label. |\n| onChange | `function` | `(items) =\u003e undefined` | When state of the component changes(file added, removed, removed all) this function will be fired with a hash of items as argument(each item key is a sha1 of the base64 dataURI __this may change to 'hash of a file content' in the future__). |\n| initialItems | `object` | `{}` | Predefined items. |\n\n# License\n\n[MIT](/LICENSE)\n\n\n[card]: http://www.material-ui.com/#/components/card\n[flat-button]: http://www.material-ui.com/#/components/flat-button\n[file-api]: https://developer.mozilla.org/en-US/docs/Web/API/File\n[onload]: https://developer.mozilla.org/ru/docs/Web/API/FileReader/onload\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorpix%2Fmaterial-ui-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcorpix%2Fmaterial-ui-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcorpix%2Fmaterial-ui-upload/lists"}