feat(storage-resize-images): copy metadata to resized image (#42)

Author: thatfiredev

storage-resize-images/POSTINSTALL.md

@@ -12,13 +12,24 @@ You can test out this extension right away:
 
 ### Using the extension
 
+You can upload images using the [Cloud Storage for Firebase SDK](https://firebase.google.com/docs/storage/) for your platform (iOS, Android, or Web). Alternatively, you can upload images directly in the Firebase console's Storage dashboard.
+
 When you upload an image file to `${param:IMG_BUCKET}`, this extension:
 
 - Creates resized image(s) with your specfied dimensions.
-- Stores the resized image(s) in the bucket `${param:IMG_BUCKET}` (and, if configured, under the path `${param:RESIZED_IMAGES_PATH}`).
 - Names resized image(s) using the same name as the original uploaded image, but suffixed with the specified width and height.
+- Stores the resized image(s) in the bucket `${param:IMG_BUCKET}` (and, if configured, under the path `${param:RESIZED_IMAGES_PATH}`).
 
-You can upload images using the [Cloud Storage for Firebase SDK](https://firebase.google.com/docs/storage/) for your platform (iOS, Android, or Web). Alternatively, you can upload images directly in the Firebase console's Storage dashboard.
+The extension also copies the following metadata, if present, from the original image to the resized image(s):
+
+- [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control)
+- [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)
+- [`Content-Encoding`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Encoding)
+- [`Content-Language`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Language)
+- [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)
+- [user-provided metadata](https://cloud.google.com/storage/docs/metadata#custom-metadata) (except Firebase storage download tokens)
+
+Note that if you configured the `Cache-Control header for resized images` param, the specified value will overwrite the value copied from the original image. Learn more about image metadata in the [Cloud Storage documentation](https://firebase.google.com/docs/storage/).
 
 ### Monitoring
 

storage-resize-images/PREINSTALL.md

@@ -3,12 +3,12 @@ Use this extension to create resized versions of an image uploaded to a Cloud St
 When you upload an image file to your specified Cloud Storage bucket, this extension:
 
 - Creates a resized image with your specified dimensions.
-- Stores the resized image in the same Storage bucket as the original uploaded image.
 - Names the resized image using the same name as the original uploaded image, but suffixed with your specified width and height.
+- Stores the resized image in the same Storage bucket as the original uploaded image.
 
 You can even configure the extension to create resized images of different dimensions for each original image upload. For example, you might want images that are 200x200, 400x400, and 680x680 - this extension can create these three resized images then store them in your bucket.
 
-Another optional feature of this extension is to specify a [`Cache-Control` header](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) for your resized image files.
+The extension automatically copies the following metadata, if present, from the original image to the resized image(s): `Cache-Control`, `Content-Disposition`, `Content-Encoding`, `Content-Language`, `Content-Type`, and user-provided metadata (except Firebase storage download tokens). Note that you can optionally configure the extension to overwrite the [`Cache-Control`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control) value for the resized image(s).
 
 #### Detailed configuration information
 

storage-resize-images/extension.yaml

@@ -144,9 +144,10 @@ params:
   - param: CACHE_CONTROL_HEADER
     label: Cache-Control header for resized images
     description: >
-      Do you want to specify a `Cache-Control` header for the resized image
-      files? Learn more about
-      [`Cache-Control` headers](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control).
-      If you prefer not to use a `Cache-Control` header, leave this field empty.
+      This extension automatically copies any `Cache-Control` metadata from the original image
+      to the resized images. For the resized images, do you want to overwrite this copied
+      `Cache-Control` metadata or add `Cache-Control` metadata? Learn more about
+      [`Cache-Control` headers](https://developer.mozilla.org/docs/Web/HTTP/Headers/Cache-Control).
+      If you prefer not to overwrite or add `Cache-Control` metadata, leave this field empty.
     example: max-age=86400
     required: false

storage-resize-images/functions/lib/config.js

@@ -20,5 +20,5 @@ exports.default = {
     cacheControlHeader: process.env.CACHE_CONTROL_HEADER,
     imageSizes: process.env.IMG_SIZES.split(","),
     resizedImagesPath: process.env.RESIZED_IMAGES_PATH,
-    deleteOriginalFile: process.env.DELETE_ORIGINAL_FILE,
+    deleteOriginalFile: process.env.DELETE_ORIGINAL_FILE === "true",
 };

storage-resize-images/functions/lib/index.js

@@ -58,6 +58,7 @@ exports.generateResizedImage = functions.storage.object().onFinalize((object) =>
     const fileName = path.basename(filePath);
     const fileExtension = path.extname(filePath);
     const fileNameWithoutExtension = fileName.slice(0, -fileExtension.length);
+    const objectMetadata = object;
     let originalFile;
     let remoteFile;
     try {
@@ -84,6 +85,7 @@ exports.generateResizedImage = functions.storage.object().onFinalize((object) =>
                 fileExtension,
                 contentType,
                 size,
+                objectMetadata: objectMetadata,
             }));
         });
         const results = yield Promise.all(tasks);
@@ -118,7 +120,7 @@ exports.generateResizedImage = functions.storage.object().onFinalize((object) =>
         }
     }
 }));
