enh: add warning when uploading file > 5mb (#3355)

* enh: add warning when uploading file > 5mb * include large file threshold in warning message --------- Co-authored-by: Henry Fontanier <[email protected]>
dust-tt · Jan 22, 2024 · 13d793c · 13d793c
1 parent 727a452
commit 13d793c
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/front/pages/w/[wId]/builder/data-sources/[name]/tables/upsert.tsx b/front/pages/w/[wId]/builder/data-sources/[name]/tables/upsert.tsx
@@ -2,6 +2,7 @@ import {
   Button,
   DocumentPlusIcon,
   DropdownMenu,
+  ExclamationCircleIcon,
   Input,
   Page,
   TrashIcon,
@@ -100,6 +101,7 @@ export default function TableUpsert({
   const [loading, setLoading] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [upserting, setUpserting] = useState(false);
+  const [isBigFile, setIsBigFile] = useState(false);
 
   const { table } = useTable({
     workspaceId: owner.sId,
@@ -178,6 +180,12 @@ export default function TableUpsert({
         return;
       }
 
+      if (res.value.content.length > 5_000_000) {
+        setIsBigFile(true);
+      } else {
+        setIsBigFile(false);
+      }
+
       const body: CreateTableFromCsvRequestBody = {
         name: tableName,
         description: description,
@@ -308,6 +316,19 @@ export default function TableUpsert({
                     },
                   }}
                 />
+                {isBigFile && (
+                  <div className="pt-4">
+                    <div className="flex flex-col gap-y-2">
+                      <div className="flex grow flex-row items-center gap-1 text-sm font-medium text-element-800 text-warning-500">
+                        <ExclamationCircleIcon />
+                        Warning: Large file (5MB+)
+                      </div>
+                      <div className="text-sm font-normal text-element-700">
+                        This file is large and may take a while to upload.
+                      </div>
+                    </div>
+                  </div>
+                )}
                 <input
                   type="file"
                   ref={fileInputRef}