Add file.type handling to Core and ProgressDrawer

src/core/Core.js

@@ -112,17 +112,26 @@ export default class Core {
 
       data.acquiredFiles.forEach((file) => {
         const fileName = file.name
+        const fileType = file.type.split('/')
+        const fileTypeGeneral = fileType[0]
+        const fileTypeSpecific = fileType[1]
         const fileID = Utils.generateFileID(fileName)
 
         updatedFiles[fileID] = {
           acquiredBy: data.plugin,
           id: fileID,
           name: fileName,
+          type: {
+            general: fileTypeGeneral,
+            specific: fileTypeSpecific
+          },
           data: file,
           progress: 0
         }
 
-        readImgPreview(updatedFiles[fileID])
+        if (fileTypeGeneral === 'image') {
+          readImgPreview(updatedFiles[fileID])
+        }
       })
 
       this.setState({selectedFiles: updatedFiles})

src/plugins/ProgressDrawer.js

@@ -28,11 +28,14 @@ export default class ProgressDrawer extends Plugin {
   render (state) {
     const selectedFiles = state.selectedFiles
     const uploadedFiles = state.uploadedFiles
+
     const selectedFileCount = Object.keys(selectedFiles).length
     const uploadedFileCount = Object.keys(uploadedFiles).length
+
     const isSomethingSelected = selectedFileCount > 0
     const isSomethingUploaded = uploadedFileCount > 0
     const isSomethingSelectedOrUploaded = isSomethingSelected || isSomethingUploaded
+
     const autoProceed = this.core.opts.autoProceed
 
     const drawerItem = (file) => {
@@ -49,7 +52,10 @@ export default class ProgressDrawer extends Plugin {
       return yo`<li class="UppyProgressDrawer-item"
                     title="${file.name}">
         <div class="UppyProgressDrawer-itemInfo">
-          <img class="UppyProgressDrawer-itemIcon" alt="${file.name}" src="${file.preview}">
+          ${file.type.general === 'image'
+            ? yo`<img class="UppyProgressDrawer-itemIcon" alt="${file.name}" src="${file.preview}">`
+            : yo`<span class="UppyProgressDrawer-itemType">${file.type.specific}</span>`
+          }
         </div>
         <div class="UppyProgressDrawer-itemInner">
           <span class="UppyProgressDrawer-itemProgress"

src/scss/_progressdrawer.scss

@@ -83,6 +83,16 @@
   object-fit: cover;
 }
 
+.UppyProgressDrawer-itemType {
+  display: block;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 40px;
+  text-transform: uppercase;
+  text-align: center;
+  color: $color-white;
+}
+
 .UppyProgressDrawer-itemInner {
   float: left;
   width: 88%;