show error on image upload

apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx

@@ -13,6 +13,11 @@ export const useAssetsState = (baseAssets: Array<Asset>) => {
   const [assets, setAssets] = useState<Asset[]>(baseAssets);
 
   useEffect(() => {
+    if (imageChanges?.errors) {
+      setAssets((currentAssets) =>
+        currentAssets.filter((asset) => asset.status !== "uploading")
+      );
+    }
     if (imageChanges?.uploadedAssets?.length) {
       setAssets((currentAssets) => [
         ...imageChanges.uploadedAssets,

apps/designer/app/routes/designer/$id.tsx

@@ -1,6 +1,7 @@
 import { useActionData, useLoaderData } from "@remix-run/react";
 import { ActionFunction, LoaderFunction } from "@remix-run/node";
 import type { Project, Asset } from "@webstudio-is/prisma-client";
+import { toast } from "@webstudio-is/design-system";
 import { Designer, links } from "~/designer";
 import * as db from "~/shared/db";
 import config from "~/config";
@@ -88,11 +89,12 @@ export const action: ActionFunction = async ({ request, params }) => {
 const DesignerRoute = () => {
   const actionData = useActionData();
   const data = useLoaderData<Data | Error>();
+
   if ("errors" in data) {
     return <ErrorMessage message={data.errors} />;
   }
   if (actionData && "errors" in actionData) {
-    return <ErrorMessage message={actionData.errors} />;
+    toast.error(actionData.errors, { id: "upload-error" });
   }
   return <Designer {...data} />;
 };

packages/asset-uploader/src/targets/s3/handler.ts

@@ -38,7 +38,7 @@ export const s3UploadHandler: S3UploadHandler = async ({
   const uint8Array = await getArrayBufferFromIterable(data);
 
   if (uint8Array.byteLength > maxPartSize) {
-    throw new Error(`Your asset cannot be bigger than ${MAX_UPLOAD_SIZE}mb`);
+    throw new Error(`Asset cannot be bigger than ${MAX_UPLOAD_SIZE}MB`);
   }
 
   const [name, extension] = getFilenameAndExtension(filename);

packages/asset-uploader/src/upload.ts

@@ -6,7 +6,6 @@ import { s3UploadHandler } from "./targets/s3/handler";
 import { uploadToS3 } from "./targets/s3/uploader";
 import { uploadToDisk } from "./targets/disk/upload";
 import { assetEnvVariables, s3EnvVariables } from "./schema";
-import { Asset } from "@webstudio-is/prisma-client";
 import { imageFsDirectory } from "./helpers/image-fs-path";
 
 const isS3Upload = s3EnvVariables.safeParse(process.env).success;
@@ -22,31 +21,42 @@ export const uploadAssets = async ({
 }: {
   request: Request;
   projectId: string;
-}): Promise<Asset[]> => {
-  const directory = await imageFsDirectory();
-  const formData = await unstable_parseMultipartFormData(
-    request,
-    isS3Upload
-      ? (file) =>
-          s3UploadHandler({
-            file,
+}) => {
+  try {
+    const directory = await imageFsDirectory();
+    const formData = await unstable_parseMultipartFormData(
+      request,
+      isS3Upload
+        ? (file) =>
+            s3UploadHandler({
+              file,
+              maxPartSize: MAX_UPLOAD_SIZE,
+            })
+        : unstable_createFileUploadHandler({
             maxPartSize: MAX_UPLOAD_SIZE,
+            directory,
+            file: ({ filename }) => filename,
           })
-      : unstable_createFileUploadHandler({
-          maxPartSize: MAX_UPLOAD_SIZE,
-          directory,
-          file: ({ filename }) => filename,
-        })
-  );
-  if (isS3Upload) {
-    return await uploadToS3({
-      projectId,
-      formData,
-    });
-  } else {
-    return await uploadToDisk({
-      projectId,
-      formData,
-    });
+    );
+    if (isS3Upload) {
+      return await uploadToS3({
+        projectId,
+        formData,
+      });
+    } else {
+      return await uploadToDisk({
+        projectId,
+        formData,
+      });
+    }
+  } catch (error) {
+    if ("maxBytes" in error) {
+      throw new Error(
+        `Asset cannot be bigger than ${commonUploadVars.MAX_UPLOAD_SIZE}MB`
+      );
+    }
+    if (error instanceof Error) {
+      throw new Error(error.message);
+    }
   }
 };