Add file picker :

<input type="file"

Notre snippet dans app.js qui utilise body parser ne fonctionnera pas avec les images. Nous avons besoin d'une autre librairie :

npm i --save multer

On va devoir rajouter un encodage sur nos formulaires avec ajout d'images :

enctype="multipart/form-data"

L'initialiser dans app.js

// Parser for files 
const multer = require("multer")

const fileStorage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'images');
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});
// image here is for the input name="image"
app.use(multer({storage: fileStorage}).single("image"));

Autre façon de faire :

const multer = require("multer");
const MIME_TYPE_MAP = {
    'image/png': 'png',
    'image/jpg': 'jpg',
    'image/jpeg': 'jpeg'
}
const storage = multer.diskStorage({
    destination: (req, file, cb) => {
        const isValid = MIME_TYPE_MAP[file.mimetype]
        let error = new Error("Invalid mime type")
        if (isValid) {
            error = null
        }
        cb(error, 'backend/images');
    },
    filename: (req, file, cb) => {
        const name = file.originalname.toLowerCase().split(' ').join('-');
        const extension = MIME_TYPE_MAP[file.mimetype];
        cb(null, name + '-' + Date.now() + '.' + extension)
    }
})

// et pour l'utiliser : 
// POST /api/posts
router.post('/api/posts', multer({storage: storage}).single("image"), postsController.postPosts)

ALLOW ONLY CERTAIN FILETYPE

const fileFilter = (req, file, cb) => {
  if (file.mimetype === 'image/png' || file.mimetype === 'image/jpg' || file.mimetype === 'image/jpeg') {
    cb(null, true);
  } else {
    cb(null, false)
  }
}
app.use(multer({storage: fileStorage, fileFilter: fileFilter}).single("image"));

Attention : Ne jamais stocker d'images dans la bdd c'est trop lourd ! A l'inverse , stocker les images dans un folder sur le serveur et on pourra stocker dans la bdd le chemin vers le folder et l'image en question

// stocker les images : postAddProduct
const image = req.file;
const imageUrl = image.path;
et on enregistre comme avant dans la bdd imageUrl : imageUrl 

Ok c'est bien maintenant on stocke un url a la place de l'image : "images\1591618231864-Embleme-Bitcoin.jpeg " mais l'affichage des images ne fonctionne pas !

Rendre public notre dossier images comme on a fait avec notre dossier 'public'. Donc dans app.js :

app.use(express.static(path.join(__dirname, 'public')));
app.use('/images', express.static(path.join(__dirname, 'images')));

Attention : bien penser a rajouter un " / " au debut des <img src="/<%= blabla %>" >Pour que le chemin soit correct!