fix: show proper error when dropping a too big file (#5385)

Fixes #5326

Author: TrySound

apps/builder/app/builder/shared/assets/asset-upload.tsx

@@ -14,17 +14,13 @@ import { imageMimeTypes } from "./asset-utils";
 
 const maxSize = toBytes(MAX_UPLOAD_SIZE);
 
-const getFilesFromInput = (_type: AssetType, input: HTMLInputElement) => {
-  const files = Array.from(input?.files ?? []);
-
+export const validateFiles = (files: File[]) => {
   const exceedSizeFiles = files.filter((file) => file.size > maxSize);
-
   for (const file of exceedSizeFiles) {
     toast.error(
       `Asset "${file.name}" cannot be bigger than ${MAX_UPLOAD_SIZE}MB`
     );
   }
-
   return files.filter((file) => file.size <= maxSize);
 };
 
@@ -37,7 +33,7 @@ const useUpload = (type: AssetType) => {
     if (input === null) {
       return;
     }
-    const files = getFilesFromInput(type, input);
+    const files = validateFiles(Array.from(input?.files ?? []));
     uploadAssets(type, files);
     form.reset();
   };

apps/builder/app/builder/shared/assets/assets-shell.tsx

@@ -13,7 +13,7 @@ import {
   Text,
   theme,
 } from "@webstudio-is/design-system";
-import { AssetUpload, acceptUploadType } from "./asset-upload";
+import { AssetUpload, acceptUploadType, validateFiles } from "./asset-upload";
 import { NotFound } from "./not-found";
 import { Separator } from "./separator";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
@@ -129,7 +129,7 @@ export const AssetsShell = ({
               )
           );
 
-          const droppedFiles = await getFiles({ source });
+          const droppedFiles = validateFiles(getFiles({ source }));
 
           const files = droppedFiles
             .filter((file) => file != null)

apps/builder/package.json

@@ -18,8 +18,8 @@
     "test": "vitest run"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.5.2",
-    "@bomb.sh/args": "^0.3.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
+    "@bomb.sh/args": "^0.3.1",
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/lang-css": "^6.3.1",

packages/design-system/package.json

@@ -25,7 +25,7 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.5.2",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@floating-ui/dom": "^1.6.13",