How to POST file via jQuery to nodejs connect-busboy

Question

I can successfully send a file to connect-busboy by using an HTML form's action attribute like so:

<form ref='uploadForm' method="post" action="http://localhost:3000/fileupload" enctype="multipart/form-data" id='uploadForm'>
  Select file to upload:
  <input type="file" name="sampleFile">
  <input type="submit" value="Upload!">
</form>

However, I would prefer to not have my page redirect.

I tried to convert this to jQuery by removing the action attribute in the form tag and adding an onclick function with the following:

$.ajax({
        url:'http://localhost:3000/fileupload',
        type:'post',
        contentType: 'multipart/form-data',
        data:$('#uploadForm').serialize(),
        success:function(){
            alert('Success');
        },
        error: function() {
            alert('Error');
        },
});

Unfortunately, this doesn't work with the error:

TypeError: Cannot read property 'end' of undefined

The Nodejs code is as follows:

const express = require('express');
const busboy = require('connect-busboy');
const app = express();
app.use(busboy());
const fs = require('fs');

app.post('/fileupload', function(req, res) {
    var fstream;
    req.pipe(req.busboy);
    req.busboy.on('file', function (fieldname, file, filename) {
        console.log("Uploading: " + filename);
        fstream = fs.createWriteStream(__dirname + '/files/' + filen ame);
        console.log(fstream);
        file.pipe(fstream);
        fstream.on('close', function () {
            res.send('Success');
        });
    });
});

var port = process.env.PORT || 3000;
app.listen(port);

Full error: https://i.stack.imgur.com/cO9MU.png

Where is "end" referenced at any of the code at Question? Set `processData` and `contentType` to `false` at `$.ajax()` options — guest271314, Jul 16 '17 at 23:14
Hello, I just tried again with the `processData` and `contentType` headers. I will edit my post with the full error. — David Duffrin, Jul 16 '17 at 23:24
Can you include the error as text at Question? Linked images do not provide detail in the question itself — guest271314, Jul 16 '17 at 23:38
I tried to, however it went over the character limit. @mscdex's solution worked for POSTing the file, however my jQuery still (incorrectly) returns with an `Error` alert. — David Duffrin, Jul 16 '17 at 23:42

score 2 · Accepted Answer · answered Jul 16 '17 at 23:21

2

By explicitly serializing the form you are implicitly avoiding/removing the multipart/form-data format. Instead, pass a FormData instance as the data. You can instantiate a new FormData from an existing form like:

var data = new FormData($('#uploadForm')[0]);

$.ajax({
    url: 'http://localhost:3000/fileupload',
    type: 'POST',
    contentType: false,
    processData: false,
    cache: false,
    data: data,
    success: function() {
        alert('Success');
    },
    error: function() {
        alert('Error');
    }
});

answered Jul 16 '17 at 23:21

mscdex

104,356
15
192
153

Thanks this works perfectly and the file is sent to my server, however my HTML page is still alerting me with `Error`. Am I supposed to change my `res.send(...);` to something to fix this? Thanks again EDIT: I will upvote you once I have enough reputation to be able to. – David Duffrin Jul 16 '17 at 23:40

How to POST file via jQuery to nodejs connect-busboy

1 Answers1