Gathering detailed insights and metrics for material-ui-dropzone
Gathering detailed insights and metrics for material-ui-dropzone
Gathering detailed insights and metrics for material-ui-dropzone
Gathering detailed insights and metrics for material-ui-dropzone
@dropzone-ui/react
The best and most complete React library for managing file uploads. Multilanguage support. Server side support. Material design styles. Code generator on webpage.
react-mui-dropzone
A Material-UI-v5 file-upload dropzone
mui-file-dropzone
A Material-UI file-upload dropzone. Written in TypeScript.
react-ui-dropzone
A Material-UI file-upload dropzone
npm install material-ui-dropzone
Typescript
Module System
Min. Node Version
Node Version
NPM Version
80.9
Supply Chain
90.4
Quality
74.6
Maintenance
100
Vulnerability
100
License
JavaScript (100%)
Total Downloads
10,790,383
Last Day
1,393
Last Week
28,789
Last Month
114,427
Last Year
1,844,646
MIT License
484 Stars
437 Commits
250 Forks
6 Watchers
21 Branches
42 Contributors
Updated on Dec 02, 2024
Minified
Minified + Gzipped
Latest Version
3.5.0
Package Id
material-ui-dropzone@3.5.0
Size
63.81 kB
NPM Version
6.13.7
Node Version
13.11.0
Published on
Sep 20, 2020
Cumulative downloads
Total Downloads
Last Day
-11%
1,393
Compared to previous day
Last Week
9%
28,789
Compared to previous week
Last Month
-20.2%
114,427
Compared to previous month
Last Year
-16.1%
1,844,646
Compared to previous year
3
5
30
Material-UI-dropzone is a React component using Material-UI and is based on the excellent react-dropzone library.
This components provide either a file-upload dropzone or a file-upload dropzone inside of a dialog.
The file-upload dropzone features some snazzy "File Allowed/Not Allowed" effects, previews and alerts.
1npm install --save material-ui-dropzone
or
1yarn add material-ui-dropzone
material-ui-dropzone
complies to the following support matrix.
version | React | Material-UI |
---|---|---|
3.x | 16.8+ | 4.x |
2.x | 15.x or 16.x | 3.x or 4.x |
This is the Dialog component:
When you drag a file onto the dropzone, you get a neat effect:
And if you drag in a wrong type of file, you'll get yelled at:
N.B. This has some limitations (see here for more details).
See https://yuvaleros.github.io/material-ui-dropzone for Documentation and Examples.
This components creates the dropzone, previews and snackbar notifications without a dialog
1import React, {Component} from 'react' 2import {DropzoneArea} from 'material-ui-dropzone' 3 4class DropzoneAreaExample extends Component{ 5 constructor(props){ 6 super(props); 7 this.state = { 8 files: [] 9 }; 10 } 11 handleChange(files){ 12 this.setState({ 13 files: files 14 }); 15 } 16 render(){ 17 return ( 18 <DropzoneArea 19 onChange={this.handleChange.bind(this)} 20 /> 21 ) 22 } 23} 24 25export default DropzoneAreaExample;
This component provides the DropzoneArea inside of a MaterialUI Dialog.
1import React, { Component } from 'react' 2import {DropzoneDialog} from 'material-ui-dropzone' 3import Button from '@material-ui/core/Button'; 4 5export default class DropzoneDialogExample extends Component { 6 constructor(props) { 7 super(props); 8 this.state = { 9 open: false, 10 files: [] 11 }; 12 } 13 14 handleClose() { 15 this.setState({ 16 open: false 17 }); 18 } 19 20 handleSave(files) { 21 //Saving files to state for further use and closing Modal. 22 this.setState({ 23 files: files, 24 open: false 25 }); 26 } 27 28 handleOpen() { 29 this.setState({ 30 open: true, 31 }); 32 } 33 34 render() { 35 return ( 36 <div> 37 <Button onClick={this.handleOpen.bind(this)}> 38 Add Image 39 </Button> 40 <DropzoneDialog 41 open={this.state.open} 42 onSave={this.handleSave.bind(this)} 43 acceptedFiles={['image/jpeg', 'image/png', 'image/bmp']} 44 showPreviews={true} 45 maxFileSize={5000000} 46 onClose={this.handleClose.bind(this)} 47 /> 48 </div> 49 ); 50 } 51}
MIT
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 4/20 approved changesets -- score normalized to 2
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
86 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-04-28
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More