Node.js/Express Async File Upload

Question

I've pawed through numerous (and mostly outdated) older stack overflow and Google answers and can't find a damn thing that works with the latest versions of Node and Express.

What is the current go-to plugin for async file uploads?

EDIT: I'm uploading the files to my Node.js server. It's running Express. It should be able to handle any file types.

Upload to what? It depends entirely upon what your sending the file to and what kind of uploads it supports. — jfriend00, Sep 16 '14 at 04:08

ChainFuse · Accepted Answer · 2017-01-19T16:50:35.630

2

I use formidable for file uploads. You can either store them inside of a directory or you can use Amazon S3 to store them on their servers. It works like a charm.

Here is what some code looks like:

  // At the top of your modules
  var formidable = require('formidable');

  var form = new formidable.IncomingForm(); //Receive form

  form.parse(req, function(err, fields, files) { //Parse form and data
     // Do form stuff, you can access the files
  });

With jQuery, you can do the following:

     $('#your_form').on('submit', function(e) {
        var formData = new FormData($(this)[0]);
        $.ajax({
            url : '/your/url/',
            type: 'POST',
            contentType: 'multipart/form-data',
            data: formData,
            success: function (msg) {
               console.log(msg);
            },
            processData: false
        });

        e.preventDefault();
    });

edited Jan 19 '17 at 16:50

answered Sep 16 '14 at 04:10

ChainFuse

797
2
10
26

Is this for async uploads? (ie. the page doesn't refresh) If so, could you show me the front-end html/javascript? – opticon Sep 16 '14 at 04:11
1

@opticon, yes. There is a way to do it. jQuery can do that, and I've used it as well. – ChainFuse Sep 16 '14 at 04:16
@opticon I've updated my code. This should work for you. Good luck. – ChainFuse Sep 16 '14 at 04:19
So far it's looking good! Care to give me a peak at whats within the form.parse callback function? – opticon Sep 16 '14 at 04:47
@opticon I recommend you use AWS s3 to store your images. It's what I use. I have the code to do that, however if you're going to store them into your local directories, you'll have to use a built-in module called "filesystem" (var fs = require('fs');) - which one do you want? – ChainFuse Sep 16 '14 at 04:50
I've used S3 for a few projects in the past, but for this one I'd like to play around locally first. So lets go with that? Would be greatly appreciated! – opticon Sep 16 '14 at 05:07
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/61380/discussion-between-opticon-and-tiffany-lowe). – opticon Sep 16 '14 at 23:14
@TiffanyLowe Is there a reason why `contentType` is given twice with different values? – Akseli Palén Jan 18 '17 at 17:46
@AkseliPalén as a matter of fact, I'm sure that's wrong. I've become a much better developer since 2014, so yeah. Pay attention to the first contentType only. – ChainFuse Jan 19 '17 at 16:49
@TiffanyLowe Thanks. Actually, it is kind of funny, it seems that the `contentType: false` might be the correct one after all, and maybe your code worked back then because of that extra line. If `contentType` is explicitly set to `'multipart/form-data'`, jQuery fails to add correct multipart boundary string to it. That leads to a missing boundary problem on the backend. Sounds odd at first but so it seems to be. See http://stackoverflow.com/a/13243501/638546 and http://stackoverflow.com/a/5976031/638546. – Akseli Palén Jan 20 '17 at 21:45

Node.js/Express Async File Upload

1 Answers1