38a06e7bd3
### What?
The `pasteURL` feature for Upload fields has been updated to support
both **client-side** and **server-side** URL fetching. Previously, users
could only paste URLs from the same domain as their Payload instance
(internal) or public domains, which led to **CORS** errors when trying
to fetch files from external URLs.
Now, users can choose between **client-side fetching** (default) and
**server-side fetching** using the new `pasteURL` option in the Upload
collection config.
### How?
- By default, Payload will attempt to fetch the file client-side
directly in the browser.
- To enable server-side fetching, you can configure the new `pasteURL`
option with an `allowList` of trusted domains.
- The new `/api/:collectionSlug/paste-url` endpoint is used to fetch
files server-side and stream them back to the browser.
#### Example
```
import type { CollectionConfig } from 'payload'
export const Media: CollectionConfig = {
slug: 'media',
upload: {
// pasteURL: false, // Can now disable the pasteURL option entirely by passing "false".
pasteURL: {
allowList: [
{
hostname: 'payloadcms.com', // required
pathname: '',
port: '',
protocol: 'https', // defaults to https - options: "https" | "http"
search: ''
},
{
hostname: 'example.com',
pathname: '/images/*',
},
],
},
},
}
```
### Why
This update provides more flexibility for users to paste URLs into
Upload fields without running into **CORS errors** and allows Payload to
securely fetch files from trusted domains.
23 lines
570 B
TypeScript
23 lines
570 B
TypeScript
import fs from 'fs'
|
|
import http from 'http'
|
|
import path from 'path'
|
|
import { fileURLToPath } from 'url'
|
|
|
|
const filename = fileURLToPath(import.meta.url)
|
|
const dirname = path.dirname(filename)
|
|
|
|
export const startMockCorsServer = () => {
|
|
const server = http.createServer((req, res) => {
|
|
const filePath = path.resolve(dirname, 'test-image.jpg')
|
|
|
|
res.setHeader('Content-Type', 'image/jpeg')
|
|
fs.createReadStream(filePath).pipe(res)
|
|
})
|
|
|
|
server.listen(4000, () => {
|
|
console.log('Mock CORS server running on http://localhost:4000')
|
|
})
|
|
|
|
return server
|
|
}
|