Custom upload endpoints

[cbratschi]

Payload 3.x uses the API routes to deliver uploads whereas in Payload 2.x we used /media/ redirects to the Payload Express server. In my case apiRoute is "/cms/api" and uploads would be delivered from:

<base URL>/cms/api/<collection slug>/file/<filename>

Our storage implementation uses GridFS to store the files in MongoDB. Access to those upload URLs are cached by NGINX. Therefore we need a separate endpoint to distinguish between API access and file access. In addition, the upload URLs should be shorter:

<base URL>/<collection slug>/<filename>

I tried to add /src/app/(payload)/media/[...paths]/route.ts but several needed functions are not exported by @payload/next:

import { APIError } from 'payload';
//import { getFile } from '@payloadcms/next/routes/rest/files';
import { createPayloadRequest } from '@payloadcms/next/utilities';

import httpStatus from 'http-status';

import config from '@payload-config';

export async function GET(
    request: Request,
    { params }: { params: Promise<{ path: string[] }> }
) {
    const collectionSlug = 'media';
    const filename = (await params).path.join('/');

    //debug
    console.log(`Get file: ${filename}`);

    try {
        //get Payload instance
        const req = await createPayloadRequest({
            config,
            request
        });

        //get collection
        const collection = req.payload.collections?.[collectionSlug];

        if (!collection.config.upload) {
            throw new APIError(
                `This collection is not an upload collection: ${collection.config.slug}`,
                httpStatus.BAD_REQUEST
            );
        }

        //FIXME not exported
        /*
        const accessResult = await checkFileAccess({
            collection,
            filename,
            req
        });

        if (collection.config.upload.handlers?.length) {
            let customResponse = null;

            for (const handler of collection.config.upload.handlers) {
                customResponse = await handler(req, {
                    doc: accessResult,
                    params: {
                        collection: collection.config.slug,
                        filename
                    }
                });
            }

            if (customResponse instanceof Response) {
                return customResponse;
            }
        }
        */

        //FIXME not exported
        /*
        return getFile({
            collection,
            filename,
            req
        });
        */
    } catch (_error) {
        //FIXME not exported
        /*
        return routeError({
            collection,
            config,
            err: error,
            req: req || request
        });
        */
    }
}

getFile() would be the correct API and routeError() to handle errors. Could those two functions be exported?

[cbratschi]

Well, ended with a rewrite rule in next.config.ts:

    /**
     * Change rewrite rules.
     *
     * See https://nextjs.org/docs/pages/api-reference/next-config-js/rewrites.
     *
     *   - redirects upload access to Payload endpoint.
     *
     * @returns
     */
    async rewrites() {
        const collection = 'media';
        const rewrites: Rewrite[] = [{
            destination: `${process.env.NEXT_PUBLIC_SERVER_URL}/cms/api/${collection}/file/:path*`,
            source: `/media/:path*`
        }];

        //debug
        //console.dir(rewrites);

        return {
            beforeFiles: rewrites,
            afterFiles: [],
            fallback: []
        };
    },