Merge branch 'fileupload' into 'master'

Video upload through webpage

Closes #59

See merge request lukas/openmediacenter!55

src/elements/DropZone/DropZone.module.css

@@ -0,0 +1,30 @@
+.dropArea {
+    border: 2px dashed #ccc;
+    border-radius: 20px;
+    width: 480px;
+    font-family: sans-serif;
+    padding: 20px;
+}
+
+.dropArea:hover {
+    cursor: pointer;
+}
+
+.dropArea.highlight {
+    border-color: purple;
+}
+
+.myForm {
+    margin-bottom: 10px;
+}
+
+.progresswrapper {
+    width: 100%;
+    height: 5px;
+    margin-top: 3px;
+}
+
+.finished {
+    margin-top: 10px;
+    text-align: center;
+}

src/elements/DropZone/DropZone.tsx

@@ -0,0 +1,108 @@
+import style from './DropZone.module.css';
+import React, {useState} from 'react';
+import {cookie} from '../../utils/context/Cookie';
+import GlobalInfos from '../../utils/GlobalInfos';
+
+export const DropZone = (): JSX.Element => {
+    const [ondrag, setDrag] = useState(0);
+    const [percent, setpercent] = useState(0.0);
+    const [finished, setfinished] = useState<string | null>(null);
+
+    const theme = GlobalInfos.getThemeStyle();
+
+    const uploadFile = (f: FileList): void => {
+        const xhr = new XMLHttpRequest(); // create XMLHttpRequest
+        const 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
+
+            const resp = JSON.parse(this.responseText);
+            if (resp.Message === 'finished all files') {
+                setfinished('');
+            } else {
+                setfinished(resp.Message);
+            }
+
+            setTimeout(() => {
+                setpercent(0);
+                setfinished(null);
+            }, 2000);
+        };
+
+        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 : '') + ' ' + theme.secbackground}
+            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) {
+                        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 className={style.progresswrapper}>
+                    <div style={{width: percent + '%', backgroundColor: 'green', height: 5}} />
+                </div>
+                {finished !== null ? (
+                    finished === '' ? (
+                        <div className={style.finished}>Finished uploading</div>
+                    ) : (
+                        <div className={style.finished}>Upload failed: {finished}</div>
+                    )
+                ) : (
+                    <></>
+                )}
+            </div>
+        </div>
+    );
+};

src/pages/SettingsPage/MovieSettings.module.css

@@ -11,3 +11,9 @@
     padding: 10px;
     width: 40%;
 }
+
+.uploadtext {
+    font-size: x-large;
+    margin-top: 30px;
+    margin-bottom: 10px;
+}

src/pages/SettingsPage/MovieSettings.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 import style from './MovieSettings.module.css';
 import {APINode, callAPI} from '../../utils/Api';
 import {GeneralSuccess} from '../../types/GeneralTypes';
+import {DropZone} from '../../elements/DropZone/DropZone';
+import GlobalInfos from '../../utils/GlobalInfos';
 
 interface state {
     text: string[];
@@ -99,6 +101,8 @@ class MovieSettings extends React.Component<Props, state> {
     }
 
     render(): JSX.Element {
+        const theme = GlobalInfos.getThemeStyle();
+
         return (
             <>
                 <button
@@ -123,6 +127,10 @@ class MovieSettings extends React.Component<Props, state> {
                         </div>
                     ))}
                 </div>
+                <div className={theme.textcolor}>
+                    <div className={style.uploadtext}>Video Upload:</div>
+                    <DropZone />
+                </div>
             </>
         );
     }