Monday, November 12, 2012

jQuery-File-Upload Express.js Middleware

I really like jQuery-File-Upload plugin, but it missed integration with Express.js. I ended up with adapting their node code as a middleware for Express.js. Example Express.js integration:

    var express = require("express"),
        upload = require('jquery-file-upload-middleware');
 
    var app = express();
    app.configure(function () {
        ...
        app.use('/upload', upload({
            uploadDir: __dirname + '/public/uploads',
            uploadUrl: '/uploads/'
        }));
        app.use(express.bodyParser());
        ...
    });



This way upload middleware will be tied to /upload path, in the frontend you use /upload as url to upload files:

   <input id="fileupload" type="file" name="files[]" data-url="/upload" multiple>
   <script>$('#fileupload').fileupload({ dataType: 'json' })</script>
 
 
Other options and their default values:

    tmpDir: '/tmp',
    maxPostSize: 11000000000, // 11 GB
    minFileSize: 1,
    maxFileSize: 10000000000, // 10 GB
    acceptFileTypes: /.+/i,
    // Files not matched by this regular expression force a download dialog,
    // to prevent executing any scripts in the context of the service domain:
    safeFileTypes: /.(gif|jpe?g|png)$/i,
    imageTypes: /.(gif|jpe?g|png)$/i,
    imageVersions: {
        thumbnail: {
            width: 80,
            height: 80
        }
    },
    accessControl: {
        allowOrigin: '*',
        allowMethods: 'OPTIONS, HEAD, GET, POST, PUT, DELETE'
    }
 

IMPORTANT:  jquery-file-upload-middleware should be registered before express.bodyParser(), or else upload progress events will not fire.

Get the code

4 comments:

  1. very very thank you your excellent module! good man, God bless you!

    ReplyDelete
  2. Hello,
    It is possible to use this middleware to uploading video files ?

    Great module.
    Thanks

    ReplyDelete
  3. Hi Aleksandr,
    I'm testing your module and it's great but there's one thing that would be nice to have:

    The ability to move files not just to a different Directory but also with the file name Renamed to whatever we choose, such as the file MD5.

    Is there a way to do that without delving in the source code?

    Thanks a lot,

    JM

    ReplyDelete
  4. Hello,
    I'm newbie, I can't get the module work. Please can some of you help me to get it work ( i.e small tutorial with code example ).
    Thanks a lot
    Thib

    ReplyDelete