update react-dropzone, display error if no valid files

Author: tdjsnelling

client/package.json

@@ -27,7 +27,7 @@
     "react": "17.0.2",
     "react-cookie": "^4.1.1",
     "react-dom": "17.0.2",
-    "react-dropzone": "^11.4.2",
+    "react-dropzone": "^14.2.3",
     "react-markdown": "^7.1.2",
     "remark-gfm": "^3.0.1",
     "slugify": "^1.6.5",

client/pages/upload.js

@@ -58,15 +58,15 @@ const Upload = ({ token, userId }) => {
         }
         reader.onerror = () => {
           console.log(`[DEBUG] upload error: ${reader.error}`)
-        }
-        reader.onabort = () => {
-          console.log(`[DEBUG] upload aborted`)
+          setDropError(reader.error.message)
         }
         reader.onprogress = (e) => {
           console.log(`[DEBUG] progress: ${e.loaded} bytes`)
         }
         reader.readAsDataURL(file)
         setDropError('')
+      } else {
+        setDropError('Must be a .torrent file')
       }
     } catch (e) {
       setDropError(e.message)
@@ -75,7 +75,7 @@ const Upload = ({ token, userId }) => {
 
   const { getRootProps, getInputProps, isDragActive } = useDropzone({
     onDrop,
-    accept: 'application/x-bittorrent',
+    accept: { 'application/x-bittorrent': ['.torrent'] },
     maxFiles: 1,
   })
 
@@ -120,7 +120,7 @@ const Upload = ({ token, userId }) => {
       const infoHash = await uploadRes.text()
       router.push(`/torrent/${infoHash}`)
     } catch (e) {
-      addNotification('error', `Could not upload torrent: ${e.message}`)
+      addNotification('error', `Could not upload file: ${e.message}`)
       console.error(e)
     }
 

yarn.lock

@@ -3074,12 +3074,12 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-selector@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.4.0.tgz#59ec4f27aa5baf0841e9c6385c8386bef4d18b17"
-  integrity sha512-iACCiXeMYOvZqlF1kTiYINzgepRBymz1wwjiuup9u9nayhb6g4fSwiyJ/6adli+EPwrWtpgQAh2PoS7HukEGEg==
+file-selector@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.6.0.tgz#fa0a8d9007b829504db4d07dd4de0310b65287dc"
+  integrity sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==
   dependencies:
-    tslib "^2.0.3"
+    tslib "^2.4.0"
 
 fill-range@^7.0.1:
   version "7.0.1"
@@ -5282,13 +5282,13 @@ react-dom@17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
-react-dropzone@^11.4.2:
-  version "11.7.1"
-  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.7.1.tgz#3851bb75b26af0bf1b17ce1449fd980e643b9356"
-  integrity sha512-zxCMwhfPy1olUEbw3FLNPLhAm/HnaYH5aELIEglRbqabizKAdHs0h+WuyOpmA+v1JXn0++fpQDdNfUagWt5hJQ==
+react-dropzone@^14.2.3:
+  version "14.2.3"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-14.2.3.tgz#0acab68308fda2d54d1273a1e626264e13d4e84b"
+  integrity sha512-O3om8I+PkFKbxCukfIR3QAGftYXDZfOE2N1mr/7qebQJHs7U+/RSL/9xomJNpRg9kM5h9soQSdf0Gc7OHF5Fug==
   dependencies:
     attr-accept "^2.2.2"
-    file-selector "^0.4.0"
+    file-selector "^0.6.0"
     prop-types "^15.8.1"
 
 react-is@^16.13.1, react-is@^16.7.0:
@@ -6155,7 +6155,7 @@ tslib@^1.8.1, tslib@^1.9.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
 
-tslib@^2.0.3, tslib@^2.1.0, tslib@^2.4.0:
+tslib@^2.1.0, tslib@^2.4.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==