[C-878] Show invalid file errors on upload (#1877)

AudiusProject · Sep 8, 2022 · 9ac5410 · 9ac5410
1 parent 369660f
commit 9ac5410
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 50 deletions.
diff --git a/packages/web/src/components/edit-track/EditTrackModal.tsx b/packages/web/src/components/edit-track/EditTrackModal.tsx
@@ -129,9 +129,7 @@ const EditTrackModal = ({
   }
 
   const onAddStems = async (selectedStems: File[]) => {
-    const processed = (
-      await Promise.all(processFiles(selectedStems, false, () => {}))
-    )
+    const processed = (await Promise.all(processFiles(selectedStems, () => {})))
       .filter(removeNullable)
       .map((p) => ({
         ...p,

diff --git a/packages/web/src/components/image-selection/ImageSelectionPopup.js b/packages/web/src/components/image-selection/ImageSelectionPopup.js
@@ -8,7 +8,7 @@ import { useSelector } from 'react-redux'
 
 import { ReactComponent as IconSearch } from 'assets/img/iconSearch.svg'
 import TabSlider from 'components/data-entry/TabSlider'
-import Dropzone from 'components/upload/Dropzone'
+import { Dropzone } from 'components/upload/Dropzone'
 import InvalidFileType from 'components/upload/InvalidFileType'
 import { useSelectTierInfo } from 'hooks/wallet'
 import { MainContentContext } from 'pages/MainContentContext'
@@ -45,7 +45,7 @@ const DropzonePage = ({ error, onSelect }) => {
         className={styles.dropzone}
         iconClassName={styles.dropzoneIcon}
         allowMultiple={false}
-        onDrop={onDropzoneSelect}
+        onDropAccepted={onDropzoneSelect}
       />
       {error ? <InvalidFileType className={styles.invalidFileType} /> : null}
     </div>

diff --git a/packages/web/src/components/source-files-modal/SourceFilesModal.tsx b/packages/web/src/components/source-files-modal/SourceFilesModal.tsx
@@ -19,7 +19,7 @@ import cn from 'classnames'
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import Dropdown from 'components/navigation/Dropdown'
 import Switch from 'components/switch/Switch'
-import Dropzone from 'components/upload/Dropzone'
+import { Dropzone } from 'components/upload/Dropzone'
 
 import styles from './SourceFilesModal.module.css'
 
@@ -232,7 +232,7 @@ const SourceFilesView = ({
           [styles.dropzoneDisabled]: atCapacity
         })}
         textAboveIcon={messages.sourceFiles}
-        onDrop={onAdd}
+        onDropAccepted={onAdd}
         type='stem'
         subtitle={atCapacity ? messages.maxCapacity : undefined}
         disableClick={atCapacity}

diff --git a/...ges/web/src/components/upload/Dropzone.js → ...es/web/src/components/upload/Dropzone.tsx b/...ges/web/src/components/upload/Dropzone.js → ...es/web/src/components/upload/Dropzone.tsx
@@ -1,5 +1,4 @@
 import cn from 'classnames'
-import PropTypes from 'prop-types'
 import ReactDropzone from 'react-dropzone'
 
 import { ReactComponent as IconUpload } from 'assets/img/iconUpload.svg'
@@ -14,19 +13,43 @@ const messages = {
   browse: 'browse to upload'
 }
 
-const Dropzone = ({
+type DropzoneProps = {
+  className?: string
+  messageClassName?: string
+  titleTextClassName?: string
+  iconClassName?: string
+  type?: 'track' | 'image' | 'stem'
+  // Extra text content to be displayed inside the dropzone.
+  textAboveIcon?: string
+  subtitle?: string
+  allowMultiple?: boolean
+  /**
+   * Callback fired when the user drops files onto the dropzone
+   */
+  onDropAccepted: (files: File[]) => void
+  /**
+   * Callback fired when the dropped file is rejected, usually
+   * from a disallowed file type
+   */
+  onDropRejected?: (files: File[]) => void
+  disabled?: boolean
+  disableClick?: boolean
+}
+
+export const Dropzone = ({
   className,
   titleTextClassName,
   messageClassName,
   iconClassName,
-  type,
+  type = 'track',
   textAboveIcon,
-  allowMultiple,
-  onDrop,
+  allowMultiple = true,
+  onDropAccepted,
+  onDropRejected,
   subtitle,
-  disabled,
+  disabled = false,
   disableClick
-}) => {
+}: DropzoneProps) => {
   const getMessage = () => {
     if (subtitle) return subtitle
     let message
@@ -53,7 +76,8 @@ const Dropzone = ({
   return (
     <ReactDropzone
       multiple={allowMultiple}
-      onDrop={onDrop}
+      onDropAccepted={onDropAccepted}
+      onDropRejected={onDropRejected}
       className={cn(styles.dropzone, className)}
       disabled={disabled}
       disableClick={disabled || disableClick}
@@ -78,25 +102,3 @@ const Dropzone = ({
     </ReactDropzone>
   )
 }
-
-Dropzone.propTypes = {
-  className: PropTypes.string,
-  messageClassName: PropTypes.string,
-  titleTextClassName: PropTypes.string,
-  iconClassName: PropTypes.string,
-  type: PropTypes.oneOf(['track', 'image', 'stem']).isRequired,
-  // Extra text content to be displayed inside the dropzone.
-  textAboveIcon: PropTypes.string,
-  subtitle: PropTypes.string,
-  allowMultiple: PropTypes.bool,
-  onDrop: PropTypes.func,
-  disabled: PropTypes.bool
-}
-
-Dropzone.defaultProps = {
-  type: 'track',
-  allowMultiple: true,
-  disabled: false
-}
-
-export default Dropzone
diff --git a/packages/web/src/pages/upload-page/UploadPage.js b/packages/web/src/pages/upload-page/UploadPage.js
@@ -139,11 +139,7 @@ class Upload extends Component {
       return true
     })
 
-    const processedFiles = processFiles(
-      selectedFiles,
-      false,
-      this.invalidAudioFile
-    )
+    const processedFiles = processFiles(selectedFiles, this.invalidAudioFile)
     const tracks = (await Promise.all(processedFiles)).filter(Boolean)
     if (tracks.length === processedFiles.length) {
       this.setState({ uploadTrackerror: null })
@@ -164,11 +160,7 @@ class Upload extends Component {
   }
 
   onAddStemsToTrack = async (selectedStems, trackIndex) => {
-    const processedFiles = processFiles(
-      selectedStems,
-      true,
-      this.invalidAudioFile
-    )
+    const processedFiles = processFiles(selectedStems, this.invalidAudioFile)
     const stems = (await Promise.all(processedFiles))
       .filter(Boolean)
       .map((s) => ({

diff --git a/packages/web/src/pages/upload-page/components/SelectPage.js b/packages/web/src/pages/upload-page/components/SelectPage.js
@@ -5,7 +5,7 @@ import cn from 'classnames'
 import PropTypes from 'prop-types'
 
 import { SelectedServices } from 'components/service-selection'
-import Dropzone from 'components/upload/Dropzone'
+import { Dropzone } from 'components/upload/Dropzone'
 import InvalidFileType from 'components/upload/InvalidFileType'
 
 import styles from './SelectPage.module.css'
@@ -55,7 +55,11 @@ class SelectPage extends Component {
       <div className={cn(styles.page)}>
         <div className={styles.select}>
           <div className={styles.dropzone}>
-            <Dropzone textAboveIcon={textAboveIcon} onDrop={onSelect} />
+            <Dropzone
+              textAboveIcon={textAboveIcon}
+              onDropAccepted={onSelect}
+              onDropRejected={onSelect}
+            />
             {error ? (
               <InvalidFileType
                 reason={error.reason}

diff --git a/packages/web/src/pages/upload-page/store/utils/processFiles.ts b/packages/web/src/pages/upload-page/store/utils/processFiles.ts
@@ -80,7 +80,6 @@ const createArtwork = async (selectedFiles: File[]) => {
 
 export const processFiles = (
   selectedFiles: File[],
-  isStem: boolean,
   handleInvalid: (fileName: string, errorType: 'size' | 'type') => void
 ) => {
   return selectedFiles.map(async (file) => {