I don't get any errors. The folder uploads has chmod 777.

Backend:

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

var upload = multer({   storage: storage,
                        limits: { fileSize: '50mb' }}).single('photo');


router.post('/bild',function(req,res){
    console.log("REQ",req); //file is there in the body
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

Frontend:

$("#formular").submit(function (e) {
        e.preventDefault();
        var form = $(this)[0];
        var formData = new FormData(form);
        console.log(formData)
        $.ajax({
            type: "POST",
            url: "/users/bild",
            data: formData,
            processData: false,
            "content-type": "application/x-www-form-urlencoded",
            success: function(r){
                console.log("result",r)
            },
            error: function (e) {
                console.log("some error", e);
            }
        });

    });

But no files were uploaded. I also tried to get the get the file and append it to formData before sending - same effect.

I don't get any errors. The folder uploads has chmod 777.

Backend:

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

var upload = multer({   storage: storage,
                        limits: { fileSize: '50mb' }}).single('photo');


router.post('/bild',function(req,res){
    console.log("REQ",req); //file is there in the body
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });
});

Frontend:

$("#formular").submit(function (e) {
        e.preventDefault();
        var form = $(this)[0];
        var formData = new FormData(form);
        console.log(formData)
        $.ajax({
            type: "POST",
            url: "/users/bild",
            data: formData,
            processData: false,
            "content-type": "application/x-www-form-urlencoded",
            success: function(r){
                console.log("result",r)
            },
            error: function (e) {
                console.log("some error", e);
            }
        });

    });

But no files were uploaded. I also tried to get the get the file and append it to formData before sending - same effect.

• javascript
• jquery
• ajax
• express
• multer

• this here will save your time stackoverflow./questions/11071100/… – Jerubaal Xerxes Commented Sep 24, 2022 at 5:39

1 Answer 1

For the front end, contentType must be set to false to use a formdata object in jQuery.ajax, also $(this)[0] === this

$("#formular").submit(function (e) {
    e.preventDefault();
    var formData = new FormData(this);
    console.log(formData)
    $.ajax({
        type: "POST",
        url: "/users/bild",
        data: formData,
        processData: false,
        contentType: false,
        success: function(r){
            console.log("result",r)
        },
        error: function (e) {
            console.log("some error", e);
        }
    });

});