nice heading above uploadfield

10G upload limit for nginx config

deb/OpenMediaCenter/etc/nginx/sites-available/OpenMediaCenter.conf

@@ -14,6 +14,7 @@ server {
     }
 
     location ~* ^/(api/|token) {
+        client_max_body_size 10G;
         proxy_pass http://127.0.0.1:8081;
     }
     location /subscribe {

src/elements/DropZone/DropZone.module.css

@@ -1,15 +1,9 @@
-.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{

src/elements/DropZone/DropZone.tsx

@@ -1,11 +1,14 @@
 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 theme = GlobalInfos.getThemeStyle();
+
     const uploadFile = (f: FileList): void => {
         let xhr = new XMLHttpRequest(); // create XMLHttpRequest
         let data = new FormData(); // create formData object
@@ -39,7 +42,7 @@ export const DropZone = (): JSX.Element => {
 
     return (
         <div
-            className={style.dropArea + (ondrag > 0 ? ' ' + style.highlight : '')}
+            className={style.dropArea + (ondrag > 0 ? ' ' + style.highlight : '') + ' ' + theme.secbackground}
             onDragEnter={(e): void => {
                 e.preventDefault();
                 e.stopPropagation();

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

@@ -3,6 +3,7 @@ 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[];
@@ -100,6 +101,8 @@ class MovieSettings extends React.Component<Props, state> {
     }
 
     render(): JSX.Element {
+        const theme = GlobalInfos.getThemeStyle();
+
         return (
             <>
                 <button
@@ -124,7 +127,10 @@ class MovieSettings extends React.Component<Props, state> {
                         </div>
                     ))}
                 </div>
+                <div className={theme.textcolor}>
+                    <div className={style.uploadtext}>Video Upload:</div>
                     <DropZone />
+                </div>
             </>
         );
     }