message if upload was successfull or not

src/elements/DropZone/DropZone.module.css

@@ -6,7 +6,7 @@
     padding: 20px;
 }
 
-.dropArea:hover{
+.dropArea:hover {
     cursor: pointer;
 }
 
@@ -14,38 +14,17 @@
     border-color: purple;
 }
 
-p {
-    margin-top: 0;
-}
-
 .myForm {
     margin-bottom: 10px;
 }
 
-.gallery {
+.progresswrapper {
+    width: 100%;
+    height: 5px;
+    margin-top: 3px;
+}
+
+.finished {
     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;
+    text-align: center;
 }

src/elements/DropZone/DropZone.tsx

@@ -6,6 +6,7 @@ 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();
 
@@ -23,7 +24,17 @@ export const DropZone = (): JSX.Element => {
         xhr.onload = function (): void {
             console.log(this.responseText); // whatever the server returns
 
-            setpercent(0);
+            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 {
@@ -79,9 +90,18 @@ export const DropZone = (): JSX.Element => {
             }}>
             <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 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>
     );