feat(store): add w=original support to fileSendTransformedImage, keep track of original image width and height

Author: dirkdev98

examples/file-handling/test/e2e.test.js

@@ -95,6 +95,26 @@ test("e2e", async (t) => {
     t.ok(blob.size > 5);
   });
 
+  t.test("retrieve original image", async (t) => {
+    const { posts } = await apiPostList(fetchFn);
+
+    const postWithImage = posts.find((it) => it.headerImage);
+
+    t.equal(postWithImage.headerImage.contentType, "image/jpeg");
+
+    const blob = await apiPostHeaderImage(
+      fetchFn,
+      {
+        id: postWithImage.id,
+      },
+      {
+        w: "original",
+      },
+    );
+
+    t.ok(blob.size > 5);
+  });
+
   t.test("teardown", async (t) => {
     server.close();
     await cleanupTestPostgresDatabase(sql);

gen/store.js

@@ -13,7 +13,7 @@ export function applyStoreStructure(generator) {
       )
       .keys({
         q: T.number().min(1).max(100).default(75),
-        w: T.number().min(1).max(99999),
+        w: T.anyOf().values(T.number().min(1).max(99999), "original"),
       })
       .loose(),
 
@@ -24,14 +24,16 @@ export function applyStoreStructure(generator) {
       .keys({
         accessToken: T.string(),
         q: T.number().min(1).max(100).default(75),
-        w: T.number().min(1).max(99999),
+        w: T.anyOf().values(T.number().min(1).max(99999), "original"),
       })
       .loose(),
 
     T.object("fileResponse").keys({
       id: T.uuid(),
       name: T.string(),
       contentType: T.string(),
+      originalWidth: T.number().optional(),
+      originalHeight: T.number().optional(),
       url: T.string(),
       placeholderImage: T.string().optional(),
       altText: T.string().optional(),
@@ -48,6 +50,8 @@ export function applyStoreStructure(generator) {
           .keys({
             transforms: T.any().optional(),
             transformedFromOriginal: T.string().optional(),
+            originalWidth: T.number().optional(),
+            originalHeight: T.number().optional(),
             placeholderImage: T.string().optional(),
             altText: T.string().optional(),
           })

packages/store/src/file-send.js

@@ -157,7 +157,8 @@ export async function fileSendTransformedImageResponse(
     acceptsWebp ? "webp" : acceptsAvif ? "avif" : "none"
   }-w${w}-q${q}`;
 
-  const loadedFile = file.meta?.transforms?.[transformKey];
+  const loadedFile =
+    w === "original" ? file.id : file.meta?.transforms?.[transformKey];
 
   if (!loadedFile) {
     await queueWorkerAddJob(sql, {

packages/store/src/file-send.test.js

@@ -160,6 +160,31 @@ test("store/file-send", async (t) => {
       }
     });
 
+    t.test("original", async (t) => {
+      await reloadFile();
+      const ctx = createKoaContext();
+
+      ctx.validatedQuery = {
+        w: "original",
+        q: 75,
+      };
+      ctx.req.headers["accept"] = "*/*";
+
+      await fileSendTransformedImageResponse(sql, s3Client, ctx, file);
+      await execFileJobs();
+
+      t.equal(ctx.res.getHeader("Content-Type"), "image/png");
+      t.equal(
+        Object.keys(file.meta.transforms ?? {}).length,
+        0,
+        "No transform is added.",
+      );
+
+      // Refetch should use the original again.
+      await fileSendTransformedImageResponse(sql, s3Client, ctx, file);
+      t.equal(ctx.res.getHeader("Content-Type"), "image/png");
+    });
+
     t.test("accept webp", async (t) => {
       await reloadFile();
       const ctx = createKoaContext();
@@ -175,6 +200,8 @@ test("store/file-send", async (t) => {
 
       t.equal(ctx.res.getHeader("Content-Type"), "image/png");
       t.ok(file.meta.transforms["compas-image-transform-webp-w10-q75"]);
+      t.equal(file.meta.originalWidth, 16);
+      t.equal(file.meta.originalHeight, 16);
 
       // Refetch should use the newly transformed image
       await fileSendTransformedImageResponse(sql, s3Client, ctx, file);

packages/store/src/file.js

@@ -288,6 +288,8 @@ export function fileFormatMetadata(file, options) {
     id: file.id,
     name: file.name,
     contentType: file.contentType,
+    originalWidth: file.meta?.originalWidth,
+    originalHeight: file.meta?.originalHeight,
     altText: file.meta?.altText,
     placeholderImage: file.meta?.placeholderImage,
     url: options.url,

packages/store/src/files-jobs.d.ts

@@ -14,8 +14,9 @@ export function jobFileCleanup(
   bucketName: string,
 ): import("./queue-worker.js").QueueWorkerHandler;
 /**
- * Returns a {@link QueueWorkerHandler} that generates a `meta.placeholderImage` for the
- * provided `fileId`. The `compas.file.generatePlaceholderImage` job is inserted when
+ * Returns a {@link QueueWorkerHandler} that populates `meta.width` and `meta.height`,
+ * and also generates a `meta.placeholderImage` for the provided `fileId`. The
+ * `compas.file.generatePlaceholderImage` job is inserted when
  * `fileCreateOrUpdate` is provided with the `schedulePlaceholderImageJob` option.
  *
  * @param {import("@aws-sdk/client-s3").S3Client} s3Client
@@ -28,7 +29,9 @@ export function jobFileGeneratePlaceholderImage(
 ): import("./queue-worker.js").QueueWorkerHandler;
 /**
  * Returns a {@link QueueWorkerHandler} that generates a trasnformed image for the
- * provided `fileId` and other settings. This job is inserted by {@link fileSendTransformedImageResponse} when it encounters an not yet transformed option combination.
+ * provided `fileId` and other settings. This job is inserted by
+ * {@link fileSendTransformedImageResponse} when it encounters an not yet transformed
+ * option combination.
  *
  * @param {import("@aws-sdk/client-s3").S3Client} s3Client
  * @returns {import("./queue-worker.js").QueueWorkerHandler}

packages/store/src/files-jobs.js

@@ -45,8 +45,9 @@ export function jobFileCleanup(s3Client, bucketName) {
 }
 
 /**
- * Returns a {@link QueueWorkerHandler} that generates a `meta.placeholderImage` for the
- * provided `fileId`. The `compas.file.generatePlaceholderImage` job is inserted when
+ * Returns a {@link QueueWorkerHandler} that populates `meta.width` and `meta.height`,
+ * and also generates a `meta.placeholderImage` for the provided `fileId`. The
+ * `compas.file.generatePlaceholderImage` job is inserted when
  * `fileCreateOrUpdate` is provided with the `schedulePlaceholderImageJob` option.
  *
  * @param {import("@aws-sdk/client-s3").S3Client} s3Client
@@ -91,35 +92,37 @@ export function jobFileGeneratePlaceholderImage(s3Client, bucketName) {
       return;
     }
 
-    const placeholderImageBuffer = await sharp(buffer)
-      .rotate()
+    const sharpInstance = sharp(buffer).rotate();
+    const metadata = await sharpInstance.metadata();
+
+    const placeholderImageBuffer = await sharpInstance
       .resize(10)
       .jpeg()
       .toBuffer();
 
-    await queries.fileUpdate(sql, {
-      update: {
-        meta: {
-          $set: {
-            path: ["placeholderImage"],
-            value: `data:image/jpeg;base64,${placeholderImageBuffer.toString(
-              "base64",
-            )}`,
-          },
-        },
-      },
-      where: {
-        id: file.id,
-      },
-    });
+    // Set placeholderImage, originalWidth and originalHeight atomically.
+    await query`UPDATE "file"
+                SET
+                  "meta" = jsonb_set(jsonb_set(
+                                       jsonb_set("meta", '{placeholderImage}', ${`"data:image/jpeg;base64,${placeholderImageBuffer.toString(
+                                         "base64",
+                                       )}"`}::jsonb), '{originalHeight}',
+                                       ${String(metadata.height)}::jsonb),
+                                     '{originalWidth}', ${String(
+                                       metadata.width,
+                                     )}::jsonb)
+                WHERE
+                  id = ${file.id}`.exec(sql);
 
     eventStop(event);
   };
 }
 
 /**
  * Returns a {@link QueueWorkerHandler} that generates a trasnformed image for the
- * provided `fileId` and other settings. This job is inserted by {@link fileSendTransformedImageResponse} when it encounters an not yet transformed option combination.
+ * provided `fileId` and other settings. This job is inserted by
+ * {@link fileSendTransformedImageResponse} when it encounters an not yet transformed
+ * option combination.
  *
  * @param {import("@aws-sdk/client-s3").S3Client} s3Client
  * @returns {import("./queue-worker.js").QueueWorkerHandler}
@@ -197,9 +200,14 @@ export function jobFileTransformImage(s3Client) {
     const sharpInstance = sharp(buffer);
     sharpInstance.rotate();
 
-    const { width: currentWidth } = await sharpInstance.metadata();
+    const metadataPromise = sharpInstance.metadata();
+
+    const originalWidth =
+      file.meta?.originalWidth ?? (await metadataPromise).width;
+    const originalHeight =
+      file.meta?.originalHeight ?? (await metadataPromise).height;
 
-    if (!isNil(currentWidth) && currentWidth > options.w) {
+    if (!isNil(originalWidth) && originalWidth > options.w) {
       // Only resize if width is greater than the needed with, so we don't upscale
       sharpInstance.resize(options.w);
     }
@@ -239,6 +247,22 @@ export function jobFileTransformImage(s3Client) {
     // @ts-expect-error
     await atomicSetTransformKey(sql, file.id, transformKey, image.id);
 
+    if (
+      (isNil(file.meta?.originalWidth) || isNil(file.meta?.originalHeight)) &&
+      !isNil(originalWidth) &&
+      !isNil(originalHeight)
+    ) {
+      // Update the original image to include the width and height.
+      await query`UPDATE "file"
+                  SET
+                    "meta" = jsonb_set(jsonb_set("meta", '{originalHeight}', ${String(
+                      originalHeight,
+                    )}::jsonb), '{originalWidth}',
+                                       ${String(originalWidth)}::jsonb)
+                  WHERE
+                    id = ${file.id}`.exec(sql);
+    }
+
     eventStop(event);
   };
 
@@ -257,10 +281,10 @@ export function jobFileTransformImage(s3Client) {
                   "meta" = jsonb_set(CASE
                                        WHEN coalesce("meta", '{}'::jsonb) ? 'transforms'
                                          THEN "meta"
-                                       ELSE jsonb_set(coalesce("meta", '{}'::jsonb), '{transforms}', '{}'::jsonb) END,
-                                     ${`{transforms,${transformKey}}`}, ${JSON.stringify(
-      newFileId,
-    )}),
+                                       ELSE jsonb_set(coalesce("meta", '{}'::jsonb),
+                                                      '{transforms}', '{}'::jsonb) END,
+                                     ${`{transforms,${transformKey}}`},
+                                     ${JSON.stringify(newFileId)}),
                   "updatedAt" = now()
                 WHERE
                   id = ${fileId}`.exec(sql);

packages/store/src/files-jobs.test.js

@@ -67,6 +67,8 @@ test("store/files-jobs", (t) => {
       },
     }).exec(sql);
 
+    t.ok(reloadedFile.meta.originalWidth);
+    t.ok(reloadedFile.meta.originalHeight);
     t.ok(reloadedFile.meta.placeholderImage);
     t.ok(
       reloadedFile.meta.placeholderImage.startsWith("data:image/jpeg;base64,"),