In development mode maybe It works but in production I think it doesn't work Read nextjs documentation: Good to know: The directory must be named public. The name cannot be changed and it's the only directory used to serve static assets. Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third-party service like AWS S3 for persistent file storage.
Guys this will not going to work on production so don't waste your time here, Use a third party service like cloudinary or you can use an express server for storing static data in local directory.
Absolutely you need 1 step to access your image after image uploaded. 1. Re build your app, so image will detected 😁 or ... 2. Create an API to serve your image. Example: Create api file usual /pages/api/images/[filename].jsx import fs read data file using query filename Send the image to client 😁
i got an issue here, after deploy website on server, public directory not recognize, all images goes to .next/static/media. for having those picture you should run command npm run build every time you upload new image. is there any way to solve this problem?
I want to send form data containing file, fields to my node js API, from NextJs Api. My react component posts on Nextjs api route, then it forwards data to nodejs api. How can i implement this ??
Does anyone know how one would go about uploading different images in different folders? (specific to the user uploading it?) for example /public/images/{user.id}
This is great. Thanks. Can you also tell me how can I send the same image to API Endpoint (External) where I'd like to edit the image for example and get the response from that server?
Thats a little extra work but here I did a video about all those things you can check this out ua-cam.com/video/m7uO85p-c0Q/v-deo.html this is the part where we are uploading image to the cloudinary using node js. You can do this same inside your next js api
@@fsniraj Thank you for your suggestion. I watched the video but I cound't make the code to work. If you could show how to write the code in next js api that would be great. If not, could you please direct me to some post or thread which could help me solve this issue. Anyways thanks for your awesome videos.
Dear sir , I m from Pakistan... Please make a video with next. Js Full stack Mongodb Add title, Description, category with Image With Same work PDF file upload and Videos Add from front end and back End Then Image Display, PDF file download and Videos play work
guys, i'm having a bad time with a project that has a close deadline, and i need to upload the files into the public folder but i can't understand a single thing about typescript. Can you suggest something(a video, a blog ...) that shows how to do the same thing with next and javascript instead of ts. thank you so much
As @isbelmont mentioned: Read nextjs documentation: Good to know: The directory must be named public. The name cannot be changed and it's the only directory used to serve static assets. Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third-party service like AWS S3 for persistent file storage. So that's a hard constraint
thx buddy
thanks dawg, I didn't get fired because of you. Real G fr
its not working on after production , i uploaded my next app on vercel.
Thank you! I looked of a working way to upload images everywhere...
How many users are going to want to upload from their computer to a folder that they shouldn't be able to access?
works well, thank you Niraj!!!!
you saved my time
You are the best bro. Thanks
thanks so much I just copied your code and it works
Helpful as always !
In development mode maybe It works but in production I think it doesn't work
Read nextjs documentation:
Good to know:
The directory must be named public. The name cannot be changed and it's the only directory used to serve static assets.
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third-party service like AWS S3 for persistent file storage.
so it video is useless?
is this recommended ? and is it deployment ready or just for knowledge ?
Not recommended for production
dose it work after build
Guys this will not going to work on production so don't waste your time here, Use a third party service like cloudinary or you can use an express server for storing static data in local directory.
thank you, got new subscriber
thank you very much!
This tutorial is useless, it will not work in production
Image is uploaded but after building the next js application it's giving me 404
here is the new way ua-cam.com/video/xsnZDtRSAYg/v-deo.html
Bro this is not working in NextJs 13+
Thank you for this. Great help!
Doesn't work on production
same problem.. image not showing on production
did you find the solution?? if anyone get solution’s let me know please
@@abdulkaharNayeem create own server using express js
@@tonhom260 can you show me the code how can i do that..sorry for asking.but its need for me
does anyone have a working example for 13.3 nextjs?
up
nice, thank you sir
Thank you!
thanks man you have saved me a lot of trouble ❤❤❤❤
thank you, sir, great vid! really helpful and informative!
but the images cannot accessed on production mode
Is there an alternative to this cuz i'm facing this exact prob
Absolutely you need 1 step to access your image after image uploaded.
1. Re build your app, so image will detected 😁 or ...
2. Create an API to serve your image.
Example:
Create api file usual /pages/api/images/[filename].jsx
import fs
read data file using query filename
Send the image to client
😁
@@tofiknuryanto thanks
@@tofiknuryanto This doesn't work at scale, you are saving files in-memory. You need to send your file to database.
@@sodiqayilara1519 still work for me.
i got an issue here, after deploy website on server, public directory not recognize, all images goes to .next/static/media.
for having those picture you should run command npm run build every time you upload new image.
is there any way to solve this problem?
i am facing same problem, did you find the solution ???
import fs from "fs/promises"; doesn't work on client side | Don't waste your time here if you see that
I want to send form data containing file, fields to my node js API, from NextJs Api.
My react component posts on Nextjs api route, then it forwards data to nodejs api.
How can i implement this ??
We can store in different directory right ? By giving absolute path ?
which better or common to upload image in next js, to cloud or local directory?
Cloud is best in my thinking.
If you have your own server then local, You did comment 7 months ago, I'd like to know what you choosed
@@ismendoza sure, I will chose cloud
Please share the repository link for the tutorial. Thanks
Do you know how to upload Images in Next js 13, would it work the same way with formidable ?
can you please tell me how can i save image data inside my database using prisma orm or just how to get the bytes of the image
Sorry but, can you make this videos again, but with new setup of Next JS 13?
I am working on it, the next video will be the same as you want.
@@fsniraj Wow It's Great.! 🤩. I can't wait for it
Does anyone know how one would go about uploading different images in different folders? (specific to the user uploading it?) for example /public/images/{user.id}
what all things we need to run to get all the files that you have in the beginning? I'm new to Next JS.
nextjs.org/docs/getting-started
How can we save file to mongoDb database?
Short answer, mongodb is not ment to save files.
This is great. Thanks. Can you also tell me how can I send the same image to API Endpoint (External) where I'd like to edit the image for example and get the response from that server?
Thats a little extra work but here I did a video about all those things you can check this out ua-cam.com/video/m7uO85p-c0Q/v-deo.html this is the part where we are uploading image to the cloudinary using node js. You can do this same inside your next js api
@@fsniraj Thank you for your suggestion. I watched the video but I cound't make the code to work. If you could show how to write the code in next js api that would be great. If not, could you please direct me to some post or thread which could help me solve this issue. Anyways thanks for your awesome videos.
Doesn't work in production :(
Yes the vercel doesn't allow you to upload large files
@@fsniraj no i am trying with cpanel and digital ocean also both not showing the images. its uploaded but not showing
Don't try this in production. It doesn't work.
Yep. Better to use Cloudinary, S3 bucket or equivalent.
Dear sir , I m from Pakistan... Please make a video with next. Js Full stack Mongodb Add title, Description, category with Image With Same work PDF file upload and Videos Add from front end and back End
Then Image Display, PDF file download and Videos play work
te amo
guys, i'm having a bad time with a project that has a close deadline, and i need to upload the files into the public folder but i can't understand a single thing about typescript. Can you suggest something(a video, a blog ...) that shows how to do the same thing with next and javascript instead of ts. thank you so much
just dont declare the types
Yes you can simply remove the **:type** or **as type** and that will be javascript.
@@reznor_prompt2338 thank you
@@fsniraj Thank you man
Great tutorial sir, but why this method doesn't work in production?
As @isbelmont mentioned:
Read nextjs documentation:
Good to know:
The directory must be named public. The name cannot be changed and it's the only directory used to serve static assets.
Only assets that are in the public directory at build time will be served by Next.js. Files added at runtime won't be available. We recommend using a third-party service like AWS S3 for persistent file storage.
So that's a hard constraint
is there any github link ?
Just added in the description
test
Useless
To get just the file extension just make it return Date.now().toString() + "." + path.originalFilename.split(".").pop()
why formidable is needed here?
is can't be done without it