Local File Upload Path Mismatch?

[marpstar]

Previous issue: #61

I'm trying to set my uploads directory for my collection, and I cannot get it to work.

I've set things up according to the answer in the above issue, staticDir is set to ./public/media and staticURL is set to /media/

If my uploads are present when I call next build, they're bundled with the other public folder items and they are served correctly, presumably by Next, not Payload.

Any new uploads added after that are uploaded to the public/media folder in my repo, but because they're not present in the .next directory from the build, they're not served.

I don't have a media folder in public anymore, why is next still refusing to serve the /media path via Payload?

[marpstar]

Worth mentioning that this only occurs in a production build, as next dev runs with the local repo's public folder, not the one bundled in .next

[marpstar]

vercel/next.js#58169 (comment) The Next team seems to suggest that the Payload recommendation goes against what they support.

I get that cloud is the way, but my client can't jump through the approval hoops for offsite storage. I'm going to start digging on their recommended path of serving files through route.ts and will report back.

[marpstar]

Things seem to be working with the following configuration. Still looking for a way to secure my custom route handler.

.env

PAYLOAD_UPLOADS_DIR=/some/path/on/disk

Media.ts

{
  //...
  "upload": {
    staticDir: process.env.PAYLOAD_UPLOADS_DIR,
    staticURL: "/files"
  },
}

/src/app/files/[filename]/route.ts

import fs from "fs";
import { readFile } from "fs/promises";
import mime from "mime-types";

export async function GET(
  request: Request,
  { params }: { params: { filename: string } }
) {

  const filename = params.filename;

  const uploadDir = process.env.PAYLOAD_UPLOADS_DIR;

  const filePath = `${uploadDir}/${filename}`;

  if (!fs.existsSync(filePath)) {
    return new Response("File not found", { status: 404 });
  }

  const bytes = await readFile(filePath);

  const mimeType = mime.lookup(filePath) || "application/octet-stream";

  // read file from file system
  return new Response(bytes, {
    headers: {
      "Content-Type": mimeType,
    },
  });
}

[jacobsfletch]

Hi again @marpstar, this repo will soon be archived because it's been merged into the main Payload repo here: https://github.com/payloadcms/payload/tree/main/packages/next. Payload 3.0 ships with native support for Next.js and is currently out in beta here: https://github.com/payloadcms/payload-3.0-demo. I'm going to close this issue now but feel free to keep the conversation going either as a GitHub Discussion or on Discord. If think issue persists, feel free to open a new ticket on either the demo repo or the monorepo with the 3.x-beta label, and be sure to include a reproduction so we can fix it faster.