Can't access just uploaded image

[MaddyCrowle]

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/inspiring-sara-8hcy56

To Reproduce

1. launch production: build the project, run start command
2. upload an new image via <form> or put it manually directly to the /public folder
3. access just uploaded image via Next.js Image component or directly via browser url panel

Current vs. Expected behavior

Expected: image display correctly Current: If open it directly in the browser: 404 this page could not be found, otherwise 400 Bad Request (The requested resource isn't a valid image.). Console says: The requested resource isn't a valid image for /uploads/products_18_gallery_1_1699416826325.jpeg received text/html; charset=utf-8

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Windows 10, CentOS 7
node: 17.2.0
next: 13.5.6
npm: 9.5.0

Which area(s) are affected? (Select all that apply)

Not sure, Image optimization (next/image, next/legacy/image), Routing (next/router, next/navigation, next/link)

Additional context

Important, that If I restart the app those previously uploaded images finally displays and there is no 400/404 error. I upload images in /public/uploads directory. This problem happens only in production mode (npm run build, npm run start). There is no such problem when I work with it in dev mode (npm run dev).

[timneutkens]

Next.js does not support writing files into the public folder at runtime to prevent certain attack vectors like path traversal. The reason it works in development is that you have to be able to add files that are served immediately.

[MaddyCrowle]

Next.js does not support writing files into the public folder at runtime to prevent certain attack vectors like path traversal. The reason it works in development is that you have to be able to add files that are served immediately.

That's for sure reasonable, but what is the right way to upload files in Next.js that should be available publicly after uploading? Most of the tutorials I found in the internet uploads files in /public folder and non of them show access to those files after uploading.

[magiceupho]

Hi, I have the same issue, can someone help us please ? Is it possible to tell NextJS to refresh or rescan the public folder after the upload ?

[jerrywu001]

Hi, I have the same issue, can someone help us, please? Is it possible to tell NextJS to refresh or rescan the public folder after the upload?

This is a bad experience. When building a CMS or blog, the need to publish articles is very common. It is necessary to upload the file to the public.

@timneutkens

[jerrywu001]

"Next.js does not support writing files into the public folder at runtime to prevent certain attack vectors like path traversal. The reason it works in development is that you have to be able to add files that are served immediately."

So can we provide an option to control it? @timneutkens

[MaddyCrowle]

The only way I found is to upload files to another host. For example we have CMS on website.com, create subdomain like media.website.com and upload files there.

Can't really understand why there is no replies here, it seems nobody use Next.JS as a CMS or live uploading files solution in production.

[timneutkens]

As said it's expected that you can't upload to public to have those automatically served. We're not planning to provide an option to disable this protection as that was used to bypass (and introduce directory traversal) multiple times in the past.

Our recommendation is:

• Use an external service to upload files (i.e. AWS S3 / Google Cloud Storage / Vercel Blob / etc.)
• Add file serving through i.e. route.ts / pages/api

[magiceupho]

@timneutkens

Ok, but I doesn't ask to disable this protection, just a way to update the folder content in order that the new uploaded files are available.

In relation to your recommendations, is it possible to provide an example of "Add file serving through i.e. route.ts" or the documentation page to learn how to do this, if you mean that it is possible to serve files that are located in the project folder, please ?

Thank you

[github-actions[bot]]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.