fix: ensures that proper Content-Type headers are set on pass-through static files

Author: jmikrut

dev/package.json

@@ -16,7 +16,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.142.0",
     "@azure/storage-blob": "^12.11.0",
-    "@google-cloud/storage": "^6.4.1",
+    "@google-cloud/storage": "^6.4.2",
     "dotenv": "^8.2.0",
     "express": "^4.17.1",
     "payload": "^1.0.27"

dev/src/collections/Users.ts

@@ -3,14 +3,20 @@ import type { CollectionConfig } from 'payload/types'
 const Users: CollectionConfig = {
   slug: 'users',
   auth: true,
-  admin: {
-    useAsTitle: 'upn',
-  },
   access: {
     read: () => true,
   },
   fields: [
-    // no fields in this demo necessary
+    {
+      name: 'avatar',
+      type: 'upload',
+      relationTo: 'media',
+    },
+    {
+      name: 'background',
+      type: 'upload',
+      relationTo: 'media',
+    },
   ],
 }
 

dev/src/payload.config.ts

@@ -24,6 +24,7 @@ if (process.env.PAYLOAD_PUBLIC_CLOUD_STORAGE_ADAPTER === 's3') {
     config: {
       endpoint: process.env.S3_ENDPOINT,
       forcePathStyle: process.env.S3_FORCE_PATH_STYLE === 'true',
+      region: process.env.S3_REGION,
       credentials: {
         accessKeyId: process.env.S3_ACCESS_KEY_ID,
         secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,

dev/yarn.lock

@@ -2254,10 +2254,10 @@
   resolved "https://registry.yarnpkg.com/@google-cloud/promisify/-/promisify-3.0.0.tgz#5cd6941fc30c4acac18051706aa5af96069bd3e3"
   integrity sha512-91ArYvRgXWb73YvEOBMmOcJc0bDRs5yiVHnqkwoG0f3nm7nZuipllz6e7BvFESBvjkDTBC0zMD8QxedUwNLc1A==
 
-"@google-cloud/storage@^6.4.1":
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/@google-cloud/storage/-/storage-6.4.1.tgz#83334150d4e224cb48691de4d7f9c38e143a0970"
-  integrity sha512-lAddmRJ8tvxPykUqJfONBQA5XGwGk0vut1POXublc64+nCdB5aQMxwuBMf7J1zubx19QGpYPQwW6wR7YTWrvLw==
+"@google-cloud/storage@^6.4.2":
+  version "6.4.2"
+  resolved "https://registry.npmjs.org/@google-cloud/storage/-/storage-6.4.2.tgz#e81bfdda64e88d7b06668287d31119804cad988a"
+  integrity sha512-rnwx++XIxy63t1CREGlY2+H+tvuvYmkiIqJdq0IRzGaah9bDetV+qJVl5Mvi5aPhgoqn3UNnKGv9SPcETimFgw==
   dependencies:
     "@google-cloud/paginator" "^3.0.7"
     "@google-cloud/projectify" "^3.0.0"

src/adapters/azure/staticHandler.ts

@@ -10,10 +10,16 @@ export const getHandler = ({ containerClient }: Args): StaticHandler => {
     try {
       const blockBlobClient = containerClient.getBlockBlobClient(req.params.filename)
 
-      const downloadBlockBlobResponse = await blockBlobClient.download(0)
+      const blob = await blockBlobClient.download(0)
 
-      if (downloadBlockBlobResponse?.readableStreamBody) {
-        return downloadBlockBlobResponse.readableStreamBody.pipe(res)
+      res.set({
+        'Content-Length': blob.contentLanguage,
+        'Content-Type': blob.contentType,
+        ETag: blob.etag,
+      })
+
+      if (blob?.readableStreamBody) {
+        return blob.readableStreamBody.pipe(res)
       }
 
       return next()

src/adapters/gcs/handleUpload.ts

@@ -1,4 +1,4 @@
-import { Storage } from '@google-cloud/storage'
+import type { Storage } from '@google-cloud/storage'
 import type { CollectionConfig } from 'payload/types'
 import type { HandleUpload } from '../../types'
 
@@ -13,8 +13,11 @@ export const getHandleUpload = ({ gcs, bucket, acl }: Args): HandleUpload => {
   return async ({ data, file }) => {
     const gcsFile = gcs.bucket(bucket).file(file.filename)
     await gcsFile.save(file.buffer, {
-      contentType: file.mimeType,
+      metadata: {
+        contentType: file.mimeType,
+      },
     })
+
     if (acl) {
       await gcsFile[`make${acl}`]()
     }

src/adapters/gcs/staticHandler.ts

@@ -1,4 +1,4 @@
-import { Storage } from '@google-cloud/storage'
+import type { Storage } from '@google-cloud/storage'
 import type { StaticHandler } from '../../types'
 
 interface Args {
@@ -9,7 +9,17 @@ interface Args {
 export const getHandler = ({ gcs, bucket }: Args): StaticHandler => {
   return async (req, res, next) => {
     try {
-      return gcs.bucket(bucket).file(req.params.filename).createReadStream().pipe(res)
+      const file = gcs.bucket(bucket).file(req.params.filename)
+
+      const [metadata] = await file.getMetadata()
+
+      res.set({
+        'Content-Length': metadata.contentType,
+        'Content-Type': metadata.contentLength,
+        ETag: metadata.etag,
+      })
+
+      return file.createReadStream().pipe(res)
     } catch (err: unknown) {
       return next()
     }

src/adapters/s3/mock.js

@@ -1,3 +1,7 @@
 exports.S3 = function () {
   return null
 }
+
+exports.HeadObjectCommand = function () {
+  return null
+}

src/adapters/s3/staticHandler.ts

@@ -9,18 +9,27 @@ interface Args {
 
 export const getHandler = ({ s3, bucket }: Args): StaticHandler => {
   return async (req, res, next) => {
+    const params = {
+      Bucket: bucket,
+      Key: req.params.filename,
+    }
+
     try {
-      const response = await s3.getObject({
-        Bucket: bucket,
-        Key: req.params.filename,
+      const object = await s3.getObject(params)
+
+      res.set({
+        'Content-Length': object.ContentLength,
+        'Content-Type': object.ContentType,
+        ETag: object.ETag,
       })
 
-      if (response?.Body) {
-        return (response.Body as Readable).pipe(res)
+      if (object?.Body) {
+        return (object.Body as Readable).pipe(res)
       }
 
       return next()
     } catch (err: unknown) {
+      req.payload.logger.error(err)
       return next()
     }
   }