CODEWITHSUNDEEP
javascriptnode.jsexpressmulter
Alexander Wen
Alexander Wen

Reputation: 33

Express Multer file upload req.body and req.file undefined

I'm trying to upload a file using multer and there isn't a request body or file. Does anyone have any ideas what I'm doing wrong?

This is the html

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file-uploader"/>
  <input type="submit"/>
</form>

This is my js

const express = require('express');
const app = express();
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });
// other stuff
app.post('/upload', upload.single('file-uploader'), (req, res, next) => {
  console.log(req.file);
  console.log(req.body);
  res.send ({'asdf': 'sadf'});
});

Upvotes: 0

Views: 2206

Answers (1)

Red Efire
Red Efire

Reputation: 147

In Express 4, req.files is no longer available on the req object by default. Here is my solution with formidable:

Front end: Markup:

<input type="file" id="file"/>
<button id="send-file">Send</button>

JS:

    //send file
var send_file = $("#send-file");
send_file.on("click", function(e) {
    //file
    var file = $("#file")[0].files[0];
    //formdata
    var fd = new FormData();
    fd.append("file", file, "file_name");
    //send file
    $.ajax({
            url: '/upload',
            data: fd,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST'
        })
        .done(function(data) {
            console.log(data);
            console.log("Upload successfully");
        });
});
return false;});

Back end:

install formidable: npm install formidable --save

And a final step:

var express = require('express');
var app = express();
var path = require('path');
var fs = require('fs');
var formidable = require('formidable');


     app.post('/upload', function(req, res) {


    // create an incoming form object
    var form = new formidable.IncomingForm();

    // specify that we want to allow the user to upload multiple files in a single request
    form.multiples = true;

    // store all uploads in the /uploads directory
    form.uploadDir = path.join(__dirname, './uploads');

    // every time a file has been uploaded successfully,
    // rename it to it's orignal name
    form.on('file', function(field, file) {
        fs.rename(file.path, path.join(form.uploadDir, file.name));
    });

    // log any errors that occur
    form.on('error', function(err) {
        console.log('An error has occured: \n' + err);
    });

    // once all the files have been uploaded, send a response to the client
    form.on('end', function() {
        console.log(Date.now())
        res.end('success');
    });

    // parse the incoming request containing the form data
    form.parse(req);

});

Upvotes: 1

Related Questions