clean up fetching info

apps/designer/app/designer/features/sidebar-left/types.ts

@@ -1,12 +1,10 @@
 import { panels } from "./panels";
 import { z } from "zod";
+import { NodeOnDiskFile } from "@remix-run/node";
 
 export type TabName = keyof typeof panels | "none";
 
-const SingleImageInUpload = z.object({
-  name: z.string(),
-  type: z.string(),
-});
+const SingleImageInUpload = z.instanceof(NodeOnDiskFile);
 
 export const ImagesUpload = z.array(SingleImageInUpload);
 

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

@@ -53,14 +53,15 @@ export const action: ActionFunction = async ({ request, params }) => {
 
     const imagesInfo = ImagesUpload.parse(formData.getAll("image"));
 
-    const allInfo = imagesInfo.map(async (image) => {
+    const allInfo = imagesInfo.map(async (image, i) => {
       const data = {
         name: image.name,
         path: path.join("/", folderInPublic, image.name),
+        size: image.size,
       };
-      const absolutePath = path.join(directory, image.name);
+      const arrayBuffer = await image.arrayBuffer();
       const projectId = params.id as string;
-      const newAsset = await db.assets.create(projectId, data, absolutePath);
+      const newAsset = await db.assets.create(projectId, data, arrayBuffer);
 
       return newAsset;
     });
@@ -71,6 +72,7 @@ export const action: ActionFunction = async ({ request, params }) => {
       ok: true,
     };
   } catch (error) {
+    console.log(error);
     if (error instanceof Error) {
       return {
         errors: error.message,

apps/designer/app/shared/db/assets.server.ts

@@ -1,8 +1,6 @@
 import { type Project } from "@webstudio-is/react-sdk";
 import { prisma } from "./prisma.server";
 import sharp from "sharp";
-import fsPromises from "fs/promises";
-import { fetch } from "@remix-run/node";
 
 export const loadByProject = async (projectId?: Project["id"]) => {
   if (typeof projectId !== "string") {
@@ -18,27 +16,14 @@ export const loadByProject = async (projectId?: Project["id"]) => {
 
 export const create = async (
   projectId: Project["id"],
-  values: { name: string; path: string },
-  absolutePath?: string
+  values: { name: string; path: string; size: number },
+  arrayBuffer: Uint8Array
 ) => {
-  let size = 0;
-  const image = await sharp(absolutePath);
+  const image = sharp(arrayBuffer);
   const metadata = await image.metadata();
-
-  // if there is no absolute path then it means it's a remote image and we can use fetch
-  if (absolutePath) {
-    size = await (await fsPromises.stat(absolutePath)).size;
-  } else {
-    const arrayBuffer = await fetch(values.path).then((rsp) =>
-      rsp.arrayBuffer()
-    );
-    size = arrayBuffer.byteLength;
-  }
-
   const newAsset = await prisma.asset.create({
     data: {
       ...values,
-      size,
       format: metadata.format,
       ...(metadata.width ? { width: Math.round(metadata.width) } : {}),
       ...(metadata.height ? { height: Math.round(metadata.height) } : {}),