File uploading met multer & sharp

Multer is a node.js middleware for handling multipart/form-data, which is primarily used for uploading files.

Installeren

Installeer multer

npm install multer

Installeer sharp

npm install sharp

Installeer uuid

npm install uuid

uploadAvatar

Maak een nieuwe post endpoint aan om een avatar te uploaden.

app.post('/uploadAvatar', (req, res) => {
  res.redirect('/')
});

uploadAvatar

Pas het upload formulier aan zodat we een bestand kunnen uploaden naar de server:

<form method="post" action="/uploadAvatar" enctype="multipart/form-data">
    <div class="form-group">
      <label class="text_small" for="avatar">Avatar</label>
      <input id="uploadAvatar" type="file" name="avatar">
    </div>
    <input type="submit" value="Upload">
 </form>

multer

multer is middleware die een file zal toevoegen aan de request met alle informatie van de geüploade file.

multer

In de buffer staat een stream, dit is de file voor de computer, nog niet omgevormd tot een bestand.
We voegen multer toe aan onze middleware-ketting

import multer from "multer";

app.post('/uploadAvatar', multer().single('avatar'), (req, res) => {
  res.redirect('/')
});

We uploaden slechts één afbeelding en deze heeft in ons fromulier de naam avatar.

sharp

In een volgende stap zullen we onze afbeelding herschalen en opslaan met sharp.
We doen dit in een middleware die we schrijven saveAvatar().

import multer from "multer";
import { saveAvatar } from "./middleware/saveAvatar.js";

app.post('/uploadAvatar', multer().single('avatar'), saveAvatar, (req, res) => {
  res.redirect('/')
});

sharp

In een volgende stap zullen we onze afbeelding herschalen en opslaan met sharp.
We doen dit in een middleware die we schrijven saveAvatar().

import multer from "multer";
import { saveAvatar } from "./middleware/saveAvatar.js";

app.post('/uploadAvatar', multer().single('avatar'), saveAvatar, (req, res) => {
  res.redirect('/')
});

sharp

Eerst en vooral controleren we of we wel een file hebben
Controleer ook of de file ook effectief een afbeelding is:

if (file.mimetype == "image/png" || 
    file.mimetype == "image/jpg" || 
    file.mimetype == "image/jpeg") {
}

sharp

Daarna herschalen we de afbeelding met sharp

import sharp from "sharp"
import { v4 as uuidv4 } from 'uuid';

[...]
// // save the file with sharp
await sharp(file.buffer)
  .resize(128, 128, {
  // more about these options can be found on
  // https://sharp.pixelplumbing.com/api-resize#resize
  fit: sharp.fit.cover,
  withoutEnlargement: true
})
  .toFile(`${PUBLIC_PATH}/images/avatars/${uuidv4()}.${ext}`);
[...]

We gebruiken de uuid package om een unieke bestandsnaam te genereren.

sharp

Telkens wanneer een afbeelding nu wordt geüpload wordt deze geschaald en krijgt deze een uniek id.
Meer informatie over de mogelijkheden van sharp kan je hier vinden.

Made with Slides.com