DingGGu DingGGu - 1 year ago 182
HTML Question

NodeJS Multer is not working

I tried to file upload with NodeJS + ExpressJS + Multer but does not work well.

My ExpressJS Version is 4.12.3

this is my source


var express = require('express'),
multer = require('multer');

var app = express();
app.use(express.static(__dirname + '/public'));
app.use(multer({ dest: './uploads/'}));

app.post('/', function(req, res){
console.log(req.body); // form fields
console.log(req.files); // form files
app.get('/', function(req, res) {

app.listen(5000, function() {
console.log("start 5000");


<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<form method="post" enctype="multipart/form-data">
<input id="file" type="file"/>
<button type="submit">test</button>

My NodeJS Console Log when I click Submit Button:

"C:\Program Files\nodejs\node.exe" server.js
start 5000

on NodeJS Console, there is empty object at req.files
Is some problem on my source?

Answer Source

I don't see you calling any API to upload file on click of submit button. Let me give you move comprehensive implementation.

multer config in app.js

    dest: './uploads/',
    rename: function (fieldname, filename) {
        return filename.replace(/\W+/g, '-').toLowerCase() + Date.now()
    onFileUploadStart: function (file) {
        console.log(file.fieldname + ' is starting ...')
    onFileUploadData: function (file, data) {
        console.log(data.length + ' of ' + file.fieldname + ' arrived')
    onFileUploadComplete: function (file) {
        console.log(file.fieldname + ' uploaded to  ' + file.path)


<form id="uploadProfilePicForm" enctype="multipart/form-data" action="/user/profile_pic/upload" method="post">
          <input type="file" multiple="multiple" id="userPhotoInput" name="userPhoto"  accept="image/*" />
          <input type="submit" name="submit" value="Upload">

End point '/user/profile_pic_upload' POST calls uploadProfilePic in controller

Upload profile pic logic in users controller

uploadProfilePic = function(req,res){
    // get the temporary location of the file
    var tmp_path = req.files.userPhoto.path;
    // set where the file should actually exists 
    var target_path = '/Users/narendra/Documents/Workspaces/NodeExpressWorkspace/MongoExpressUploads/profile_pic/' + req.files.userPhoto.name;
    // move the file from the temporary location to the intended location
    fs.rename(tmp_path, target_path, function(err) {
        if (err) throw err;
        // delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files
        fs.unlink(tmp_path, function() {
            if (err) {
                throw err;
                    var profile_pic = req.files.userPhoto.name;
                    //use profile_pic to do other stuffs like update DB or write rendering logic here.
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download