Storing Uploaded Files and Serving Them in Express

Handling file uploads in express is the big code transition for web developers. Its a difference between static "hello world" app and a platform where users can actually contributes content.

Here is an breakdown of how to manage, store, and serve those file safely.

Where Uploaded Files are Stored

When a file sent via POST request (using multipart/form-data), express doesn't handle it by default you typically use middleware like multer.

Technically a file journy looks like that:

1. Buffer/temp path: while the file beeing uploaded, it's either held in the server memory (as a buffer) or stored in temprary directory in server disk.
2. Final destination: once the file uploaded is complete, the middleware moves the file to a permanent location which you defined.

Note: Never store file directly in your database (as BLOBs) unless you unless you have a very specific, niche reason. it kills performance. Instead, store the file in disk and save the file path in your database.

Local Storage vs. External Storage

Deciding where your "closet" for your files live is your first big architecture decision.

Serving Static Files in Express

By default, express blocks access to your folder structure for security reasons. To let people to see the images they just uploaded, you have to open a folder for public using express.static() middleware.

const express = require("express");
const app = express();

// This makes everything inside the 'uploads' folder publicly accessible
app.use("/public", express.static("uploads"));

In this setup, if you have a file at ./uploads/cat.png, it won't found at mysite.com/uploads/cat.png. Because of the /public prefix, the url becomes mysite.com/public/cat.png.

Accessing Uploaded Files via URL

To display uploaded files on frontend line in <imag> tag, you need to construct a url.

1. you save the file in local folder with name 167423-profile.png.
2. you save this name in database user table.
3. your frontend request this image using base url of you static middleware: https://api.yourdomain.com/public/167423-profile.png

Security Considerations

File uploade is the one of the easies way to hack server. If you aren't careful, a user can uploade .js or .php script and try to execute it in your machine, so for preventing these ensure:

• Always check file MIME Type like image/jpeg, dont just trust the file extension, as anyone can rename virus.exe to virus.jpg.

• Set a strict size limit like 5MB without this, a mallicious user could upload 50GB file and crash your server by filling up to disk.

• Never trust the original file name, a user might name a file like this ../../etc/passwd. Use multer to generate unique random file names to prevent overwriting existing files and dirctory traversal attacks.

• Ensure a folder where you stored uploaded files have "execute" permission turned off at the operating system level.

Summary

Managing file uploads in Express involves using middleware like Multer to transfer files to local or external storage. While local storage is convenient for development, external solutions like AWS S3 are essential for production scalability and persistence.

To make these files accessible to users, Express utilizes express.static() to serve directories via public URL prefixes. Security is paramount: you must validate MIME types to block malicious scripts, enforce size limits to prevent server strain, and sanitize filenames to stop directory traversal attacks. Storing file paths in a database ensures high performance and system integrity.