🚸 (bot) Improve error message on failed file upload

Author: baptisteArno

apps/viewer/src/features/fileUpload/api/generateUploadUrl.ts

@@ -112,7 +112,7 @@ export const generateUploadUrl = publicProcedure
     )
       throw new TRPCError({
         code: "BAD_REQUEST",
-        message: "File type not allowed",
+        message: `File type ${fileType} not allowed`,
       });
 
     const { visibility, maxFileSize } = parseFileUploadParams(block);

packages/embeds/js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/js",
-  "version": "0.8.14",
+  "version": "0.8.15",
   "description": "Javascript library to display typebots on your website",
   "license": "FSL-1.1-ALv2",
   "type": "module",

packages/embeds/js/src/features/blocks/inputs/fileUpload/components/FileUploadForm.tsx

@@ -67,7 +67,7 @@ export const FileUploadForm = (props: Props) => {
 
   const startSingleFileUpload = async (file: File) => {
     setIsUploading(true);
-    const urls = await uploadFiles({
+    const result = await uploadFiles({
       apiHost:
         props.context.apiHost ?? guessApiHost({ ignoreChatApiUrl: true }),
       files: [
@@ -82,29 +82,30 @@ export const FileUploadForm = (props: Props) => {
       ],
     });
     setIsUploading(false);
-    if (urls.length && urls[0])
+    if (result.type === "success" && result.urls.length && result.urls[0])
       return props.onSubmit({
         type: "text",
         label:
           props.block.options?.labels?.success?.single ??
           defaultFileInputOptions.labels.success.single,
-        value: urls[0] ? encodeUrl(urls[0].url) : "",
+        value: result.urls[0] ? encodeUrl(result.urls[0].url) : "",
         attachments: [
           {
             type: file.type,
-            url: urls[0]!.url,
+            url: result.urls[0]!.url,
             blobUrl: URL.createObjectURL(file),
           },
         ],
       });
-    toaster.create({
-      description: fileUploadErrorMessage,
-    });
+    if (result.type === "error")
+      toaster.create({
+        description: result.error,
+      });
   };
 
   const startFilesUpload = async (files: File[]) => {
     setIsUploading(true);
-    const urls = await uploadFiles({
+    const result = await uploadFiles({
       apiHost:
         props.context.apiHost ?? guessApiHost({ ignoreChatApiUrl: true }),
       files: files.map((file) => ({
@@ -119,25 +120,25 @@ export const FileUploadForm = (props: Props) => {
     });
     setIsUploading(false);
     setUploadProgressPercent(0);
-    if (urls.length !== files.length)
+    if (result.type === "error")
       return toaster.create({
-        description: fileUploadErrorMessage,
+        description: result.error,
       });
     props.onSubmit({
       type: "text",
       label:
-        urls.length > 1
+        result.urls.length > 1
           ? (
               props.block.options?.labels?.success?.multiple ??
               defaultFileInputOptions.labels.success.multiple
-            ).replaceAll("{total}", urls.length.toString())
+            ).replaceAll("{total}", result.urls.length.toString())
           : (props.block.options?.labels?.success?.single ??
             defaultFileInputOptions.labels.success.single),
-      value: urls
+      value: result.urls
         .filter(isDefined)
         .map(({ url }) => encodeUrl(url))
         .join(", "),
-      attachments: urls
+      attachments: result.urls
         .map((urls, index) =>
           urls
             ? {

packages/embeds/js/src/features/blocks/inputs/fileUpload/helpers/uploadFiles.ts

@@ -22,14 +22,17 @@ export const uploadFiles = async ({
   apiHost,
   files,
   onUploadProgress,
-}: UploadFileProps): Promise<UrlList> => {
+}: UploadFileProps): Promise<
+  { type: "success"; urls: UrlList } | { type: "error"; error: string }
+> => {
   const urls: UrlList = [];
+  const errors: string[] = [];
   let i = 0;
   for (const { input, file } of files) {
     onUploadProgress &&
       onUploadProgress({ progress: (i / files.length) * 100, fileIndex: i });
     i += 1;
-    const { data } = await sendRequest<{
+    const { data, error } = await sendRequest<{
       presignedUrl: string;
       formData: Record<string, string>;
       fileUrl: string;
@@ -44,6 +47,11 @@ export const uploadFiles = async ({
       },
     });
 
+    if (error) {
+      errors.push(error.message);
+      continue;
+    }
+
     if (!data?.presignedUrl) continue;
     else {
       const formData = new FormData();
@@ -61,5 +69,7 @@ export const uploadFiles = async ({
       urls.push({ url: data.fileUrl, type: file.type });
     }
   }
-  return urls;
+  return errors.length > 0
+    ? { type: "error", error: errors.join(", ") }
+    : { type: "success", urls };
 };

packages/embeds/js/src/features/blocks/inputs/textInput/components/TextInput.tsx

@@ -64,7 +64,7 @@ export const TextInput = (props: Props) => {
       let attachments: Attachment[] | undefined;
       if (selectedFiles().length > 0) {
         setUploadProgress(undefined);
-        const urls = await uploadFiles({
+        const result = await uploadFiles({
           apiHost:
             props.context.apiHost ?? guessApiHost({ ignoreChatApiUrl: true }),
           files: selectedFiles().map((file) => ({
@@ -77,7 +77,13 @@ export const TextInput = (props: Props) => {
           })),
           onUploadProgress: setUploadProgress,
         });
-        attachments = urls
+        if (result.type === "error") {
+          toaster.create({
+            description: result.error,
+          });
+          return;
+        }
+        attachments = result.urls
           ?.map((urls, index) =>
             urls
               ? {
@@ -214,25 +220,28 @@ export const TextInput = (props: Props) => {
       );
 
       setUploadProgress(undefined);
-      const urls = (
-        await uploadFiles({
-          apiHost:
-            props.context.apiHost ?? guessApiHost({ ignoreChatApiUrl: true }),
-          files: [
-            {
-              file: audioFile,
-              input: {
-                blockId: props.block.id,
-                sessionId: props.context.sessionId,
-                fileName: audioFile.name,
-              },
+      const result = await uploadFiles({
+        apiHost:
+          props.context.apiHost ?? guessApiHost({ ignoreChatApiUrl: true }),
+        files: [
+          {
+            file: audioFile,
+            input: {
+              blockId: props.block.id,
+              sessionId: props.context.sessionId,
+              fileName: audioFile.name,
             },
-          ],
-          onUploadProgress: setUploadProgress,
-        })
-      )
-        .filter(isDefined)
-        .map((url) => url.url);
+          },
+        ],
+        onUploadProgress: setUploadProgress,
+      });
+      if (result.type === "error") {
+        toaster.create({
+          description: result.error,
+        });
+        return;
+      }
+      const urls = result.urls.filter(isDefined).map((url) => url.url);
       props.onSubmit({
         type: "recording",
         url: urls[0],

packages/embeds/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typebot.io/react",
-  "version": "0.8.14",
+  "version": "0.8.15",
   "description": "Convenient library to display typebots on your React app",
   "license": "FSL-1.1-ALv2",
   "type": "module",