✨ Add 'getPreviewIcon' to DropzoneArea

src/components/DropzoneArea.js

@@ -1,15 +1,14 @@
 import Snackbar from '@material-ui/core/Snackbar';
 import Typography from '@material-ui/core/Typography';
 import {withStyles} from '@material-ui/core/styles';
+import AttachFileIcon from '@material-ui/icons/AttachFile';
 import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import {Fragment} from 'react';
 import Dropzone from 'react-dropzone';
-
-import {convertBytesToMbsOrKbs, createFileFromUrl, readFile} from '../helpers';
-
+import {convertBytesToMbsOrKbs, createFileFromUrl, isImage, readFile} from '../helpers';
 import PreviewList from './PreviewList';
 import SnackbarContentWrapper from './SnackbarContentWrapper';
 
@@ -60,6 +59,18 @@ const defaultSnackbarAnchorOrigin = {
     vertical: 'bottom',
 };
 
+const defaultGetPreviewIcon = (fileObject, classes) => {
+    if (isImage(fileObject.file)) {
+        return (<img
+            className={classes.smallPreviewImg}
+            role="presentation"
+            src={fileObject.data}
+        />);
+    }
+
+    return <AttachFileIcon className={classes.smallPreviewImg} />;
+};
+
 /**
  * This components creates a Material-UI Dropzone, with previews and snackbar notifications.
  */
@@ -254,6 +265,7 @@ class DropzoneArea extends React.PureComponent {
             dropzoneProps,
             dropzoneText,
             filesLimit,
+            getPreviewIcon,
             inputProps,
             maxFileSize,
             previewChipProps,
@@ -311,6 +323,7 @@ class DropzoneArea extends React.PureComponent {
                                 <PreviewList
                                     fileObjects={fileObjects}
                                     handleRemove={this.handleRemove}
+                                    getPreviewIcon={getPreviewIcon}
                                     showFileNames={showFileNames}
                                     useChipsForPreview={useChipsForPreview}
                                     previewChipProps={previewChipProps}
@@ -387,6 +400,7 @@ DropzoneArea.defaultProps = {
     initialFiles: [],
     getFileLimitExceedMessage: (filesLimit) => (`Maximum allowed number of files exceeded. Only ${filesLimit} allowed`),
     getFileAddedMessage: (fileName) => (`File ${fileName} successfully added.`),
+    getPreviewIcon: defaultGetPreviewIcon,
     getFileRemovedMessage: (fileName) => (`File ${fileName} removed.`),
     getDropRejectMessage: (rejectedFile, acceptedFiles, maxFileSize) => {
         let message = `File ${rejectedFile.name} was rejected. `;
@@ -507,6 +521,15 @@ DropzoneArea.propTypes = {
      * @param {number} maxFileSize The `maxFileSize` prop currently set for the component
      */
     getDropRejectMessage: PropTypes.func,
+    /**
+     * A function which determines which icon to display for a file preview.
+     *
+     * *Default*: If its an image then displays a preview the image, otherwise it will display an attachment icon
+     *
+     * @param {File} objectFile The file which the preview will belong to
+     * @param {Object} classes The classes for the file preview icon, in the default case we use the smallPreviewImg className.
+     */
+    getPreviewIcon: PropTypes.func,
     /**
      * Fired when the files inside dropzone change.
      *

src/components/DropzoneArea.md

@@ -21,3 +21,41 @@ import { DropzoneArea } from 'material-ui-dropzone';
   onChange={(files) => console.log('Files:', files)}
 />
 ```
+
+### Custom Preview Icon
+
+Demonstration of how to customize the preview icon for: 
+* PDF files
+* Video
+* Audio
+* Word Documents
+
+
+```jsx
+import react from 'react'
+import { AttachFile, AudioTrack, Description, PictureAsPdf, Theaters } from '@material-ui/icons';
+
+const handlePreviewIcon=(fileObject, classes) => {
+  const {type} = fileObject.file 
+  const iconProps = { className : classes.smallPreviewImg} 
+
+  if (type.startsWith("video/")) return <Theaters {...iconProps} />
+  if (type.startsWith("audio/")) return <AudioTrack {...iconProps} />
+
+  let component
+  switch (type) {
+    case "application/msword": 
+    case "application/vnd.openxmlformats-officedocument.wordprocessingml.document": 
+      return <Description {...iconProps} />      
+    case "application/pdf":
+      return <PictureAsPdf {...iconProps} />  
+    default:
+      return <AttachFile {...iconProps} />  
+  }
+
+}
+
+<DropzoneArea
+  getPreviewIcon={handlePreviewIcon}
+/>
+```

src/components/PreviewList.js

@@ -3,14 +3,11 @@ import Fab from '@material-ui/core/Fab';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import {withStyles} from '@material-ui/core/styles';
-import AttachFileIcon from '@material-ui/icons/AttachFile';
 import DeleteIcon from '@material-ui/icons/Delete';
 import clsx from 'clsx';
 import * as React from 'react';
 import PropTypes from 'prop-types';
 
-import {isImage} from '../helpers';
-
 const styles = {
     removeBtn: {
         transition: '.5s ease',
@@ -57,6 +54,7 @@ function PreviewList({
     previewGridClasses,
     previewGridProps,
     classes,
+    getPreviewIcon,
 }) {
     if (useChipsForPreview) {
         return (
@@ -76,10 +74,7 @@ function PreviewList({
     return (
         <Grid container={true} spacing={8} className={previewGridClasses.container} {...previewGridProps.container}>
             {fileObjects.map((fileObject, i) => {
-                const img = (isImage(fileObject.file) ?
-                    <img className={classes.smallPreviewImg} role="presentation" src={fileObject.data} /> :
-                    <AttachFileIcon className={classes.smallPreviewImg} />
-                );
+                const img = getPreviewIcon(fileObject, classes);
 
                 return (
                     <Grid
@@ -114,6 +109,7 @@ function PreviewList({
 PreviewList.propTypes = {
     classes: PropTypes.object.isRequired,
     fileObjects: PropTypes.arrayOf(PropTypes.object).isRequired,
+    getPreviewIcon: PropTypes.func.isRequired,
     handleRemove: PropTypes.func.isRequired,
     previewChipProps: PropTypes.object,
     previewGridClasses: PropTypes.object,