# How I Understood File Uploads in Node.js (in a simple way)

When I first added file upload, I thought:

> “User uploads file… I store it… done.”

But then I got stuck on one simple question:

> “Where does the file actually go?”

## First time I tried it

I used **multer** and did this:

`const multer = require("multer");`

`const upload = multer({ dest: "uploads/" });`

Then I uploaded a file…

And suddenly I saw a new folder:

`uploads/`

With files inside.

That’s when it clicked:

> “Oh… files are just saved in a folder.”

## That’s literally it

When someone uploads:

server takes the file saves it on disk inside a folder

No magic.

### How it looks in project

> project/
> 
> │
> 
> ├── uploads/
> 
> │ ├── image1.png
> 
> │ ├── image2.jpg
> 
> │
> 
> ├── server.js

So your backend is just writing files like normal files.

## Then I got confused again

Saving is fine…

But how do I see the file in browser?

## The thing that fixed everything

I added this:

`app.use("/uploads", express.static("uploads"));`

At first I didn’t understand it.

Now I think of it like:

> “Hey Express, make this folder public.”

### What happens after that

If file is here:

`uploads/photo.png`

You can open it in browser like:

http://localhost:3000/uploads/photo.png

That’s it.

No extra code.

### The full flow

`User uploads file`

`→ Server saves it in /uploads`

`→ You make /uploads public`

`→ You open file using URL`

Once I saw this flow, everything made sense.

## Local storage vs external

At first I used only local storage.

And honestly, it’s enough for most beginner projects.

**Local storage** files inside your project easy no setup

Later I learned about cloud storage.

**External storage** files stored somewhere else better for big apps

**How I think now** small project → use local folder real app → use cloud

No overthinking.

## One important thing I missed earlier

I was saving files… but not saving their path.

You should store something like:

`{`

`image: "/uploads/photo.png"`

`}`

So later you can show it:

`<img src="/uploads/photo.png" />`

![](/uploads/photo.png align="center")

### Mistakes I made (so you don’t)

**1\. Allowing any file**

Bad idea.

People can upload anything.

**2.No size limit**

Someone uploads huge file → server dies

**3.Using original file names**

Two users upload image.png → conflict

Better to rename files.

**4.Making everything public**

Only expose /uploads, not your whole project

**Static files (my understanding)**

Static just means:

> “Give the file as it is”4

No logic. No processing.

Just send the file.

## Final thought

My journey was honestly like this:

“Where is file going?” → folder “How to open it?” → static route “Why cloud?” → scaling

That’s it.

Nothing complicated.

### If you’re learning this

Don’t read too much.

Just do this once:

Upload a file Save in /uploads Add static route Open it in browser

You’ll understand everything.