dropzone added

web/package.json

@@ -18,6 +18,7 @@
     "react-copy-to-clipboard": "^5.0.3",
     "react-div-100vh": "^0.6.0",
     "react-dom": "^17.0.2",
+    "react-dropzone": "^11.3.2",
     "react-i18next": "^11.10.0",
     "react-konva": "^17.0.2-4",
     "react-measure": "^2.5.2",

web/src/components/Add/AddDialog.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import Button from '@material-ui/core/Button'
 import TextField from '@material-ui/core/TextField'
 import Dialog from '@material-ui/core/Dialog'
@@ -11,6 +11,7 @@ import debounce from 'lodash/debounce'
 import { v4 as uuidv4 } from 'uuid'
 import useChangeLanguage from 'utils/useChangeLanguage'
 import { Cancel as CancelIcon } from '@material-ui/icons'
+import { useDropzone } from 'react-dropzone'
 
 const Header = styled.div`
   background: #00a572;
@@ -46,7 +47,7 @@ const RightSide = styled.div`
 `
 
 const RightSideBottomSectionBasicStyles = css`
-  transition: all 0.3s;
+  transition: transform 0.3s;
   padding: 20px;
   height: 100%;
   display: grid;
@@ -54,6 +55,9 @@ const RightSideBottomSectionBasicStyles = css`
 
 const RightSideBottomSectionNoFile = styled.div`
   ${RightSideBottomSectionBasicStyles}
+  border: 4px dashed transparent;
+
+  ${({ isDragActive }) => isDragActive && `border: 4px dashed green`};
 
   justify-items: center;
   grid-template-rows: 100px 1fr;
@@ -103,11 +107,6 @@ const IconWrapper = styled.div`
   }
 `
 
-const FileUploadLabel = styled.label`
-  transition: all 0.3s;
-  flex: 1;
-`
-
 const RightSideTopSection = styled.div`
   background: #fff;
   padding: 0 20px 20px 20px;
@@ -115,7 +114,7 @@ const RightSideTopSection = styled.div`
   ${({ active }) =>
     active &&
     css`
-      + ${FileUploadLabel} {
+      + ${RightSideBottomSectionNoFile} {
         box-shadow: inset 3px 25px 8px -25px rgba(0, 0, 0, 0.5);
       }
     `};
@@ -238,6 +237,16 @@ export default function AddDialog({ handleClose }) {
   const [currentLang] = useChangeLanguage()
   const [selectedFile, setSelectedFile] = useState()
 
+  const handleCapture = useCallback(files => {
+    const [file] = files
+    if (!file) return
+
+    setSelectedFile(file)
+    setTorrentSource(file.name)
+  }, [])
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop: handleCapture, accept: '.torrent' })
+
   const removePoster = () => {
     setIsPosterUrlCorrect(false)
     setPosterUrl('')
@@ -296,14 +305,6 @@ export default function AddDialog({ handleClose }) {
     }
   }
 
-  const handleCapture = ({ target: { files } }) => {
-    const [file] = files
-    if (!file) return
-
-    setSelectedFile(file)
-    setTorrentSource(file.name)
-  }
-
   const clearSelectedFile = () => {
     setSelectedFile()
     setTorrentSource('')
@@ -396,16 +397,8 @@ export default function AddDialog({ handleClose }) {
                 </TorrentIconWrapper>
               </RightSideBottomSectionFileSelected>
             ) : (
-              <FileUploadLabel htmlFor='upload-file'>
-                <input
-                  onChange={handleCapture}
-                  accept='.torrent'
-                  type='file'
-                  style={{ display: 'none' }}
-                  id='upload-file'
-                />
-
-                <RightSideBottomSectionNoFile selectedFile={selectedFile} type='submit'>
+              <RightSideBottomSectionNoFile isDragActive={isDragActive} {...getRootProps()}>
+                <input {...getInputProps()} />
                 <div>{t('AppendFile.Or')}</div>
 
                 <IconWrapper>
@@ -413,7 +406,6 @@ export default function AddDialog({ handleClose }) {
                   <div>{t('AppendFile.ClickOrDrag')}</div>
                 </IconWrapper>
               </RightSideBottomSectionNoFile>
-              </FileUploadLabel>
             )}
           </RightSide>
         </Content>

web/src/locales/en/translation.json

@@ -99,7 +99,7 @@
   "Viewed": "Viewed",
   "AppendFile": {
     "Or": "OR",
-    "ClickOrDrag": "CLICK / DRAG & DROP"
+    "ClickOrDrag": "CLICK / DRAG & DROP (.torrent)"
   },
   "TorrentSourceOptions": "magnet / hash / .torrent file link",
   "Clear": "Clear"

web/src/locales/ru/translation.json

@@ -99,7 +99,7 @@
   "Viewed": "Просм.",
   "AppendFile": {
     "Or": "ИЛИ",
-    "ClickOrDrag": "НАЖМИТЕ / ПЕРЕТАЩИТЕ ФАЙЛ"
+    "ClickOrDrag": "НАЖМИТЕ / ПЕРЕТАЩИТЕ ФАЙЛ (.torrent)"
   },
   "TorrentSourceOptions": "магнитная ссылка / хэш / ссылка на .torrent файл",
   "Clear": "Очистить"

web/yarn.lock

@@ -2730,6 +2730,11 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
+attr-accept@^2.2.1:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/attr-accept/-/attr-accept-2.2.2.tgz#646613809660110749e92f2c10833b70968d929b"
+  integrity sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg==
+
 autoprefixer@^9.6.1:
   version "9.8.6"
   resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.8.6.tgz#3b73594ca1bf9266320c5acf1588d74dea74210f"
@@ -5591,6 +5596,13 @@ file-loader@6.1.1:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
+file-selector@^0.2.2:
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/file-selector/-/file-selector-0.2.4.tgz#7b98286f9dbb9925f420130ea5ed0a69238d4d80"
+  integrity sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==
+  dependencies:
+    tslib "^2.0.3"
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -10322,6 +10334,15 @@ react-dom@^17.0.2:
     object-assign "^4.1.1"
     scheduler "^0.20.2"
 
+react-dropzone@^11.3.2:
+  version "11.3.2"
+  resolved "https://registry.yarnpkg.com/react-dropzone/-/react-dropzone-11.3.2.tgz#2efb6af800a4779a9daa1e7ba1f8d51d0ab862d7"
+  integrity sha512-Z0l/YHcrNK1r85o6RT77Z5XgTARmlZZGfEKBl3tqTXL9fZNQDuIdRx/J0QjvR60X+yYu26dnHeaG2pWU+1HHvw==
+  dependencies:
+    attr-accept "^2.2.1"
+    file-selector "^0.2.2"
+    prop-types "^15.7.2"
+
 react-error-overlay@^6.0.9:
   version "6.0.9"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"