seperate component for file drop and upload

correct save position of uploaded files
then parse video file

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>
-    );
-};