From 13d793c20c347b3c5ea9725ec4b904b2b1c9ee8c Mon Sep 17 00:00:00 2001
From: Henry Fontanier <h.fontanier@gmail.com>
Date: Mon, 22 Jan 2024 11:12:12 +0100
Subject: [PATCH] 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 <henry@dust.tt>
---
 .../data-sources/[name]/tables/upsert.tsx     | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

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
index 3e282af08e99..2e3737c387f6 100644
--- 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}