fix: notifs disappear on large files (#219)

src/components/pages/Upload.tsx

@@ -71,19 +71,23 @@ export default function Upload({ chunks: chunks_config }) {
           await new Promise((resolve) => setTimeout(resolve, 100));
         }
 
-        const body = new FormData();
+        // if last chunk send notif that it will take a while
+        if (j === chunks.length - 1) {
+          updateNotification({
+            id: 'upload-chunked',
+            title: 'Finalizing partial upload',
+            message: 'This may take a while...',
+            icon: <ClockIcon />,
+            color: 'yellow',
+            autoClose: false,
+          });
+        }
 
+        const body = new FormData();
         body.append('file', chunks[j].blob);
 
-        setProgress(0);
         setLoading(true);
-
         const req = new XMLHttpRequest();
-        req.upload.addEventListener('progress', (e) => {
-          if (e.lengthComputable) {
-            setProgress(Math.round((e.loaded / e.total) * 100));
-          }
-        });
 
         req.addEventListener(
           'load',
@@ -92,12 +96,14 @@ export default function Upload({ chunks: chunks_config }) {
             const json = JSON.parse(e.target.response);
 
             if (json.error === undefined) {
+              setProgress(Math.round((j / chunks.length) * 100));
               updateNotification({
                 id: 'upload-chunked',
                 title: `Uploading chunk ${j + 1}/${chunks.length} Successful`,
                 message: '',
                 color: 'green',
                 icon: <UploadIcon />,
+                autoClose: false,
               });
 
               if (j === chunks.length - 1) {
@@ -121,6 +127,9 @@ export default function Upload({ chunks: chunks_config }) {
 
                 invalidateFiles();
                 setFiles([]);
+                setProgress(100);
+
+                setTimeout(() => setProgress(0), 1000);
 
                 clipboard.copy(json.files[0]);
               }
@@ -133,10 +142,10 @@ export default function Upload({ chunks: chunks_config }) {
                 message: json.error,
                 color: 'red',
                 icon: <CrossIcon />,
+                autoClose: false,
               });
               ready = false;
             }
-            setProgress(0);
           },
           false
         );

src/pages/api/upload.ts

@@ -149,13 +149,35 @@ async function handler(req: NextApiReq, res: NextApiRes) {
 
       await datasource.save(file.file, Buffer.from(chunks));
 
-      return res.json({
-        files: [
+      Logger.get('file').info(
+        `User ${user.username} (${user.id}) uploaded ${file.file} (${file.id}) (chunked)`
+      );
+      if (user.domains.length) {
+        const domain = user.domains[Math.floor(Math.random() * user.domains.length)];
+        response.files.push(
+          `${domain}${zconfig.uploader.route === '/' ? '' : zconfig.uploader.route}/${
+            invis ? invis.invis : file.file
+          }`
+        );
+      } else {
+        response.files.push(
           `${zconfig.core.https ? 'https' : 'http'}://${req.headers.host}${
             zconfig.uploader.route === '/' ? '' : zconfig.uploader.route
-          }/${invis ? invis.invis : file.file}`,
-        ],
-      });
+          }/${invis ? invis.invis : file.file}`
+        );
+      }
+
+      if (zconfig.discord?.upload) {
+        await sendUpload(
+          user,
+          file,
+          `${zconfig.core.https ? 'https' : 'http'}://${req.headers.host}/r/${
+            invis ? invis.invis : file.file
+          }`
+        );
+      }
+
+      return res.json(response);
     }
 
     return res.json({