Merge pull request #102 from ragestudio/uploads-progress_bar

Uploads progress bar

packages/app/src/components/UploadButton/index.jsx

@@ -6,16 +6,48 @@ import { Icons } from "components/Icons"
 export default (props) => {
     const [uploading, setUploading] = React.useState(false)
 
+    const handleOnStart = (file_uid, file) => {
+        if (typeof props.onStart === "function") {
+            props.onStart(file_uid, file)
+        }
+    }
+
+    const handleOnProgress = (file_uid, progress) => {
+        if (typeof props.onProgress === "function") {
+            props.onProgress(file_uid, progress)
+        }
+    }
+
+    const handleOnError = (file_uid, error) => {
+        if (typeof props.onError === "function") {
+            props.onError(file_uid, error)
+        }
+    }
+
+    const handleOnSuccess = (file_uid, response) => {
+        if (typeof props.onSuccess === "function") {
+            props.onSuccess(file_uid, response)
+        }
+    }
+
     const handleUpload = async (req) => {
         setUploading(true)
 
-        const response = await app.cores.remoteStorage.uploadFile(req.file).catch((err) => {
+        handleOnStart(req.file.uid, req.file)
+
+        const response = await app.cores.remoteStorage.uploadFile(req.file, {
+            onProgress: (file, progress) => {
+                return handleOnProgress(file.uid, progress)
+            }
+        }).catch((err) => {
             app.notification.new({
-                message: "Could not upload file",
-                description: err.message
+                title: "Could not upload file",
+                description: err
             }, {
                 type: "error"
             })
+
+            return handleOnError(req.file.uid, err)
         })
 
         if (typeof props.ctx?.onUpdateItem === "function") {
@@ -23,14 +55,12 @@ export default (props) => {
         }
 
         if (typeof props.onUploadDone === "function") {
-            if (props.multiple) {
-                await props.onUploadDone(response)
-            } else {
-                await props.onUploadDone(response)
-            }
+            await props.onUploadDone(response)
         }
 
         setUploading(false)
+
+        return handleOnSuccess(req.file.uid, response)
     }
 
     return <Upload

packages/app/src/cores/remoteStorage/index.js

@@ -207,7 +207,7 @@ export default class RemoteStorage extends Core {
                     console.error("[Uploader] Error", message)
 
                     if (typeof onError === "function") {
-                        onError(message)
+                        onError(file, message)
                     }
 
                     reject(message)
@@ -217,7 +217,7 @@ export default class RemoteStorage extends Core {
                     //console.debug(`[Uploader] Progress: ${percentProgress}%`)
 
                     if (typeof onProgress === "function") {
-                        onProgress(percentProgress)
+                        onProgress(file, percentProgress)
                     }
                 })
 
@@ -225,7 +225,7 @@ export default class RemoteStorage extends Core {
                     console.debug("[Uploader] Finish", data)
 
                     if (typeof onFinish === "function") {
-                        onFinish(data)
+                        onFinish(file, data)
                     }
 
                     resolve(data)

packages/app/src/pages/music/creator/components/TracksUploads/index.jsx

@@ -207,6 +207,19 @@ const FileListItem = (props) => {
                     />
                 }
 
+                <div className={classnames(
+                    "fileListItem_progress",
+                    {
+                        ["hidden"]: !isUploading,
+                    }
+                )}>
+                    <antd.Progress
+                        percent={props.track.progress ?? 0}
+                        status={props.track.status === "error" ? "exception" : (props.track.progress === 100 ? "success" : "active")}
+                        showInfo={false}
+                    />
+                </div>
+
                 <div className="fileListItem_cover">
                     <img
                         src={props.track.cover ?? props.track?.thumbnail}

packages/app/src/pages/music/creator/components/TracksUploads/index.less

@@ -136,6 +136,33 @@
                     }
                 }
 
+                .fileListItem_progress {
+                    position: absolute;
+
+                    bottom: 0;
+                    left: 0;
+
+                    display: flex;
+                    flex-direction: column;
+
+                    align-items: center;
+                    justify-content: center;
+
+                    width: 100%;
+
+                    .ant-progress-line {
+                        margin: 0 !important;
+                        padding: 0 !important;
+
+                        width: 40%;
+                    }
+
+                    &.hidden {
+                        animation: hide 0.2s ease-in-out forwards;
+                        animation-delay: 2s;
+                    }
+                }
+
                 .fileListItem_loadingIcon {
                     position: absolute;
                     top: 0;
@@ -155,6 +182,8 @@
                 }
 
                 .fileListItem_cover {
+                    position: relative;
+
                     display: flex;
                     flex-direction: column;
 
@@ -337,8 +366,22 @@
                 border-radius: 12px;
 
                 background-color: black;
-
             }
         }
     }
+}
+
+@keyframes hide {
+    0% {
+        opacity: 1;
+    }
+
+    99% {
+        opacity: 0;
+        width: fit-content;
+    }
+
+    100% {
+        width: 0px;
+    }
 }

packages/app/src/pages/music/creator/index.jsx

@@ -161,9 +161,23 @@ export default class PlaylistCreatorSteps extends React.Component {
         })
     }
 
+    handleFileProgress = (file, progress) => {
+        const trackList = this.state.trackList
+
+        const track = trackList.find((track) => track.uid === file.uid)
+
+        if (track) {
+            track.progress = progress
+
+            this.setState({
+                trackList
+            })
+        }
+    }
+
     handleUploadTrack = async (req) => {
         const response = await app.cores.remoteStorage.uploadFile(req.file, {
-            timeout: 2000
+            onProgress: this.handleFileProgress
         }).catch((error) => {
             console.error(error)
             antd.message.error(error)