Material-UI Dropzone
-
Pro Component
Dropzone JS is an open-source library that provides drag’n’ drop
file uploads with image previews. It is lightweight, doesn’t depend
on any other library (like jQuery) and is highly customisable.
Dropzone JS supports image previews and shows nice progress bars.
Keep reading our Material-ui Dropzone JS examples and learn how to
use this plugin.
Usage
Examples
Copy any of the code examples below and paste it in your project
after you integrated the needed resources.
Single file
import React from " react " ;
// plugin for drag-and-drop files
import Dropzone from " dropzone " ;
// @material-ui/core components
// @material-ui/lab components
// @material-ui/icons components
// core components
const Components = () => {
// single file drag-and-drop dropzone init
React . useEffect (() => {
if (
! document
. getElementById ( " dropzone-single " )
. classList . contains ( " dz-clickable " )
) {
Dropzone . autoDiscover = false ;
// this variable is to delete the previous image from the dropzone state
// it is just to make the HTML DOM a bit better, and keep it light
let currentSingleFile = undefined ;
// single dropzone file - accepts only images
let singleDropzone = new Dropzone (
document . getElementById ( " dropzone-single " ),
{
url : " / " ,
thumbnailWidth : null ,
thumbnailHeight : null ,
previewsContainer : document . getElementsByClassName (
" dz-preview-single "
)[ 0 ],
previewTemplate : document . getElementsByClassName (
" dz-preview-single "
)[ 0 ]. innerHTML ,
maxFiles : 1 ,
acceptedFiles : " image/* " ,
init : function () {
this . on ( " addedfile " , function ( file ) {
if ( currentSingleFile ) {
this . removeFile ( currentSingleFile );
}
currentSingleFile = file ;
});
},
}
);
document . getElementsByClassName ( " dz-preview-single " )[ 0 ]. innerHTML = "" ;
return function cleanup () {
singleDropzone . destroy ();
};
}
}, []);
return (
<>
< div className = " dropzone dropzone-single mb-3 " id = " dropzone-single " >
< div className = " fallback " >
< div className = " custom-file " >
< input
className = " custom-file-input "
id = " projectCoverUploads "
type = " file "
/>
< label className = " custom-file-label " htmlFor = " projectCoverUploads " >
Choose file
< /label >
< /div >
< /div >
< div className = " dz-preview dz-preview-single " >
< div className = " dz-preview-cover " >
< img alt = " ... " className = " dz-preview-img " data - dz - thumbnail = "" />
< /div >
< /div >
< /div >
< / >
);
};
export default Components ;
Multiple files
import React from " react " ;
// plugin for drag-and-drop files
import Dropzone from " dropzone " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Avatar from " @material-ui/core/Avatar " ;
import Box from " @material-ui/core/Box " ;
import Button from " @material-ui/core/Button " ;
import Grid from " @material-ui/core/Grid " ;
import List from " @material-ui/core/List " ;
import ListItem from " @material-ui/core/ListItem " ;
import Typography from " @material-ui/core/Typography " ;
// @material-ui/lab components
// @material-ui/icons components
import Delete from " @material-ui/icons/Delete " ;
// core components
import componentStyles from " assets/theme/views/admin/components.js " ;
import componentStylesButtons from " assets/theme/components/button.js " ;
const useStyles = makeStyles ( componentStyles );
const useStylesButtons = makeStyles ( componentStylesButtons );
const Components = () => {
const classes = {
... useStyles (),
... useStylesButtons (),
};
// multiple file drag-and-drop dropzone init
React . useEffect (() => {
if (
! document
. getElementById ( " dropzone-multiple " )
. classList . contains ( " dz-clickable " )
) {
Dropzone . autoDiscover = false ;
// this variable is to delete the previous image from the dropzone state
// it is just to make the HTML DOM a bit better, and keep it light
let currentMultipleFile = undefined ;
// multiple dropzone file - accepts any type of file
new Dropzone ( document . getElementById ( " dropzone-multiple " ), {
url : " https:// " ,
thumbnailWidth : null ,
thumbnailHeight : null ,
previewsContainer : document . getElementsByClassName (
" dz-preview-multiple "
)[ 0 ],
previewTemplate : document . getElementsByClassName (
" dz-preview-multiple "
)[ 0 ]. innerHTML ,
maxFiles : null ,
acceptedFiles : null ,
init : function () {
this . on ( " addedfile " , function ( file ) {
if ( currentMultipleFile ) {
}
currentMultipleFile = file ;
});
},
});
document . getElementsByClassName ( " dz-preview-multiple " )[ 0 ]. innerHTML = "" ;
}
}, []);
const dzAvatarClasses = {
root : classes . dropzoneAvatarRoot ,
img : classes . dropzoneAvatarImg ,
};
const dzAvatarImgProps = {
" data-dz-thumbnail " : true ,
};
const dzButtonClasses = {
root :
classes . buttonContainedError +
" " +
classes . buttonIconOnly ,
};
return (
<>
< div className = " dropzone dropzone-single mb-3 " id = " dropzone-single " >
< div className = " fallback " >
< div className = " custom-file " >
< input
className = " custom-file-input "
id = " projectCoverUploads "
type = " file "
/>
< label className = " custom-file-label " htmlFor = " projectCoverUploads " >
Choose file
< /label >
< /div >
< /div >
< div className = " dz-preview dz-preview-single " >
< div className = " dz-preview-cover " >
< img alt = " ... " className = " dz-preview-img " data - dz - thumbnail = "" />
< /div >
< /div >
< /div >
< div
id = " dropzone-multiple "
className = " dropzone dropzone-multiple "
data - toggle = " dropzone "
data - dropzone - multiple
data - dropzone - url = " http:// "
>
< div className = " fallback " >
< div className = " custom-file " >
< input
type = " file "
className = " custom-file-input "
id = " customFileUploadMultiple "
multiple
/>
< label
className = " custom-file-label "
htmlFor = " customFileUploadMultiple "
>
Choose file
< /label >
< /div >
< /div >
< List className = " dz-preview dz-preview-multiple " >
< ListItem >
< Grid container component = { Box } alignItems = " center " >
< Grid item xs = " auto " >
< Avatar
src = " https://argon-dashboard-pro-svelte.creative-tim.com/img/theme/img-1-1000x600.jpg "
alt = " ... "
classes = { dzAvatarClasses }
imgProps = { dzAvatarImgProps }
>< /Avatar >
< /Grid >
< Grid
item
component = { Box }
maxWidth = " 100% "
flexBasis = " 0 "
flexGrow = " 1 "
>
< Typography
variant = " h4 "
component = " h4 "
data - dz - name
>< /Typography >
< Box
component = " p "
marginBottom = " 0 "
fontWeight = " 300 "
lineHeight = " 1.7 "
fontSize = " 1rem "
marginTop = " 0 "
data - dz - size
>
...
< /Box >
< /Grid >
< Grid item xs = " auto " >
< Button
size = " small "
data - dz - remove
classes = { dzButtonClasses }
>
< Box component = { Delete } position = " relative " top = " -2px " />
< /Button >
< /Grid >
< /Grid >
< /ListItem >
< /List >
< /div >
< / >
);
};
export default Components ;
Props
If you want to see more examples and properties please check the
official
Dropzone Documentation .
You can also check the
Official Github Repository .