message if upload was successfull or not

apiGo/api/FileUpload.go

@@ -12,9 +12,6 @@ import (
 
 func addUploadHandler() {
 	api.AddHandler("fileupload", api.VideoNode, api.PermUser, func(ctx api.Context) {
-		fmt.Println("we are in file upload handler")
-		fmt.Printf("permission: %s\n", ctx.PermID().String())
-
 		// get path where to store videos to
 		mSettings, PathPrefix, _ := database.GetSettings()
 
@@ -28,7 +25,6 @@ func addUploadHandler() {
 
 		videoparser.InitDeps(&mSettings)
 
-		//length := req.ContentLength
 		for {
 			part, err := mr.NextPart()
 			if err == io.EOF {
@@ -43,6 +39,7 @@ func addUploadHandler() {
 			vidpath := PathPrefix + mSettings.VideoPath + part.FileName()
 			dst, err := os.OpenFile(vidpath, os.O_WRONLY|os.O_CREATE, 0644)
 			if err != nil {
+				ctx.Error("error opening file")
 				return
 			}
 
@@ -53,9 +50,6 @@ func addUploadHandler() {
 			for {
 				cBytes, err := part.Read(buffer)
 				if cBytes > 0 {
-					//read = read + int64(cBytes)
-					//p = float32(read) / float32(length) * 100
-					//fmt.Printf("progress: %v \n", p)
 					dst.Write(buffer[0:cBytes])
 				}
 
@@ -69,6 +63,8 @@ func addUploadHandler() {
 			_ = dst.Close()
 		}
 
-		ctx.Text("finished all files")
+		ctx.Json(struct {
+			Message string
+		}{Message: "finished all files"})
 	})
 }

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;
-}
+    text-align: center;
-
-.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

@@ -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
 
+            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>
     );