feat: notify user that file is empty/too small

modify toast to persist timeout if param is null make toast clickable to close it
tumavideo · Jan 20, 2024 · ea2ea18 · ea2ea18
1 parent 19d8a21
commit ea2ea18
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/app/profile/upload-resume.tsx b/app/profile/upload-resume.tsx
@@ -11,6 +11,9 @@ import "@uppy/progress-bar/dist/style.css";
 import { Dashboard } from "@uppy/react";
 import Tus from "@uppy/tus";
 import { useMemo } from "react";
+
+const SMALLEST_ALLOWED = 13000;
+
 export default function UploadResume({ id, removeFile, addFile }) {
   const uppy = useMemo(() => {
     const uppyInstance = new Uppy({
@@ -66,6 +69,17 @@ export default function UploadResume({ id, removeFile, addFile }) {
 
     uppyInstance.on("complete", async (result) => {
       console.log("Resume from the result", result);
+
+      if (result.successful[0].size < SMALLEST_ALLOWED) {
+        showToast(
+          "Upload problem",
+          "Please check the contents of your file, it appears to be empty.",
+          "error",
+          null
+        );
+        return;
+      }
+
       if (result.successful) {
         showToast(
           "Upload complete!",

diff --git a/utils/toast.js b/utils/toast.js
@@ -20,7 +20,7 @@ const toastTypes = {
   error: crossSVG,
 };
 
-export const showToast = (title, message, type = "success") => {
+export const showToast = (title, message, type = "success", timeout = 2000) => {
   const toastElement = document.createElement("div");
 
   toastElement.className =
@@ -44,9 +44,15 @@ export const showToast = (title, message, type = "success") => {
       </div>
     `;
 
+  const closeToast = () => document.body.removeChild(toastElement);
+
+  toastElement.addEventListener("click", closeToast.bind());
+
   document.body.appendChild(toastElement);
 
-  setTimeout(() => {
-    document.body.removeChild(toastElement);
-  }, 2000);
+  if (timeout) {
+    setTimeout(() => {
+      closeToast();
+    }, timeout);
+  }
 };