Node.js + ajax, uploading a file

Question

I've been trying to upload a file with node.js and ajax, yet i can't let it work. I don't get an error, but nothing is in my storage folder.

index.js:

app.post('/newFlavour', function(req, res){
console.log("[INFO] New flavour request: " + req.body.name);

let form = new formidable.IncomingForm();
form.uploadDir = path.join(__dirname, '/storage');

form.on('file', function(field, file) {
    fs.rename(file.path, path.join(form.uploadDir, file.name));
});

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

form.on('end', function() {
    console.log('success');
});

form.parse(req); });

My function with the ajax request:

function createFlavour() {
let file = $('#upload-input').get(0).files;
const formData = new FormData();
formData.append('uploads', file, file.name);

console.log(file)

$.ajax({
    url: "http://localhost:3000/newFlavour",
    type: "POST",
    dataType: "json",
    data: JSON.stringify({
        name: $('#name').val(),
        file: file
    }),
    contentType: "application/json",
    success: function (data) {
        console.log(data);
    },
    error: function () {
        alert("Error occured");
    },
    complete: function () {
        console.log("complete")
    }
});

clearModal();  }

The input tag:

<input id="upload-input" type="file" name="upload"></br>

I don't know what i am missing here.

Thanks in advance!

Solution

You should parse your req at the start. Also per formidable documentation

fileBegin

Emitted whenever a new file is detected in the upload stream. Use this event if you want to stream the file to somewhere else while buffering the upload on the file system.

form.on('fileBegin', function(name, file) { });

so doing this should save your file

app.post('/newFlavour', function (req, res){
    var form = new formidable.IncomingForm();

    form.parse(req);

    form.on('fileBegin', function (name, file){
        file.path = __dirname + '/storage/' + file.name;
    });

    form.on('file', function (name, file){
        console.log('Uploaded ' + file.name);
    });

    res.status(200);
});

Also you ajax Post is wrong, this should work

    var data = new FormData();
    $.each($('#upload-input')[0].files, function(i, file) {
        data.append('file-'+i, file);
    });

    $.ajax({
        url: 'http://localhost:3000/newFlavour',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        method: 'POST',
        type: 'POST', // For jQuery < 1.9
        success: function(data){
            alert(data);
        }
    });

Comments

[xVanjaZ]

Thanks for your comment, I moved that line to the top. Yet nothing happends. If i console log my formdata on line 6 at functions.js, this is the output: FormData {}. I think something is going wrong there

[Code_Ninja]

@Stanos, I have implemented the above code, but I still get a failed response in the network tab of the devtools for the request

[Code_Ninja]

what should I do for that?

[pavan kumar v]

how to pass some JSON data along with the file in ajax?

[Stamos]

Its a Form so you either pass each param into the form or stringify your JSON add it in then Form and then parse at backend.