diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx index df64934c85..82d0e7f4d7 100644 --- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx +++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager.tsx @@ -13,6 +13,11 @@ export const useAssetsState = (baseAssets: Array) => { const [assets, setAssets] = useState(baseAssets); useEffect(() => { + if (imageChanges?.errors) { + setAssets((currentAssets) => + currentAssets.filter((asset) => asset.status !== "uploading") + ); + } if (imageChanges?.uploadedAssets?.length) { setAssets((currentAssets) => [ ...imageChanges.uploadedAssets, diff --git a/apps/designer/app/routes/designer/$id.tsx b/apps/designer/app/routes/designer/$id.tsx index 40fb5a4597..95d59275dc 100644 --- a/apps/designer/app/routes/designer/$id.tsx +++ b/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(); + if ("errors" in data) { return ; } if (actionData && "errors" in actionData) { - return ; + toast.error(actionData.errors, { id: "upload-error" }); } return ; }; diff --git a/packages/asset-uploader/src/targets/s3/handler.ts b/packages/asset-uploader/src/targets/s3/handler.ts index 24440b0050..ff5d45afff 100644 --- a/packages/asset-uploader/src/targets/s3/handler.ts +++ b/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); diff --git a/packages/asset-uploader/src/upload.ts b/packages/asset-uploader/src/upload.ts index cd1c26af61..8ba2129503 100644 --- a/packages/asset-uploader/src/upload.ts +++ b/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 => { - 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); + } } };