Dashboard: Add image and archive icons (#2027)

* Add image and archive icons

* Refactor archiveTypes

packages/@uppy/dashboard/src/components/icons.js

@@ -66,6 +66,18 @@ function checkIcon () {
   )
 }
 
+function iconImage () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+      <g fill="#686DE0" fill-rule="evenodd">
+        <path d="M5 7v10h15V7H5zm0-1h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1z" fill-rule="nonzero" />
+        <path d="M6.35 17.172l4.994-5.026a.5.5 0 0 1 .707 0l2.16 2.16 3.505-3.505a.5.5 0 0 1 .707 0l2.336 2.31-.707.72-1.983-1.97-3.505 3.505a.5.5 0 0 1-.707 0l-2.16-2.159-3.938 3.939-1.409.026z" fill-rule="nonzero" />
+        <circle cx="7.5" cy="9.5" r="1.5" />
+      </g>
+    </svg>
+  )
+}
+
 function iconAudio () {
   return (
     <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
@@ -90,6 +102,14 @@ function iconPDF () {
   )
 }
 
+function iconArchive () {
+  return (
+    <svg aria-hidden="true" focusable="false" width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+      <path d="M10.45 2.05h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V2.55a.5.5 0 0 1 .5-.5zm2.05 1.024h1.05a.5.5 0 0 1 .5.5V3.6a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5v-.001zM10.45 0h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5V.5a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 3.074h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-2.05 1.024h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm-2.05 1.025h1.05a.5.5 0 0 1 .5.5v.025a.5.5 0 0 1-.5.5h-1.05a.5.5 0 0 1-.5-.5v-.025a.5.5 0 0 1 .5-.5zm2.05 1.025h1.05a.5.5 0 0 1 .5.5v.024a.5.5 0 0 1-.5.5H12.5a.5.5 0 0 1-.5-.5v-.024a.5.5 0 0 1 .5-.5zm-1.656 3.074l-.82 5.946c.52.302 1.174.458 1.976.458.803 0 1.455-.156 1.975-.458l-.82-5.946h-2.311zm0-1.025h2.312c.512 0 .946.378 1.015.885l.82 5.946c.056.412-.142.817-.501 1.026-.686.398-1.515.597-2.49.597-.974 0-1.804-.199-2.49-.597a1.025 1.025 0 0 1-.5-1.026l.819-5.946c.07-.507.503-.885 1.015-.885zm.545 6.6a.5.5 0 0 1-.397-.561l.143-.999a.5.5 0 0 1 .495-.429h.74a.5.5 0 0 1 .495.43l.143.998a.5.5 0 0 1-.397.561c-.404.08-.819.08-1.222 0z" fill="#00C469" fill-rule="nonzero" />
+    </svg>
+  )
+}
+
 function iconFile () {
   return (
     <svg aria-hidden="true" focusable="false" class="UppyIcon" width="25" height="25" viewBox="0 0 25 25">
@@ -150,9 +170,11 @@ module.exports = {
   iconRetry,
   localIcon,
   checkIcon,
+  iconImage,
   iconAudio,
   iconVideo,
   iconPDF,
+  iconArchive,
   iconFile,
   iconText,
   iconCopyLink,

packages/@uppy/dashboard/src/utils/getFileTypeIcon.js

@@ -1,4 +1,4 @@
-const { iconFile, iconText, iconAudio, iconVideo, iconPDF } = require('../components/icons')
+const { iconFile, iconText, iconImage, iconAudio, iconVideo, iconPDF, iconArchive } = require('../components/icons')
 
 module.exports = function getIconByMime (fileType) {
   const defaultChoice = {
@@ -11,6 +11,7 @@ module.exports = function getIconByMime (fileType) {
   const fileTypeGeneral = fileType.split('/')[0]
   const fileTypeSpecific = fileType.split('/')[1]
 
+  // Text
   if (fileTypeGeneral === 'text') {
     return {
       color: '#5a5e69',
@@ -18,6 +19,15 @@ module.exports = function getIconByMime (fileType) {
     }
   }
 
+  // Image
+  if (fileTypeGeneral === 'image') {
+    return {
+      color: '#686de0',
+      icon: iconImage()
+    }
+  }
+
+  // Audio
   if (fileTypeGeneral === 'audio') {
     return {
       color: '#068dbb',
@@ -25,6 +35,7 @@ module.exports = function getIconByMime (fileType) {
     }
   }
 
+  // Video
   if (fileTypeGeneral === 'video') {
     return {
       color: '#19af67',
@@ -32,6 +43,7 @@ module.exports = function getIconByMime (fileType) {
     }
   }
 
+  // PDF
   if (fileTypeGeneral === 'application' && fileTypeSpecific === 'pdf') {
     return {
       color: '#e25149',
@@ -39,10 +51,12 @@ module.exports = function getIconByMime (fileType) {
     }
   }
 
-  if (fileTypeGeneral === 'image') {
+  // Archive
+  const archiveTypes = ['zip', 'x-7z-compressed', 'x-rar-compressed', 'x-gtar', 'x-apple-diskimage', 'x-diskcopy']
+  if (fileTypeGeneral === 'application' && archiveTypes.indexOf(fileTypeSpecific) !== -1) {
     return {
-      color: '#f2f2f2',
-      icon: ''
+      color: '#00C469',
+      icon: iconArchive()
     }
   }