CODEWITHSUNDEEP
node.jsexpressmulter
maisteRR
maisteRR

Reputation: 51

Cannot POST /upload while trying to load file to server. Multer

I'm trying load file to my server through multer middleware, but server response me with message: Cannot POST /upload

My backend code is(about multer and requests): 

import multer from 'multer';

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});
let storage = multer.diskStorage({
    destination: (req, file, cb) =>{
        cb(null, './uploads')
    },
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '-' + Date.now())
    }
})

let upload = multer({ storage: storage }).single('file');

app.post('/upload', (req, res) => {
    upload(req, res, (err) =>{
        if (err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

And my frontend form: 

<form method="post" encType="multipart/form-data" action="/upload">
    <input type="file" name="file" />
     <input type="submit" value="Submit" />
</form>

I also tried to do a request through Postman and received the same error. Maybe it's because of the cors policy? Please, help.

Upvotes: 1

Views: 552

Answers (2)

maisteRR
maisteRR

Reputation: 51

Now my backend code is:

let storage = multer.diskStorage({
    destination: (req, file, cb) =>{
        cb(null, './uploads')
    },
    filename: (req, file, cb) => {
        cb(null, file.fieldname + '-' + Date.now())
    }
})

let upload = multer({ storage: storage }).single('file');

app.post('/upload', upload, (req, res) => {
    res.end("File is uploaded");
});

but i get the same error in browser, in postman i have:

MulterError: Unexpected field
    at wrappedFileFilter (C:\Users\MAISTER\Desktop\shopping cart\shopping\backend\node_modules\multer\index.js:40:19)
    at Busboy.<anonymous> (C:\Users\MAISTER\Desktop\shopping cart\shopping\backend\node_modules\multer\lib\make-middleware.js:114:7)
    at Busboy.emit (events.js:203:13)
    at Busboy.EventEmitter.emit (domain.js:471:20)
    at Busboy.emit (C:\Users\MAISTER\Desktop\shopping cart\shopping\backend\node_modules\busboy\lib\main.js:38:33)
    at PartStream.<anonymous> (C:\Users\MAISTER\Desktop\shopping cart\shopping\backend\node_modules\busboy\lib\types\multipart.js:213:13)
    at PartStream.emit (events.js:203:13)
    at PartStream.EventEmitter.emit (domain.js:471:20)
    at HeaderParser.<anonymous> (C:\Users\MAISTER\Desktop\shopping cart\shopping\backend\node_modules\dicer\lib\Dicer.js:51:16)
    at HeaderParser.emit (events.js:203:13)
    at HeaderParser.EventEmitter.emit (domain.js:471:20)
    at HeaderParser._finish (C:\Users\MAISTER\Desktop\shopping cart\shopping\backend\node_modules\dicer\lib\HeaderParser.js:68:8)
    at SBMH.<anonymous> (C:\Users\MAISTER\Desktop\shopping cart\shopping\backend\node_modules\dicer\lib\HeaderParser.js:40:12)
    at SBMH.emit (events.js:203:13)
    at SBMH.EventEmitter.emit (domain.js:471:20)
    at SBMH._sbmh_feed (C:\Users\MAISTER\Desktop\shopping cart\shopping\backend\node_modules\streamsearch\lib\sbmh.js:159:14)

Upvotes: 0

Yves Kipondo
Yves Kipondo

Reputation: 5603

You should pass upload as middleware directly in the definition of you post route like this

let upload = multer({ storage: storage }).single('file');

app.post('/upload', upload, (req, res) => {
        res.end("File is uploaded");
});

upload is a middleware and it must be past in the list of middleware which are execute during the process the the /upload request

Upvotes: 2

Related Questions