fix: survey background image upload issue (#2222)

Co-authored-by: pandeymangg <anshuman.pandey9999@gmail.com>

packages/ui/FileInput/index.tsx

@@ -9,7 +9,7 @@ import toast from "react-hot-toast";
 import { cn } from "@formbricks/lib/cn";
 import { TAllowedFileExtension } from "@formbricks/types/common";
 
-import { uploadFile } from "./lib/fileUpload";
+import { getAllowedFiles, uploadFile } from "./lib/fileUpload";
 
 const allowedFileTypesForPreview = ["png", "jpeg", "jpg", "webp"];
 const isImage = (name: string) => {
@@ -23,6 +23,7 @@ interface FileInputProps {
   fileUrl?: string | string[];
   multiple?: boolean;
   imageFit?: "cover" | "contain";
+  maxSizeInMB?: number;
 }
 
 interface SelectedFile {
@@ -39,6 +40,7 @@ const FileInput: React.FC<FileInputProps> = ({
   fileUrl,
   multiple = false,
   imageFit = "cover",
+  maxSizeInMB,
 }) => {
   const [selectedFiles, setSelectedFiles] = useState<SelectedFile[]>([]);
 
@@ -48,19 +50,9 @@ const FileInput: React.FC<FileInputProps> = ({
       toast.error("Only one file is allowed");
     }
 
-    const allowedFiles = files.filter(
-      (file) =>
-        file &&
-        file.type &&
-        allowedFileExtensions.includes(file.name.split(".").pop() as TAllowedFileExtension)
-    );
-
-    if (allowedFiles.length < files.length) {
-      if (allowedFiles.length === 0) {
-        toast.error("No files are supported");
-        return;
-      }
-      toast.error("Some files are not supported");
+    const allowedFiles = getAllowedFiles(files, allowedFileExtensions, maxSizeInMB);
+    if (allowedFiles.length === 0) {
+      return;
     }
 
     setSelectedFiles(
@@ -85,7 +77,7 @@ const FileInput: React.FC<FileInputProps> = ({
     const uploadedUrls: string[] = [];
     uploadedFiles.forEach((file) => {
       if (file.status === "fulfilled") {
-        uploadedUrls.push(file.value.url);
+        uploadedUrls.push(encodeURI(file.value.url));
       }
     });
 
@@ -125,21 +117,9 @@ const FileInput: React.FC<FileInputProps> = ({
   };
 
   const handleUploadMore = async (files: File[]) => {
-    let filesToUpload: File[] = files;
-
-    const allowedFiles = filesToUpload.filter(
-      (file) =>
-        file &&
-        file.type &&
-        allowedFileExtensions.includes(file.name.split(".").pop() as TAllowedFileExtension)
-    );
-
-    if (allowedFiles.length < filesToUpload.length) {
-      if (allowedFiles.length === 0) {
-        toast.error("No files are supported");
-        return;
-      }
-      toast.error("Some files are not supported");
+    const allowedFiles = getAllowedFiles(files, allowedFileExtensions, maxSizeInMB);
+    if (allowedFiles.length === 0) {
+      return;
     }
 
     setSelectedFiles((prevFiles) => [
@@ -165,7 +145,7 @@ const FileInput: React.FC<FileInputProps> = ({
     const uploadedUrls: string[] = [];
     uploadedFiles.forEach((file) => {
       if (file.status === "fulfilled") {
-        uploadedUrls.push(file.value.url);
+        uploadedUrls.push(encodeURI(file.value.url));
       }
     });
 
@@ -199,6 +179,7 @@ const FileInput: React.FC<FileInputProps> = ({
                       src={file.url}
                       alt={file.name}
                       fill
+                      sizes="100%"
                       style={{ objectFit: "cover" }}
                       quality={100}
                       className={!file.uploaded ? "opacity-50" : ""}
@@ -253,6 +234,7 @@ const FileInput: React.FC<FileInputProps> = ({
                   src={selectedFiles[0].url}
                   alt={selectedFiles[0].name}
                   fill
+                  sizes="100%"
                   style={{ objectFit: imageFit }}
                   quality={100}
                   className={!selectedFiles[0].uploaded ? "opacity-50" : ""}

packages/ui/FileInput/lib/fileUpload.ts

@@ -1,6 +1,10 @@
 "use client";
 
-const uploadFile = async (
+import { toast } from "react-hot-toast";
+
+import { TAllowedFileExtension } from "@formbricks/types/common";
+
+export const uploadFile = async (
   file: File | Blob,
   allowedFileExtensions: string[] | undefined,
   environmentId: string | undefined
@@ -93,4 +97,43 @@ const uploadFile = async (
   }
 };
 
-export { uploadFile };
+export const getAllowedFiles = (
+  files: File[],
+  allowedFileExtensions: string[],
+  maxSizeInMB?: number
+): File[] => {
+  const sizeExceedFiles: string[] = [];
+  const unsupportedExtensionFiles: string[] = [];
+
+  const allowedFiles = files.filter((file) => {
+    if (!file || !file.type) {
+      return false;
+    }
+
+    const extension = file.name.split(".").pop();
+    const fileSizeInMB = file.size / 1000000; // Kb -> Mb
+
+    if (!allowedFileExtensions.includes(extension as TAllowedFileExtension)) {
+      unsupportedExtensionFiles.push(file.name);
+      return false; // Exclude file if extension not allowed
+    } else if (maxSizeInMB && fileSizeInMB > maxSizeInMB) {
+      sizeExceedFiles.push(file.name);
+      return false; // Exclude files larger than the maximum size
+    }
+
+    return true;
+  });
+
+  // Constructing toast messages based on the issues found
+  let toastMessage = "";
+  if (sizeExceedFiles.length > 0) {
+    toastMessage += `Files exceeding size limit (${maxSizeInMB} MB): ${sizeExceedFiles.join(", ")}. `;
+  }
+  if (unsupportedExtensionFiles.length > 0) {
+    toastMessage += `Unsupported file types: ${unsupportedExtensionFiles.join(", ")}.`;
+  }
+  if (toastMessage) {
+    toast.error(toastMessage);
+  }
+  return allowedFiles;
+};