Merge branch 'main' into feature/custom-error-message-in-retrieveClie…

…ntToken

packages/blob/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @vercel/blob
 
+## 0.15.1
+
+### Patch Changes
+
+- f9c4061: fix(blob): Enforce content-type on fetch requests during token generation
+
+  Before this change, we would not send the content-type header on fetch requests sent to your server during client uploads. We consider this a bugfix as it should have been sent before.
+
+  ⚠️ If you upgrade to this version, and you're using any smart request body parser (like Next.js Pages API routes) then: You need to remove any `JSON.parse(request.body)` at the `handleUpload` step, as the body will be JSON by default now. This is valid for the `onBeforeGenerateToken` and `onUploadCompleted` steps.
+
 ## 0.15.0
 
 ### Minor Changes

packages/blob/jest/setup.js

@@ -1,3 +1,6 @@
+// TextEncoder and TextDecoder are not defined in Jest dom environment,
+// but they are available everywhere else.
+// See https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-defined-in-jest
 const { TextEncoder, TextDecoder } = require('node:util');
 
 Object.assign(global, { TextDecoder, TextEncoder });

packages/blob/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/blob",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "The Vercel Blob JavaScript API client",
   "homepage": "https://vercel.com/storage/blob",
   "repository": {
@@ -53,7 +53,10 @@
   },
   "jest": {
     "preset": "ts-jest",
-    "testEnvironment": "node"
+    "testEnvironment": "node",
+    "testEnvironmentOptions": {
+      "url": "http://localhost:3000"
+    }
   },
   "dependencies": {
     "jest-environment-jsdom": "29.7.0",

packages/blob/src/client.browser.test.ts

@@ -0,0 +1,77 @@
+import undici from 'undici';
+import { upload } from './client';
+
+// can't use undici mocking utilities because jsdom does not support performance.markResourceTiming
+jest.mock('undici', () => ({
+  fetch: jest
+    .fn()
+    .mockResolvedValueOnce({
+      status: 200,
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          type: 'blob.generate-client-token',
+          clientToken: 'fake-token-for-test',
+        }),
+    })
+    .mockResolvedValueOnce({
+      status: 200,
+      ok: true,
+      json: () =>
+        Promise.resolve({
+          url: `https://storeId.public.blob.vercel-storage.com/superfoo.txt`,
+          pathname: 'foo.txt',
+          contentType: 'text/plain',
+          contentDisposition: 'attachment; filename="foo.txt"',
+        }),
+    }),
+}));
+
+describe('upload()', () => {
+  beforeEach(() => {
+    process.env.BLOB_READ_WRITE_TOKEN =
+      'vercel_blob_rw_12345fakeStoreId_30FakeRandomCharacters12345678';
+    jest.clearAllMocks();
+  });
+
+  it('should upload a file from the client', async () => {
+    await expect(
+      upload('foo.txt', 'Test file data', {
+        access: 'public',
+        handleUploadUrl: '/api/upload',
+      }),
+    ).resolves.toMatchInlineSnapshot(`
+      {
+        "contentDisposition": "attachment; filename="foo.txt"",
+        "contentType": "text/plain",
+        "pathname": "foo.txt",
+        "url": "https://storeId.public.blob.vercel-storage.com/superfoo.txt",
+      }
+    `);
+
+    const fetchMock = undici.fetch as jest.Mock;
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      1,
+      'http://localhost:3000/api/upload',
+      {
+        body: '{"type":"blob.generate-client-token","payload":{"pathname":"foo.txt","callbackUrl":"http://localhost:3000/api/upload"}}',
+        headers: { 'content-type': 'application/json' },
+        method: 'POST',
+      },
+    );
+    expect(fetchMock).toHaveBeenNthCalledWith(
+      2,
+      'https://blob.vercel-storage.com/foo.txt',
+      {
+        body: 'Test file data',
+        duplex: 'half',
+        headers: {
+          authorization: 'Bearer fake-token-for-test',
+          'x-api-version': '5',
+        },
+        method: 'PUT',
+      },
+    );
+  });
+});

packages/blob/src/client.ts

@@ -328,6 +328,9 @@ async function retrieveClientToken(options: {
   const res = await fetch(url, {
     method: 'POST',
     body: JSON.stringify(event),
+    headers: {
+      'content-type': 'application/json',
+    },
   });
 
   if (!res.ok) {

packages/blob/src/helpers.ts

@@ -135,7 +135,7 @@ export async function validateBlobApiResponse(
 // This version is used to ensure that the client and server are compatible
 // The server (Vercel Blob API) uses this information to change its behavior like the
 // response format
-const BLOB_API_VERSION = 4;
+const BLOB_API_VERSION = 5;
 
 export function getApiVersionHeader(): { 'x-api-version'?: string } {
   let versionOverride = null;

packages/blob/src/index.browser.test.ts

@@ -2,6 +2,7 @@ import { put } from './index';
 
 const BLOB_STORE_BASE_URL = 'https://storeId.public.blob.vercel-storage.com';
 
+// Can't use the usual undici mocking utilities because they don't work with jsdom environment
 jest.mock('undici', () => ({
   fetch: (): unknown =>
     Promise.resolve({

test/next/CHANGELOG.md

@@ -1,5 +1,12 @@
 # vercel-storage-integration-test-suite
 
+## 0.1.34
+
+### Patch Changes
+
+- Updated dependencies [f9c4061]
+  - @vercel/blob@0.15.1
+
 ## 0.1.33
 
 ### Patch Changes

test/next/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vercel-storage-integration-test-suite",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "private": true,
   "scripts": {
     "build": "next build",

test/next/src/pages/api/vercel/blob/pages/handle-blob-upload-serverless.ts

@@ -15,10 +15,10 @@ export default async function handleBody(
     return;
   }
 
-  const body = request.body as string;
+  const body = request.body as HandleUploadBody;
   try {
     const jsonResponse = await handleUpload({
-      body: JSON.parse(body) as HandleUploadBody,
+      body,
       request,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/require-await -- [@vercel/style-guide@5 migration]
       onBeforeGenerateToken: async (pathname) => {