-const resizeImage = ({ bucket, originalFile, fileDir, fileNameWithoutExtension, fileExtension, contentType, size, }) => __awaiter(this, void 0, void 0, function* () {
+const resizeImage = ({ bucket, originalFile, fileDir, fileNameWithoutExtension, fileExtension, contentType, size, objectMetadata, }) => __awaiter(this, void 0, void 0, function* () {
     const resizedFileName = `${fileNameWithoutExtension}_${size}${fileExtension}`;
     // Path where resized image will be uploaded to in Storage.
     const resizedFilePath = path.normalize(config_1.default.resizedImagesPath
@@ -129,14 +131,20 @@ const resizeImage = ({ bucket, originalFile, fileDir, fileNameWithoutExtension,
         resizedFile = path.join(os.tmpdir(), resizedFileName);
         // Cloud Storage files.
         const metadata = {
+            contentDisposition: objectMetadata.contentDisposition,
+            contentEncoding: objectMetadata.contentEncoding,
+            contentLanguage: objectMetadata.contentLanguage,
             contentType: contentType,
-            metadata: {
-                resizedImage: "true",
-            },
+            metadata: objectMetadata.metadata,
         };
+        metadata.metadata.resizedImage = true;
         if (config_1.default.cacheControlHeader) {
             metadata.cacheControl = config_1.default.cacheControlHeader;
         }
+        else {
+            metadata.cacheControl = objectMetadata.cacheControl;
+        }
+        delete metadata.metadata.firebaseStorageDownloadTokens;
         // Generate a resized image using ImageMagick.
         logs.imageResizing(resizedFile, size);
         yield child_process_promise_1.spawn("convert", [originalFile, "-resize", `${size}>`, resizedFile], {

storage-resize-images/functions/src/index.ts

@@ -26,6 +26,7 @@ import * as path from "path";
 import config from "./config";
 import * as logs from "./logs";
 import * as validators from "./validators";
+import { ObjectMetadata } from "firebase-functions/lib/providers/storage";
 
 interface ResizedImageResult {
   size: string;
@@ -63,6 +64,7 @@ export const generateResizedImage = functions.storage.object().onFinalize(
     const fileName = path.basename(filePath);
     const fileExtension = path.extname(filePath);
     const fileNameWithoutExtension = fileName.slice(0, -fileExtension.length);
+    const objectMetadata = object;
 
     let originalFile;
     let remoteFile;
@@ -94,6 +96,7 @@ export const generateResizedImage = functions.storage.object().onFinalize(
             fileExtension,
             contentType,
             size,
+            objectMetadata: objectMetadata,
           })
         );
       });
@@ -138,6 +141,7 @@ const resizeImage = async ({
   fileExtension,
   contentType,
   size,
+  objectMetadata,
 }: {
   bucket: Bucket;
   originalFile: string;
@@ -146,6 +150,7 @@ const resizeImage = async ({
   fileExtension: string;
   contentType: string;
   size: string;
+  objectMetadata: ObjectMetadata;
 }): Promise<ResizedImageResult> => {
   const resizedFileName = `${fileNameWithoutExtension}_${size}${fileExtension}`;
   // Path where resized image will be uploaded to in Storage.
@@ -161,14 +166,19 @@ const resizeImage = async ({
 
     // Cloud Storage files.
     const metadata: any = {
+      contentDisposition: objectMetadata.contentDisposition,
+      contentEncoding: objectMetadata.contentEncoding,
+      contentLanguage: objectMetadata.contentLanguage,
       contentType: contentType,
-      metadata: {
-        resizedImage: "true",
-      },
+      metadata: objectMetadata.metadata,
     };
+    metadata.metadata.resizedImage = true;
     if (config.cacheControlHeader) {
       metadata.cacheControl = config.cacheControlHeader;
+    } else {
+      metadata.cacheControl = objectMetadata.cacheControl;
     }
+    delete metadata.metadata.firebaseStorageDownloadTokens;
 
     // Generate a resized image using ImageMagick.
     logs.imageResizing(resizedFile, size);