seperate component for file drop and upload

correct save position of uploaded files
then parse video file

src/elements/DropZone/DropZone.module.css

@@ -0,0 +1,57 @@
+.container {
+
+}
+
+.dropArea {
+    border: 2px dashed #ccc;
+    border-radius: 20px;
+    width: 480px;
+    font-family: sans-serif;
+    margin: 100px auto;
+    padding: 20px;
+    background-color: grey;
+}
+
+.dropArea:hover{
+    cursor: pointer;
+}
+
+.dropArea.highlight {
+    border-color: purple;
+}
+
+p {
+    margin-top: 0;
+}
+
+.myForm {
+    margin-bottom: 10px;
+}
+
+.gallery {
+    margin-top: 10px;
+}
+
+.gallery img {
+    width: 150px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+.button {
+    display: inline-block;
+    padding: 10px;
+    background: #ccc;
+    cursor: pointer;
+    border-radius: 5px;
+    border: 1px solid #ccc;
+}
+
+.button:hover {
+    background: #ddd;
+}
+
+.fileElem {
+    display: none;
+}

src/elements/DropZone/DropZone.tsx

@@ -0,0 +1,84 @@
+import style from './DropZone.module.css';
+import React, {useState} from 'react';
+import {cookie} from '../../utils/context/Cookie';
+
+export const DropZone = (): JSX.Element => {
+    const [ondrag, setDrag] = useState(0);
+    const [percent, setpercent] = useState(0.0);
+
+    const uploadFile = (f: FileList): void => {
+        let xhr = new XMLHttpRequest(); // create XMLHttpRequest
+        let data = new FormData(); // create formData object
+
+        for (let i = 0; i < f.length; i++) {
+            const file = f.item(i);
+            if (file) {
+                data.append('file' + i, file);
+            }
+        }
+
+        xhr.onload = function (): void {
+            console.log(this.responseText); // whatever the server returns
+        };
+
+        xhr.upload.onprogress = function (e): void {
+            console.log(e.loaded / e.total);
+            setpercent((e.loaded * 100.0) / e.total);
+        };
+
+        xhr.open('post', '/api/video/fileupload'); // open connection
+        xhr.setRequestHeader('Accept', 'multipart/form-data');
+
+        const tkn = cookie.Load();
+        if (tkn) {
+            xhr.setRequestHeader('Token', tkn.Token);
+        }
+
+        xhr.send(data); // send data
+    };
+
+    return (
+        <div
+            className={style.dropArea + (ondrag > 0 ? ' ' + style.highlight : '')}
+            onDragEnter={(e): void => {
+                e.preventDefault();
+                e.stopPropagation();
+                setDrag(ondrag + 1);
+            }}
+            onDragLeave={(e): void => {
+                e.preventDefault();
+                e.stopPropagation();
+                setDrag(ondrag - 1);
+            }}
+            onDragOver={(e): void => {
+                e.stopPropagation();
+                e.preventDefault();
+            }}
+            onDrop={(e): void => {
+                setDrag(0);
+                e.preventDefault();
+                e.stopPropagation();
+
+                uploadFile(e.dataTransfer.files);
+            }}
+            onClick={(): void => {
+                let input = document.createElement('input');
+                input.type = 'file';
+                input.multiple = true;
+                input.onchange = function (): void {
+                    if (input.files) {
+                        console.log(input.files);
+                        uploadFile(input.files);
+                    }
+                };
+                input.click();
+            }}>
+            <div className={style.myForm}>
+                <p>To upload new Videos darg and drop them here or click to select some...</p>
+                <div style={{width: '100%', height: 5, marginTop: 3}}>
+                    <div style={{width: percent + '%', backgroundColor: 'green', height: 5}} />
+                </div>
+            </div>
+        </div>
+    );
+};

src/pages/SettingsPage/MovieSettings.tsx

@@ -1,8 +1,8 @@
-import React, {BaseSyntheticEvent, useState} from 'react';
+import React from 'react';
 import style from './MovieSettings.module.css';
 import {APINode, callAPI} from '../../utils/Api';
 import {GeneralSuccess} from '../../types/GeneralTypes';
-import {cookie} from '../../utils/context/Cookie';
+import {DropZone} from '../../elements/DropZone/DropZone';
 
 interface state {
     text: string[];
@@ -124,7 +124,7 @@ class MovieSettings extends React.Component<Props, state> {
                         </div>
                     ))}
                 </div>
-                <FileHandler />
+                <DropZone />
             </>
         );
     }
@@ -164,57 +164,3 @@ class MovieSettings extends React.Component<Props, state> {
 }
 
 export default MovieSettings;
-
-const FileHandler = (): JSX.Element => {
-    const [file, setfile] = useState<File | null>(null);
-    const [percent, setpercent] = useState(0.0);
-
-    const uploadFile = (): void => {
-        let xhr = new XMLHttpRequest(); // create XMLHttpRequest
-        let data = new FormData(); // create formData object
-        if (!file) {
-            return;
-        }
-        data.append('file', file);
-
-        xhr.onload = function (): void {
-            console.log(this.responseText); // whatever the server returns
-        };
-
-        xhr.upload.onprogress = function (e): void {
-            console.log(e.loaded / e.total);
-            setpercent((e.loaded * 100.0) / e.total);
-        };
-
-        xhr.open('post', '/api/video/fileupload'); // open connection
-        xhr.setRequestHeader('Accept', 'multipart/form-data');
-
-        const tkn = cookie.Load();
-        if (tkn) {
-            xhr.setRequestHeader('Token', tkn.Token);
-        }
-
-        xhr.send(data); // send data
-    };
-
-    return (
-        <div style={{backgroundColor: 'white'}}>
-            <input
-                onChange={(e: BaseSyntheticEvent): void => {
-                    console.log(e);
-                    if (e.target) {
-                        console.log(e.target.files[0]);
-                        setfile(e.target.files[0]);
-                        // setfile(e.target.files[0]);
-                    }
-                }}
-                type='file'
-                name='Select file to upload'
-            />
-            <button onClick={(): void => uploadFile()}>upload</button>
-            <div style={{width: '100%', height: 5, marginTop: 3}}>
-                <div style={{width: percent + '%', backgroundColor: 'green', height: 5}} />
-            </div>
-        </div>
-    );
-};