Support for GCS URIs in image resolver

Author: kberezin-nshl

.changeset/beige-carpets-visit.md

@@ -0,0 +1,5 @@
+---
+'@nutshelllabs/image': major
+---
+
+Support for GS URIs in image resolving

packages/image/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
+    "@google-cloud/storage": "^7.15.0",
     "@nutshelllabs/png-js": "^2.2.1",
     "cross-fetch": "^3.1.5"
   },

packages/image/src/resolve.js

@@ -3,12 +3,32 @@ import url from 'url';
 import path from 'path';
 import fetch from 'cross-fetch';
 
+import { Storage, File } from '@google-cloud/storage';
 import PNG from './png';
 import JPEG from './jpeg';
 import createCache from './cache';
 
 export const IMAGE_CACHE = createCache({ limit: 30 });
 
+const createGcsStorage = emulatorHost => {
+  if (emulatorHost) {
+    return new Storage({
+      apiEndpoint: `http://${emulatorHost}`,
+      customEndpoint: true,
+    });
+  }
+
+  return new Storage();
+};
+
+let storage;
+
+export const configureStorage = (
+  emulatorHost = process.env.GCS_EMULATOR_HOST,
+) => {
+  storage = createGcsStorage(emulatorHost);
+};
+
 const getAbsoluteLocalPath = src => {
   if (BROWSER) {
     throw new Error('Cannot check local paths in client-side environment');
@@ -143,13 +163,30 @@ const getImageFormat = body => {
   return extension;
 };
 
+const resolveImageFromGcs = async uri => {
+  if (BROWSER) {
+    throw new Error('Cannot download from GCS in client-side environment');
+  }
+
+  if (!storage) {
+    configureStorage();
+  }
+
+  const response = await File.from(uri, storage).download();
+  return response[0];
+};
+
 const resolveImageFromUrl = async src => {
   const { uri, body, headers, method = 'GET' } = src;
 
-  const data =
-    !BROWSER && getAbsoluteLocalPath(uri)
-      ? await fetchLocalFile(uri)
+  let data;
+  if (!BROWSER && getAbsoluteLocalPath(uri)) {
+    data = await fetchLocalFile(uri);
+  } else {
+    data = uri.startsWith('gs://')
+      ? await resolveImageFromGcs(uri)
       : await fetchRemoteFile(uri, { body, headers, method });
+  }
 
   const extension = getImageFormat(data);
 

packages/image/tests/resolve.test.js

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 
-import resolveImage, { IMAGE_CACHE } from '../src/resolve';
+import resolveImage, { IMAGE_CACHE, configureStorage } from '../src/resolve';
 
 const jpgImageUrl = 'https://react-pdf.org/static/images/quijote1.jpg';
 const pngImageUrl = 'https://react-pdf.org/static/images/quijote2.png';
@@ -70,6 +70,18 @@ describe('image resolveImage', () => {
     expect(image.height).toBeGreaterThan(0);
   });
 
+  test.skip('[Manual] Should render a png image from GCS', async () => {
+    configureStorage('localhost:4443');
+
+    const gcsImageUrl =
+      'gs://irisflow_input/1/1/brokerage_statement/e3eec7c7-96ff-4825-9485-06decad51544/test.jpg';
+    const image = await resolveImage({ uri: gcsImageUrl });
+
+    expect(image.data).toBeTruthy();
+    expect(image.width).toBeGreaterThan(0);
+    expect(image.height).toBeGreaterThan(0);
+  });
+
   test('Should render a local image from src object', async () => {
     const image = await resolveImage({
       uri: './packages/layout/tests/assets/test.jpg',