fix: disable folder + package uploads

src/components/CardUpload/index.tsx

@@ -42,10 +42,7 @@ const CardUpload: FC<Props> = (props: Props) => {
     >
       {/* Progress bar */}
       <motion.div
-        animate={{
-          scaleX: percentLoaded * 0.01,
-          transformOrigin: 'left'
-        }}
+        animate={{scaleX: percentLoaded * 0.01}}
         initial={{
           scaleX: 0
         }}
@@ -54,6 +51,8 @@ const CardUpload: FC<Props> = (props: Props) => {
           bottom: 0,
           height: '1px',
           left: 0,
+          originX: 0,
+          originY: '50%',
           position: 'absolute',
           width: '100%'
         }}

src/components/UploadDropzone/index.tsx

@@ -6,6 +6,7 @@ import {useDispatch} from 'react-redux'
 import styled from 'styled-components'
 
 import {DropzoneDispatchProvider} from '../../contexts/DropzoneDispatchContext'
+import {notificationsActions} from '../../modules/notifications'
 import {uploadsActions} from '../../modules/uploads'
 
 type Props = {
@@ -40,6 +41,25 @@ const DragActiveContainer = styled.div`
   z-index: 2;
 `
 
+// Iterate through all files and only return non-folders / packages.
+// We check for files by reading the first byte of the file
+async function filterFiles(fileList: FileList) {
+  const files = Array.from(fileList)
+
+  const filteredFiles: File[] = []
+
+  for (const file of files) {
+    try {
+      await file.slice(0, 1).arrayBuffer()
+      filteredFiles.push(file)
+    } catch (err) {
+      // do nothing: file is a package or folder
+    }
+  }
+
+  return filteredFiles
+}
+
 const UploadDropzone: FC<Props> = (props: Props) => {
   const {children} = props
 
@@ -51,7 +71,43 @@ const UploadDropzone: FC<Props> = (props: Props) => {
     acceptedFiles.forEach(file => dispatch(uploadsActions.uploadRequest({file})))
   }
 
+  // Use custom file selector to filter out folders + packages
+  // TODO: use correct type
+  const handleFileGetter = async (event: any) => {
+    let fileList: FileList | undefined = undefined
+
+    switch (event.type) {
+      case 'change':
+        fileList = event.target.files
+        break
+      case 'drop':
+        fileList = event.dataTransfer.files
+        break
+      default:
+        return []
+    }
+
+    let files: File[] = []
+
+    if (fileList) {
+      files = await filterFiles(fileList)
+    }
+
+    // Dispatch error if some files have been filtered out
+    if (fileList?.length !== files.length) {
+      dispatch(
+        notificationsActions.add({
+          status: 'error',
+          title: `Unable to upload some items (folders and packages aren't supported)`
+        })
+      )
+    }
+
+    return files
+  }
+
   const {getRootProps, getInputProps, isDragActive, open} = useDropzone({
+    getFilesFromEvent: handleFileGetter,
     noClick: true,
     onDrop: handleDrop
   })

src/modules/notifications/index.ts

@@ -12,7 +12,6 @@ import {uploadsActions} from '../uploads'
 type Notification = {
   asset?: ImageAsset
   status?: 'error' | 'warning' | 'success' | 'info'
-  subtitle?: string
   title?: string
 }
 
@@ -29,11 +28,10 @@ const notificationsSlice = createSlice({
   initialState,
   reducers: {
     add(state, action: PayloadAction<Notification>) {
-      const {asset, status, subtitle, title} = action.payload
+      const {asset, status, title} = action.payload
       state.items.push({
         asset,
         status,
-        subtitle,
         title
       })
     }
@@ -176,4 +174,6 @@ export const notificationsTagUpdateCompleteEpic: MyEpic = action$ =>
     mergeMap(() => of(notificationsSlice.actions.add({status: 'info', title: `Tag updated`})))
   )
 
+export const notificationsActions = notificationsSlice.actions
+
 export default notificationsSlice.reducer

src/modules/uploads/index.ts

@@ -51,12 +51,14 @@ const uploadsSlice = createSlice({
           state.allIds.splice(deleteIndex, 1)
         }
 
-        const blobUrl = state.byIds[hash].objectUrl
-        if (blobUrl) {
-          window.URL.revokeObjectURL(blobUrl)
-        }
+        if (state.byIds[hash]) {
+          const blobUrl = state.byIds[hash].objectUrl
+          if (blobUrl) {
+            window.URL.revokeObjectURL(blobUrl)
+          }
 
-        delete state.byIds[hash]
+          delete state.byIds[hash]
+        }
       })
     },
     previewReady(state, action: PayloadAction<{hash: string; blobUrl: string}>) {
@@ -71,7 +73,9 @@ const uploadsSlice = createSlice({
     ) {
       const {asset} = action.payload
 
-      state.byIds[asset.sha1hash].status = 'complete'
+      if (state.byIds[asset.sha1hash]) {
+        state.byIds[asset.sha1hash].status = 'complete'
+      }
     },
     uploadError(state, action: PayloadAction<{error: HttpError; hash: string}>) {
       const {hash} = action.payload