Add more image info to DB

.github/workflows/main.yml

@@ -15,6 +15,6 @@ jobs:
       - name: Checkout repo
         uses: actions/checkout@v2
       - run: yarn install
-
+      - run: yarn prisma generate
       - run: yarn checks
       - run: yarn build

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

@@ -1,37 +1,34 @@
 import { ImageIcon } from "~/shared/icons";
 import { Button, Flex, Grid, Heading } from "~/shared/design-system";
 import { useRef } from "react";
-import { Form } from "@remix-run/react";
+import { Form, useSubmit } from "@remix-run/react";
 import { type Asset } from "@webstudio-is/react-sdk";
 import { Image } from "~/shared/design-system/components/image";
 
 export const TabContent = ({ assets }: { assets: Array<Asset> }) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
-  const submitButtonRef = useRef<HTMLButtonElement | null>(null);
-
-  const onChange = () => {
-    if (submitButtonRef.current) {
-      submitButtonRef.current.click();
-    }
-  };
+  const submit = useSubmit();
 
   return (
     <Flex gap="3" direction="column" css={{ padding: "$1" }}>
       <Flex justify="between">
         <Heading>Assets</Heading>
-        <Form method="post" encType="multipart/form-data">
+        <Form
+          method="post"
+          encType="multipart/form-data"
+          onChange={(event) => {
+            if (inputRef.current?.files) {
+              submit(event.currentTarget);
+              event.currentTarget.reset();
+            }
+          }}
+        >
           <input
             accept="image/*"
             type="file"
             name="image"
             multiple
             ref={inputRef}
-            onChange={onChange}
-            style={{ display: "none" }}
-          />
-          <button
-            ref={submitButtonRef}
-            type="submit"
             style={{ display: "none" }}
           />
           <Button onClick={() => inputRef?.current?.click()}>

apps/designer/app/designer/features/sidebar-left/panels/index.ts

@@ -1,5 +1,5 @@
 import * as components from "./components";
 import * as tree from "./tree";
-import * as imageUpload from "./image-upload";
+import * as assetManager from "./asset-manager";
 
-export const panels = { components, tree, imageUpload } as const;
+export const panels = { components, tree, assetManager } as const;

apps/designer/app/designer/features/sidebar-left/sidebar-left.tsx

@@ -68,7 +68,7 @@ export const SidebarLeft = ({
   const enabledPanels = (
     isFeatureEnabled("assets")
       ? Object.keys(panels)
-      : Object.keys(panels).filter((panel) => panel !== "imageUpload")
+      : Object.keys(panels).filter((panel) => panel !== "assetManager")
   ) as Array<TabName>;
 
   return (

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

@@ -37,12 +37,10 @@ type Error = {
 
 export const action: ActionFunction = async ({ request, params }) => {
   if (params.id === undefined) throw new Error("Project id undefined");
-
   const uploads = path.join(__dirname, "../public");
   const folderInPublic =
     process.env.FILE_UPLOAD_PATH || config.defaultUploadPath;
   const directory = path.join(uploads, folderInPublic);
-
   try {
     const formData = await unstable_parseMultipartFormData(
       request,
@@ -54,16 +52,24 @@ export const action: ActionFunction = async ({ request, params }) => {
     );
 
     const imagesInfo = ImagesUpload.parse(formData.getAll("image"));
-    imagesInfo.forEach((image) => {
+
+    const allInfo = imagesInfo.map(async (image) => {
+      const arrayBuffer = await image.arrayBuffer();
       const data = {
-        type: image.type,
         name: image.name,
-        path: `${path.join("/", folderInPublic, image.name)}`,
+        path: path.join("/", folderInPublic, image.name),
+        size: image.size,
+        arrayBuffer,
       };
+
       const projectId = params.id as string;
-      db.assets.create(projectId, data);
+      const newAsset = await db.assets.create(projectId, data);
+
+      return newAsset;
     });
 
+    await Promise.all(allInfo);
+
     return {
       ok: true,
     };

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

@@ -1,5 +1,6 @@
 import { type Project } from "@webstudio-is/react-sdk";
-import { prisma } from "./prisma.server";
+import { prisma, Prisma } from "./prisma.server";
+import sharp from "sharp";
 
 export const loadByProject = async (projectId?: Project["id"]) => {
   if (typeof projectId !== "string") {
@@ -8,18 +9,31 @@ export const loadByProject = async (projectId?: Project["id"]) => {
 
   const assets = await prisma.asset.findMany({
     where: { projectId },
+    orderBy: {
+      createdAt: "desc",
+    },
   });
 
   return assets;
 };
 
 export const create = async (
   projectId: Project["id"],
-  values: { type: string; name: string; path: string }
+  values: { name: string; path: string; size: number; arrayBuffer: ArrayBuffer }
 ) => {
+  // there is an issue in the @types/sharp, it also accepts array buffers
+  const image = sharp(values.arrayBuffer as Uint8Array);
+  const metadata = await image.metadata();
   const newAsset = await prisma.asset.create({
     data: {
-      ...values,
+      name: values.name,
+      path: values.path,
+      size: values.size,
+      format: metadata.format,
+      ...(metadata.width ? { width: new Prisma.Decimal(metadata.width) } : {}),
+      ...(metadata.height
+        ? { height: new Prisma.Decimal(metadata.height) }
+        : {}),
       projectId,
     },
   });

apps/designer/package.json

@@ -86,6 +86,7 @@
     "remix-auth-form": "^1.1.2",
     "remix-auth-github": "^1.1.1",
     "remix-auth-google": "^1.1.0",
+    "sharp": "^0.30.7",
     "slugify": "^1.6.5"
   },
   "devDependencies": {
@@ -116,6 +117,7 @@
     "@types/react": "^17.0.24",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^17.0.9",
+    "@types/sharp": "^0.30.4",
     "@types/w3c-css-typed-object-model-level-1": "^20180410.0.4",
     "babel-loader": "^8.2.5",
     "css-tree": "^2.0.4",

apps/designer/prisma/migrations/20220716191150_add_more_info_to_asset/migration.sql

@@ -0,0 +1,16 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `type` on the `Asset` table. All the data in the column will be lost.
+  - Added the required column `format` to the `Asset` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `height` to the `Asset` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `size` to the `Asset` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `width` to the `Asset` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Asset" DROP COLUMN "type",
+ADD COLUMN     "format" TEXT NOT NULL,
+ADD COLUMN     "height" INTEGER NOT NULL,
+ADD COLUMN     "size" INTEGER NOT NULL,
+ADD COLUMN     "width" INTEGER NOT NULL;

apps/designer/prisma/migrations/20220716192051_make_metadata_not_mandatory/migration.sql

@@ -0,0 +1,4 @@
+-- AlterTable
+ALTER TABLE "Asset" ALTER COLUMN "format" DROP NOT NULL,
+ALTER COLUMN "height" DROP NOT NULL,
+ALTER COLUMN "width" DROP NOT NULL;

apps/designer/prisma/migrations/20220717152939_make_width_and_height_float/migration.sql

@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "Asset" ALTER COLUMN "height" SET DATA TYPE DOUBLE PRECISION,
+ALTER COLUMN "width" SET DATA TYPE DOUBLE PRECISION;

apps/designer/prisma/migrations/20220717193140_make_width_and_height_decimal/migration.sql

@@ -0,0 +1,10 @@
+/*
+  Warnings:
+
+  - You are about to alter the column `height` on the `Asset` table. The data in that column could be lost. The data in that column will be cast from `DoublePrecision` to `Decimal(65,30)`.
+  - You are about to alter the column `width` on the `Asset` table. The data in that column could be lost. The data in that column will be cast from `DoublePrecision` to `Decimal(65,30)`.
+
+*/
+-- AlterTable
+ALTER TABLE "Asset" ALTER COLUMN "height" SET DATA TYPE DECIMAL(65,30),
+ALTER COLUMN "width" SET DATA TYPE DECIMAL(65,30);

apps/designer/prisma/schema.prisma

@@ -19,7 +19,10 @@ model Asset {
   id        String   @id @default(uuid())
   project   Project  @relation(fields: [projectId], references: [id])
   projectId String
-  type      String
+  format    String?
+  size      Int
+  width     Decimal?
+  height    Decimal?
   name      String
   path      String
   alt       String?

packages/webstudio-react-sdk/prisma/schema.prisma

@@ -19,7 +19,10 @@ model Asset {
   id        String   @id @default(uuid())
   project   Project  @relation(fields: [projectId], references: [id])
   projectId String
-  type      String
+  format    String?
+  size      Int
+  width     Decimal?
+  height    Decimal?
   name      String
   path      String
   alt       String?