CODEWITHSUNDEEP
javascriptjquerynode.jsajax
user6361185
user6361185

Reputation:

Node.js + ajax, uploading a file



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!

Upvotes: 5

Views: 11546

Answers (1)

Stamos
Stamos

Reputation: 3998

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);
        }
    });

Upvotes: 7

Related Questions