feat: first pass of uploads with react-dropzone

package.json

@@ -48,6 +48,7 @@
     "is-hotkey": "0.2.0",
     "nanoid": "3.1.20",
     "pluralize": "8.0.0",
+    "react-dropzone": "11.3.1",
     "react-file-icon": "1.0.0",
     "react-hook-form": "6.15.1",
     "react-redux": "7.2.2",
@@ -60,7 +61,6 @@
     "rxjs": "6.6.3",
     "styled-components": "5.2.1",
     "theme-ui": "0.3.5",
-    "typesafe-actions": "5.1.0",
     "yup": "0.32.8"
   },
   "devDependencies": {

src/components/Browser/index.tsx

@@ -1,6 +1,6 @@
 import {MutationEvent} from '@sanity/client'
 import {Card, Flex} from '@sanity/ui'
-import {ImageAsset, Tag} from '@types'
+import {Asset, Tag} from '@types'
 import groq from 'groq'
 import client from 'part:@sanity/base/client'
 import React, {FC, useEffect} from 'react'
@@ -17,6 +17,7 @@ import Items from '../Items'
 import Notifications from '../Notifications'
 import PickedBar from '../PickedBar'
 import TagsPanel from '../TagsPanel'
+import UploadDropzone from '../UploadDropzone'
 
 type Props = {
   onClose?: () => void
@@ -32,12 +33,16 @@ const Browser: FC<Props> = (props: Props) => {
   const handleAssetUpdate = (update: MutationEvent) => {
     const {documentId, result, transition} = update
 
+    if (transition === 'appear') {
+      dispatch(assetsActions.listenerCreateQueue({asset: result as Asset}))
+    }
+
     if (transition === 'disappear') {
       dispatch(assetsActions.listenerDeleteQueue({assetId: documentId}))
     }
 
     if (transition === 'update') {
-      dispatch(assetsActions.listenerUpdateQueue({asset: result as ImageAsset}))
+      dispatch(assetsActions.listenerUpdateQueue({asset: result as Asset}))
     }
   }
 
@@ -84,7 +89,7 @@ const Browser: FC<Props> = (props: Props) => {
   }, [])
 
   return (
-    <>
+    <UploadDropzone>
       <Dialogs />
       <Notifications />
 
@@ -120,7 +125,7 @@ const Browser: FC<Props> = (props: Props) => {
           <DebugControls />
         </Flex>
       </Card>
-    </>
+    </UploadDropzone>
   )
 }
 

src/components/Card/index.tsx → src/components/CardAsset/index.tsx

@@ -1,12 +1,13 @@
 import {hues} from '@sanity/color'
-import {CheckmarkCircleIcon, EditIcon, WarningOutlineIcon} from '@sanity/icons'
+import {CheckmarkCircleIcon, EditIcon, WarningFilledIcon} from '@sanity/icons'
 import {Box, Checkbox, Container, Flex, Spinner, Text, Tooltip} from '@sanity/ui'
 import {AssetItem} from '@types'
 import React, {CSSProperties, MouseEvent, RefObject, memo} from 'react'
 import {useDispatch} from 'react-redux'
 import styled, {css} from 'styled-components'
 
-import FileIcon from '../../components/FileIcon'
+import FileIcon from '../FileIcon'
+import {PANEL_HEIGHT} from '../../constants'
 import {useAssetSourceActions} from '../../contexts/AssetSourceDispatchContext'
 import useKeyPress from '../../hooks/useKeyPress'
 import useTypedSelector from '../../hooks/useTypedSelector'
@@ -47,8 +48,9 @@ const CardContainer = styled(Flex)<{picked?: boolean; updating?: boolean}>`
     `}
 `
 
-const ContextActionContainer = styled(Box)`
+const ContextActionContainer = styled(Flex)`
   cursor: ${props => (props.selected ? 'default' : 'pointer')};
+  height: ${PANEL_HEIGHT}px;
   transition: all 300ms;
 
   @media (hover: hover) and (pointer: fine) {
@@ -58,13 +60,13 @@ const ContextActionContainer = styled(Box)`
   }
 `
 
-const StyledWarningOutlineIcon = styled(WarningOutlineIcon)(({theme}) => {
+const StyledWarningOutlineIcon = styled(WarningFilledIcon)(({theme}) => {
   return {
     color: theme.sanity.color.spot.red
   }
 })
 
-const Card = (props: Props) => {
+const CardAsset = (props: Props) => {
   const {item, selected, style} = props
 
   // Refs
@@ -130,7 +132,7 @@ const Card = (props: Props) => {
 
   return (
     <>
-      <CardContainer direction="column" picked={picked} style={{...style}} updating={item.updating}>
+      <CardContainer direction="column" picked={picked} style={style} updating={item.updating}>
         {/* Image */}
         <Box
           flex={1}
@@ -146,6 +148,7 @@ const Card = (props: Props) => {
             {/* Image */}
             {isImageAsset(asset) && (
               <Image
+                draggable={false}
                 showCheckerboard={!isOpaque}
                 src={imageDprUrl(asset, {height: 250, width: 250})}
                 style={{
@@ -196,39 +199,35 @@ const Card = (props: Props) => {
 
         {/* Footer */}
         <ContextActionContainer
+          align="center"
           onClick={handleContextActionClick}
           paddingX={1}
-          paddingY={2}
-          style={{
-            opacity: opacityContainer
-          }}
+          style={{opacity: opacityContainer}}
         >
-          <Flex align="center">
-            {onSelect ? (
-              <EditIcon
-                style={{
-                  flexShrink: 0,
-                  opacity: 0.5
-                }}
-              />
-            ) : (
-              <Checkbox
-                checked={picked}
-                readOnly
-                style={{
-                  flexShrink: 0,
-                  pointerEvents: 'none',
-                  transform: 'scale(0.8)'
-                }}
-              />
-            )}
+          {onSelect ? (
+            <EditIcon
+              style={{
+                flexShrink: 0,
+                opacity: 0.5
+              }}
+            />
+          ) : (
+            <Checkbox
+              checked={picked}
+              readOnly
+              style={{
+                flexShrink: 0,
+                pointerEvents: 'none',
+                transform: 'scale(0.8)'
+              }}
+            />
+          )}
 
-            <Box marginLeft={2}>
-              <Text muted size={0} textOverflow="ellipsis">
-                {asset.originalFilename}
-              </Text>
-            </Box>
-          </Flex>
+          <Box marginLeft={2}>
+            <Text muted size={0} textOverflow="ellipsis">
+              {asset.originalFilename}
+            </Text>
+          </Box>
         </ContextActionContainer>
 
         {/* TODO: DRY */}
@@ -245,7 +244,7 @@ const Card = (props: Props) => {
             <Tooltip
               content={
                 <Container padding={2} width={0}>
-                  <Text size={1}>{error.message}</Text>
+                  <Text size={1}>{error}</Text>
                 </Container>
               }
               placement="left"
@@ -262,4 +261,4 @@ const Card = (props: Props) => {
   )
 }
 
-export default memo(Card)
+export default memo(CardAsset)

src/components/CardUpload/index.tsx

@@ -0,0 +1,76 @@
+import {hues} from '@sanity/color'
+import {Box, Flex, Text} from '@sanity/ui'
+import filesize from 'filesize'
+import React, {CSSProperties, FC} from 'react'
+import {PANEL_HEIGHT} from '../../constants'
+
+import {UploadItem} from '../../types'
+import Image from '../Image'
+
+type Props = {
+  item: UploadItem
+  style?: CSSProperties
+}
+
+const CardUpload: FC<Props> = (props: Props) => {
+  const {item, style} = props
+
+  const fileSize = filesize(item.size, {base: 10, round: 0})
+
+  let status
+  /*
+  if (item.status === 'complete') {
+    status = 'Complete'
+  }
+  */
+  if (['complete', 'uploading'].includes(item.status)) {
+    status = `${Math.round(item?.percent || 0)}%`
+  }
+  if (item.status === 'queued') {
+    status = 'Queued'
+  }
+
+  return (
+    <Flex
+      direction="column"
+      style={{...style, background: hues.gray[950].hex, border: '1px solid transparent'}}
+    >
+      <Box flex={1} style={{position: 'relative'}}>
+        {item?.objectUrl && (
+          <Image
+            draggable={false}
+            src={item.objectUrl}
+            style={{
+              opacity: 0.4
+            }}
+          />
+        )}
+
+        <Flex
+          align="center"
+          justify="center"
+          style={{
+            height: '100%',
+            left: 0,
+            position: 'absolute',
+            top: 0,
+            width: '100%'
+          }}
+        >
+          <Text size={1} style={{opacity: item.status === 'queued' ? 0.5 : 1}}>
+            {status}
+          </Text>
+        </Flex>
+      </Box>
+
+      {/* Footer */}
+      <Flex align="center" paddingX={2} style={{height: `${PANEL_HEIGHT}px`}}>
+        <Text size={0} textOverflow="ellipsis">
+          Uploading {item.name} ({fileSize}){' '}
+        </Text>
+      </Flex>
+    </Flex>
+  )
+}
+
+export default CardUpload