fix(storage-azure): fix azure storage mime type handling for streaming uploads (#15949)

The fix itself is quite simple, the code was just missing the content
type header when uploading via streams.

I think the actual code review is more about the testing. I'm not sure
if I did everything right.
I've duplicated the current azure storage tests and made sure to run
them with `useTempFiles: true` which causes all uploads to be streaming
uploads. I've also added the test for the mime type handling to the
original test suite just to be sure that it is also tested for
non-streaming uploads.

closes #15948

Author: swenzel-arc

packages/storage-azure/src/handleUpload.ts

@@ -35,6 +35,7 @@ export const getHandleUpload = ({ getStorageClient, prefix = '' }: Args): Handle
 
     await blockBlobClient.uploadStream(fileBufferOrStream, 4 * 1024 * 1024, 4, {
       abortSignal: AbortController.timeout(30 * 60 * 1000),
+      blobHTTPHeaders: { blobContentType: file.mimeType },
     })
 
     return data

test/storage-azure/int.spec.ts

@@ -2,6 +2,7 @@ import type { ContainerClient } from '@azure/storage-blob'
 import type { CollectionSlug, Payload } from 'payload'
 
 import { BlobServiceClient } from '@azure/storage-blob'
+import { readFile } from 'node:fs/promises'
 import path from 'path'
 import { fileURLToPath } from 'url'
 import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest'
@@ -42,6 +43,20 @@ describe('@payloadcms/storage-azure', () => {
     await clearContainer()
   })
 
+  it('preserves mime type when uploaded via rest endpoint', async () => {
+    const fileBuffer = await readFile(`${dirname}/../uploads/image.png`)
+
+    const data = new FormData()
+    data.append('file', new Blob([fileBuffer], { type: 'image/png' }), 'image2.png')
+    const newMedia: { doc: { url: string } } = await (
+      await restClient.POST('/media', {
+        body: data,
+      })
+    ).json()
+    const response = await restClient.GET(newMedia.doc.url.replace(/^\/api/, '') as `/${string}`)
+    expect(response.headers.get('content-type')).toEqual('image/png')
+  })
+
   it('can upload', async () => {
     const upload = await payload.create({
       collection: mediaSlug,

test/storage-azure/streamingUploads.config.ts

@@ -0,0 +1,58 @@
+import { azureStorage } from '@payloadcms/storage-azure'
+import dotenv from 'dotenv'
+import { fileURLToPath } from 'node:url'
+import path from 'path'
+
+import { buildConfigWithDefaults } from '../buildConfigWithDefaults.js'
+import { devUser } from '../credentials.js'
+import { Media } from './collections/Media.js'
+import { MediaWithPrefix } from './collections/MediaWithPrefix.js'
+import { Users } from './collections/Users.js'
+import { mediaSlug, mediaWithPrefixSlug, prefix } from './shared.js'
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+let uploadOptions
+
+// Load config to work with emulated services
+dotenv.config({
+  path: path.resolve(dirname, '../plugin-cloud-storage/.env.emulated'),
+})
+
+export default buildConfigWithDefaults({
+  admin: {
+    importMap: {
+      baseDir: path.resolve(dirname),
+    },
+  },
+  collections: [Media, MediaWithPrefix, Users],
+  onInit: async (payload) => {
+    await payload.create({
+      collection: 'users',
+      data: {
+        email: devUser.email,
+        password: devUser.password,
+      },
+    })
+  },
+  plugins: [
+    azureStorage({
+      collections: {
+        [mediaSlug]: true,
+        [mediaWithPrefixSlug]: {
+          prefix,
+        },
+      },
+      allowContainerCreate: process.env.AZURE_STORAGE_ALLOW_CONTAINER_CREATE === 'true',
+      baseURL: process.env.AZURE_STORAGE_ACCOUNT_BASEURL,
+      connectionString: process.env.AZURE_STORAGE_CONNECTION_STRING,
+      containerName: process.env.AZURE_STORAGE_CONTAINER_NAME,
+    }),
+  ],
+  upload: {
+    useTempFiles: true,
+  },
+  typescript: {
+    outputFile: path.resolve(dirname, 'payload-types.ts'),
+  },
+})

test/storage-azure/streamingUploads.int.spec.ts

@@ -0,0 +1,137 @@
+import type { ContainerClient } from '@azure/storage-blob'
+import type { CollectionSlug, Payload } from 'payload'
+
+import { BlobServiceClient } from '@azure/storage-blob'
+import { readFile } from 'node:fs/promises'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { afterAll, afterEach, beforeAll, describe, expect, it } from 'vitest'
+
+import type { NextRESTClient } from '../__helpers/shared/NextRESTClient.js'
+
+import { initPayloadInt } from '../__helpers/shared/initPayloadInt.js'
+import { mediaSlug, mediaWithPrefixSlug, prefix } from './shared.js'
+
+const filename = fileURLToPath(import.meta.url)
+const dirname = path.dirname(filename)
+
+let restClient: NextRESTClient
+let payload: Payload
+
+describe('@payloadcms/storage-azure streamingUploads', () => {
+  let TEST_CONTAINER: string
+  let client: ContainerClient
+
+  beforeAll(async () => {
+    ;({ payload, restClient } = await initPayloadInt(
+      dirname,
+      undefined,
+      undefined,
+      path.resolve(dirname, 'streamingUploads.config.ts'),
+    ))
+    TEST_CONTAINER = process.env.AZURE_STORAGE_CONTAINER_NAME!
+
+    const blobServiceClient = BlobServiceClient.fromConnectionString(
+      process.env.AZURE_STORAGE_CONNECTION_STRING!,
+    )
+    client = blobServiceClient.getContainerClient(TEST_CONTAINER)
+
+    await client.createIfNotExists()
+    await clearContainer()
+  }, 90000)
+
+  afterAll(async () => {
+    await payload.destroy()
+  })
+
+  afterEach(async () => {
+    await clearContainer()
+  })
+
+  it('preserves mime type when uploaded via rest endpoint', async () => {
+    const fileBuffer = await readFile(path.resolve(dirname, '../uploads/image.png'))
+
+    const data = new FormData()
+    data.append('file', new Blob([fileBuffer], { type: 'image/png' }), 'image1.png')
+    const newMedia: { doc: { url: string } } = await (
+      await restClient.POST('/media', {
+        body: data,
+      })
+    ).json()
+    const response = await restClient.GET(newMedia.doc.url.replace(/^\/api/, '') as `/${string}`)
+    expect(response.headers.get('content-type')).toEqual('image/png')
+  })
+
+  it('can upload', async () => {
+    const upload = await payload.create({
+      collection: mediaSlug,
+      data: {},
+      filePath: path.resolve(dirname, '../uploads/image.png'),
+    })
+
+    expect(upload.id).toBeTruthy()
+    await verifyUploads({ collectionSlug: mediaSlug, uploadId: upload.id })
+    expect(upload.url).toEqual(`/api/${mediaSlug}/file/${String(upload.filename)}`)
+  })
+
+  it('can upload with prefix', async () => {
+    const upload = await payload.create({
+      collection: mediaWithPrefixSlug,
+      data: {},
+      filePath: path.resolve(dirname, '../uploads/image.png'),
+    })
+
+    expect(upload.id).toBeTruthy()
+    await verifyUploads({
+      collectionSlug: mediaWithPrefixSlug,
+      uploadId: upload.id,
+      prefix,
+    })
+    expect(upload.url).toEqual(`/api/${mediaWithPrefixSlug}/file/${String(upload.filename)}`)
+  })
+
+  it('returns 404 for non-existing file', async () => {
+    const response = await restClient.GET(`/${mediaSlug}/file/nonexistent.png`)
+    expect(response.status).toBe(404)
+  })
+
+  async function clearContainer() {
+    for await (const blob of client.listBlobsFlat()) {
+      await client.deleteBlob(blob.name)
+    }
+  }
+
+  async function verifyUploads({
+    collectionSlug,
+    uploadId,
+    prefix = '',
+  }: {
+    collectionSlug: CollectionSlug
+    prefix?: string
+    uploadId: number | string
+  }) {
+    const uploadData = (await payload.findByID({
+      collection: collectionSlug,
+      id: uploadId,
+    })) as unknown as { filename: string; sizes: Record<string, { filename: string }> }
+
+    const fileKeys = Object.keys(uploadData.sizes || {}).map((key) => {
+      const rawFilename = uploadData.sizes[key].filename
+      return prefix ? `${prefix}/${rawFilename}` : rawFilename
+    })
+
+    fileKeys.push(`${prefix ? `${prefix}/` : ''}${uploadData.filename}`)
+
+    for (const key of fileKeys) {
+      const blobClient = client.getBlobClient(key)
+      try {
+        const props = await blobClient.getProperties()
+        expect(props).toBeDefined()
+        expect(props.contentLength).toBeGreaterThan(0)
+      } catch (error) {
+        console.error('Error verifying uploads:', key, error)
+        throw error
+      }
+    }
+  }
+})