CODEWITHSUNDEEP
node.jsvue.jsmulter
Sanja
Sanja

Reputation: 326

Uploading files using multer

I'm uploading files using multer My issue is that I can't get a response message in vue.js

Form:

<form action="http://localhost:5000/upload" method="post" enctype="multipart/form-data" target="dummyframe" id="upload">

Index.js

const storage = multer.diskStorage({
  filename: function (req, file, cb) {
    if (
        extens == 'mp3' ||
        extens == 'wav' ||
        extens == 'oog' ||
        extens == 'aac' ||
        extens == 'm3u'
      ) {
        cb(null, file.originalname);
        console.log('uploaded')
      } else {
        console.log('invalid extens')
        cb(new Error('Invalid file extension'))
      }
    }
})

const upload = multer({
  storage: storage
});

app.post('/upload', upload.array('file', 10), function (req, res, next) {
  res.send(req.files)
}

Everything works perfectly, except for the response in vue.js. I have no idea how to capture that error message if error.

Upvotes: 1

Views: 335

Answers (1)

Winns
Winns

Reputation: 902

Thats not really a Vue question, but to handle errors with multer you should write something like this -

// it's a working example
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();

app.set('port', 3333);

let uploadDir = path.join(__dirname, '/uploads');

const storage = multer.diskStorage({
    destination: function(req, file, cb) {
        cb(null, uploadDir); // Set upload folder here
    },
    filename: function(req, file, cb) {
        cb(null, file.originalname); // Set filename here
    }
});

const upload = multer({
    storage: storage,
    fileFilter(req, file, cb) {
        let ext = file.originalname.split('.').pop();

        if (['mp3', 'wav', 'oog', 'aac', 'm3u'].includes(ext))
            cb(null, true); // success
        else 
            cb(new Error('Invalid file extension')); // error
    }
});

app.post('/upload', function(req, res, next) {
    let f = upload.single('file');

    f(req, res, function(err) {
        if (err instanceof multer.MulterError) {
            // A Multer error
            console.log('A Multer error occurred when uploading.', err);
            res.send('MulterError');
        } else if (err) {
            // An unknown error
            console.log('An unknown error occurred when uploading', err);
            res.send('error');
        } else {
            console.log('success');
            res.send('success');
        }
    });
});

app.listen(app.get('port'), () => {
    console.log(`Example app listening at http://localhost:${app.get('port')}`);
});

Also you probably want to upload files using Ajax, FormData will be helpful here https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects

Upvotes: 1

Related Questions