File uploading met multer & sharp

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

Installeren

npm install multer
npm install sharp
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.

File uploading met multer & sharp

By timdpaep

Made with Slides.com

File uploading met multer & sharp

  • 384

More from timdpaep