fix: resolve 404/500 error when downloading files containing hash in filename (#15799)

### What?

Fixes file downloads returning 404 for filenames containing `#` when
served through the REST API.

 ### Why?

Next.js catch-all `[...slug]` params decodes URL-encoded segments before
passing them for further handling. So a request for
`/api/media/file/document%20%23123.pdf` arrives with slug segments
`['media', 'file', 'document #123.pdf']`.

These decoded segments are joined and passed to handleEndpoints, but the
implementation of handleEndpoints is using `path-to-regexp` with a
configuration that expectes urlencoded path segments.

### How?

Re-encode each slug segment with `encodeURIComponent` before joining:

handleEndpoints already uses match(endpoint.path, { decode:
decodeURIComponent }), so params are decoded back to their original
values after matching

Also adds a test that creates a file with # in the filename and verifies
it can be served via REST.

Fixes #15798

---------

Co-authored-by: Paul Popus <paul@payloadcms.com>

Author: andershermansen

packages/next/src/routes/rest/index.ts

@@ -37,7 +37,9 @@ const handlerBuilder =
       config,
       path: formatAdminURL({
         apiRoute: awaitedConfig.routes.api,
-        path: awaitedParams ? `/${awaitedParams.slug.join('/')}` : undefined,
+        path: awaitedParams
+          ? `/${awaitedParams.slug.map((segment) => encodeURIComponent(segment)).join('/')}`
+          : undefined,
       }),
       request,
     })

test/uploads/e2e.spec.ts

@@ -1,7 +1,7 @@
 import type { Page } from '@playwright/test'
 
 import { expect, test } from '@playwright/test'
-import { statSync } from 'fs'
+import { readFileSync, statSync } from 'fs'
 import path from 'path'
 import { wait } from 'payload/shared'
 import { fileURLToPath } from 'url'
@@ -2240,4 +2240,34 @@ describe('Uploads', () => {
 
     await expect(titleField).toHaveValue('Upload without file')
   })
+
+  test('should upload and serve file with # and % in filename', async () => {
+    await page.goto(mediaURL.create)
+
+    const imageBuffer = readFileSync(path.resolve(dirname, './image.png'))
+
+    await page.setInputFiles('input[type="file"]', {
+      buffer: imageBuffer,
+      mimeType: 'image/png',
+      name: 'file%20#hash.png',
+    })
+
+    const filenameField = page.locator('.file-field__filename')
+    await expect(filenameField).toHaveValue('file%20#hash.png')
+
+    await saveDocAndAssert(page)
+
+    // After saving, the URL shown in the admin panel must have # and % encoded
+    const fileUrlLink = page.locator('.file-meta__url a')
+    await expect(fileUrlLink).toHaveAttribute('href')
+
+    const href = await fileUrlLink.getAttribute('href')
+    expect(href).toContain('%23') // # encoded
+    expect(href).toContain('%25') // % encoded
+    expect(href).not.toContain('#') // no literal #
+
+    // Navigating to the file URL must return 200
+    const response = await page.goto(`${serverURL}${href}`)
+    expect(response?.status()).toBe(200)
+  })
 })

test/uploads/int.spec.ts

@@ -498,6 +498,29 @@ describe('Collections - Uploads', () => {
       })
     })
     describe('read', () => {
+      it('should serve files with hash characters in filename', async () => {
+        const filePath = path.resolve(dirname, './image.png')
+        const file = await getFileByPath(filePath)
+        file!.name = "file #hash.png"
+
+        const mediaDoc = (await payload.create({
+          collection: mediaSlug,
+          data: {},
+          file,
+        }))
+
+        expect(mediaDoc.url).toContain('%23')
+        expect(mediaDoc.url).not.toContain('#')
+
+        expect(mediaDoc.filename).toContain('#')
+        expect(mediaDoc.filename).not.toContain('%23')
+
+        const response = await restClient.GET(`/${mediaSlug}/file/${mediaDoc.filename}`)
+
+        expect(response.status).toBe(200)
+        expect(response.headers.get('content-type')).toContain('image/png')
+      })
+
       it('should return the media document with the correct file type', async () => {
         const filePath = path.resolve(dirname, './image.png')
         const file = await getFileByPath(filePath)