Thank you for this. Great help!

thanks dawg, I didn't get fired because of you. Real G fr

thank you, sir, great vid! really helpful and informative!

Helpful as always !

works well, thank you Niraj!!!!

thanks man you have saved me a lot of trouble ❤❤❤❤

You are the best bro. Thanks

thank you, got new subscriber

Thank you! I looked of a working way to upload images everywhere...

you saved my time

thank you very much!

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 ??

nice, thank you sir

Thank you!

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

Do you know how to upload Images in Next js 13, would it work the same way with formidable ?

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}

We can store in different directory right ? By giving absolute path ?

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.

@lifeasdev7480

9 ай бұрын

so it video is useless?

does anyone have a working example for 13.3 nextjs?

@paolomaicohome

Жыл бұрын

up

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?

@jatinduggal1975

3 ай бұрын

i am facing same problem, did you find the solution ???

thanks so much I just copied your code and it works

thx buddy

Please share the repository link for the tutorial. Thanks

dose it work after build

what all things we need to run to get all the files that you have in the beginning? I'm new to Next JS.

@fsniraj

Жыл бұрын

nextjs.org/docs/getting-started

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?

@fsniraj

Жыл бұрын

Thats a little extra work but here I did a video about all those things you can check this out kzread.info/dash/bejne/n2upsZpuoJDJYLQ.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

@RameshPyakurel1

Жыл бұрын

@@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.

which better or common to upload image in next js, to cloud or local directory?

@fsniraj

Жыл бұрын

Cloud is best in my thinking.

@isbelmont

11 ай бұрын

If you have your own server then local, You did comment 7 months ago, I'd like to know what you choosed

@nolep5555

11 ай бұрын

@@isbelmont sure, I will chose cloud

is this recommended ? and is it deployment ready or just for knowledge ?

@fsniraj

Ай бұрын

Not recommended for production

Bro this is not working in NextJs 13+

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

@reznor_prompt2338

Жыл бұрын

just dont declare the types

@fsniraj

Жыл бұрын

Yes you can simply remove the **:type** or **as type** and that will be javascript.

@bacharelkarni1996

Жыл бұрын

@@reznor_prompt2338 thank you

@bacharelkarni1996

Жыл бұрын

@@fsniraj Thank you man

but the images cannot accessed on production mode

@bacharelkarni1996

Жыл бұрын

Is there an alternative to this cuz i'm facing this exact prob

@tofiknuryanto

Жыл бұрын

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 😁

@bacharelkarni1996

Жыл бұрын

@@tofiknuryanto thanks

@sodiqayilara1519

Жыл бұрын

@@tofiknuryanto This doesn't work at scale, you are saving files in-memory. You need to send your file to database.

@tofiknuryanto

Жыл бұрын

@@sodiqayilara1519 still work for me.

te amo

How can we save file to mongoDb database?

@fsniraj

Жыл бұрын

Short answer, mongodb is not ment to save files.

How many users are going to want to upload from their computer to a folder that they shouldn't be able to access?

import fs from "fs/promises"; doesn't work on client side | Don't waste your time here if you see that

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

Image is uploaded but after building the next js application it's giving me 404

@fsniraj

28 күн бұрын

here is the new way kzread.info/dash/bejne/qqeivKatgranico.html

is there any github link ?

@fsniraj

Жыл бұрын

Just added in the description

Sorry but, can you make this videos again, but with new setup of Next JS 13?

@fsniraj

Жыл бұрын

I am working on it, the next video will be the same as you want.

@itsabun

Жыл бұрын

@@fsniraj Wow It's Great.! 🤩. I can't wait for it

Doesn't work in production :(

@fsniraj

Жыл бұрын

Yes the vercel doesn't allow you to upload large files

@abdulkaharNayeem

Жыл бұрын

@@fsniraj no i am trying with cpanel and digital ocean also both not showing the images. its uploaded but not showing

Great tutorial sir, but why this method doesn't work in production?

@MauFranchini

10 ай бұрын

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

Doesn't work on production

@abdulkaharNayeem

Жыл бұрын

same problem.. image not showing on production

@abdulkaharNayeem

Жыл бұрын

did you find the solution?? if anyone get solution’s let me know please

@tonhom260

Жыл бұрын

@@abdulkaharNayeem create own server using express js

@abdulkaharNayeem

Жыл бұрын

@@tonhom260 can you show me the code how can i do that..sorry for asking.but its need for me

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.

This tutorial is useless, it will not work in production

test

Don't try this in production. It doesn't work.

@abubalo

Жыл бұрын

Yep. Better to use Cloudinary, S3 bucket or equivalent.

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