Gestire upload di file in Node.js ed Express con Multer

Link copiato negli appunti

Gestire l'upload di file lato server è una funzionalità comune in moltissime applicazioni web: dalle piattaforme social, ai CMS, fino agli e-commerce. In Node.js, uno dei modi più semplici e potenti per farlo è utilizzando il middleware Multer pensato per lavorare in combinazione con il Web Application Framework Express.

In questa guida vedremo cos'è Multer, come funziona, e come costruire una piccola app che permetta agli utenti di caricare file (immagini, documenti, ecc.) tramite un form HTML. Analizzeremo ogni parte del codice per comprendere come avviene il processo di upload, salvataggio e gestione dei file.

Cos'è Multer?

Multer è un middleware per Express che gestisce dati multipart/form-data, il formato utilizzato nei form HTML quando invii file. Multer analizza il contenuto dell'upload e lo rende disponibile nella richiesta (req.file o req.files) in formato leggibile dal server.

Iniziamo con il creare un progetto base

Creiamo la cartella del progetto in questo modo:

mkdir file-uploader
cd file-uploader
npm init -y

Installiamo poi i pacchetti necessari:

npm install express multer ejs

express ci permette di creare il server.
multer ci è utile per gestire gli upload.
ejs consente di creare le view HTML dinamiche.

Struttura del progetto per l'upload di file

file-uploader/
├── uploads/              # Dove salveremo i file caricati
├── views/                # Contiene le pagine HTML (EJS)
│   └── index.ejs
├── public/               # Per eventuali file statici (CSS, immagini)
├── app.js                # File principale dell'app
└── package.json

Ricorda in ogni caso di creare manualmente o nel codice la cartella uploads

Configuriamo l'app in app.js

const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
// Imposta il motore di template
app.set('view engine', 'ejs');
app.use(express.static('public'));

// Configurazione Multer
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/');
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, uniqueSuffix + path.extname(file.originalname));
  }
});
const upload = multer({ storage });

// Rotte
app.get('/', (req, res) => {
  res.render('index');
});
app.post('/upload', upload.single('myFile'), (req, res) => {
  if (!req.file) {
    return res.send('Nessun file caricato!');
  }

  res.send(`File caricato con successo: ${req.file.filename}`);
});
// Avvio server
app.listen(3000, () => {
  console.log('Server avviato su http://localhost:3000');
});

Con multer.diskStorage stiamo definendo dove e come Multer salverà i file:

destination: indica la cartella di destinazione.
filename: genera un nome unico usando la data corrente e l'estensione originale del file.

upload.single('myFile') è un middleware che indica che vogliamo caricare un solo file con il campo name="myFile" nel form HTML. Se invece volessimo caricare più file, useremmo upload.array('myFiles', 10).

La View HTML con EJS (views/index.ejs)

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <title>Upload File con Multer</title>
</head>
<body>
  <h1>Carica un File</h1>
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <input type="file" name="myFile" required>
    <button type="submit">Upload</button>
  </form>
</body>
</html>

È importante notare che il form deve avere l'attributo enctype="multipart/form-data" per permettere il caricamento dei file.

Verifica del caricamento

Dopo aver caricato un file Multer lo salverà nella cartella uploads/ mentre req.file conterrà un oggetto simile a questo:

{
  "fieldname": "myFile",
  "originalname": "foto.jpg",
  "encoding": "7bit",
  "mimetype": "image/jpeg",
  "destination": "uploads/",
  "filename": "1683827339401-foto.jpg",
  "path": "uploads/1683827339401-foto.jpg",
  "size": 24567
}

Sarà poi possibile usare questi dati per mostrare un'anteprima o effettuare un salvataggio nel database.

Filtrare i file per tipo (opzionale)

Puoi filtrare i file per tipo usando l'opzione fileFilter:

const upload = multer({
  storage,
  fileFilter: (req, file, cb) => {
    const allowed = ['image/jpeg', 'image/png', 'application/pdf'];
    if (allowed.includes(file.mimetype)) {
      cb(null, true);
    } else {
      cb(new Error('Tipo di file non supportato'), false);
    }
  }
});

Limitare la dimensione dei file (opzionale)

Per evitare l'upload di file troppo grandi è possibile agire in questo modo:

const upload = multer({
  storage,
  limits: { fileSize: 1024 * 1024 * 5 } // max 5MB
});

Altri utilizzi utili di Multer

upload.array('foto', 10): per upload multipli.
upload.fields([{ name: 'doc', maxCount: 1 }, { name: 'immagine', maxCount: 5 }]): per gestire form complessi.
upload.none(): se vuoi analizzare solo campi di testo in multipart/form-data.

Mostrare il file caricato all'utente (opzionale)

Puoi creare una view di successo che mostra un'anteprima dell'immagine caricata (se supportata) è possibile intervenire nel modo seguente sul codice:

app.post('/upload', upload.single('myFile'), (req, res) => {
  if (!req.file) return res.send('Nessun file caricato');
  res.render('success', { file: req.file });
});

E nella view success.ejs:

<h2>File caricato con successo!</h2>
<p><strong>Nome:</strong> <%= file.originalname %></p>
<% if (file.mimetype.startsWith('image')) { %>
  <img src="/uploads/<%= file.filename %>" width="300" />
<% } %>

Ricorda di rendere la cartella pubblica uploads se vuoi mostrare i file:

app.use('/uploads', express.static('uploads'));

Estensioni e prossimi passi

Ora che hai imparato a gestire gli upload di file, puoi:

Collegare i file ad un database (ad esempio MongoDB).
Implementare un sistema di login per proteggere l'accesso.
Permettere agli utenti di scaricare o eliminare i file.
Usare servizi esterni come Amazon S3 o Cloudinary per l'hosting.

Conclusione

Quella di gestire gli upload di file in Node.js è un’esigenza molto comune e Multer è la libreria perfetta per farlo in modo semplice, sicuro e flessibile. Grazie alla sua integrazione con Express puoi creare sistemi avanzati di caricamento in pochi minuti, con possibilità di controllo, validazione e personalizzazione.

Abbiamo visto come configurare Multer, creare un'interfaccia HTML per l'upload, salvare file nel server e mostrare il risultato all'utente. Ora puoi integrare questa funzionalità nelle tue app per consentire agli utenti di caricare immagini, documenti, PDF o qualsiasi altro tipo di file.

Questa base può essere espansa facilmente in un sistema più completo: pensa a un profilo utente con immagine personalizzata o a un pannello admin dove caricare contenuti dinamici. In ogni caso, sapere come gestire file è un tassello fondamentale nel tuo percorso da sviluppatore Node.js.

Indice lezioni