jquery-file-upload-middleware

jQuery-File-Upload Express.js Middleware

jquery-file-upload-middleware

jQuery-File-Upload Express.js middleware. Based on the server code of jQuery-File-Upload

Installation:

    $ npm install jquery-file-upload-middleware

Usage:

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

On the frontend:

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

To prevent access to /upload except for post (for security)

upload.configure({
    uploadDir: __dirname + '/public/uploads/',
    uploadUrl: '/uploads'
});
 
/// Redirect all to home except post 
app.get('/upload', function( reqres ){
    res.redirect('/');
});
 
app.put('/upload', function( reqres ){
    res.redirect('/');
});
 
app.delete('/upload', function( reqres ){
    res.redirect('/');
});
 
app.use('/upload', function(reqresnext){
    upload.fileHandler({
        uploadDirfunction () {
            return __dirname + '/public/uploads/'
        },
        uploadUrlfunction () {
            return '/uploads'
        }
    })(req, res, next);
});

Overriding global configuration

 
    app.use('/upload2', upload.fileHandler({
        uploadDir: __dirname + '/public/uploads2',
        uploadUrl: '/uploads2',
        imageVersions: {
            thumbnail: {
                width: 100,
                height: 100
            }
        }
    }));
 

More sophisticated example - Events

        app.use('/upload', upload.fileHandler());
 
        // events 
        upload.on('begin', function (fileInforeqres) { 
            // fileInfo structure is the same as returned to browser 
            // {  
            //     name: '3 (3).jpg', 
            //     originalName: '3.jpg', 
            //     size: 79262, 
            //     type: 'image/jpeg', 
            //     delete_type: 'DELETE', 
            //     delete_url: 'http://yourhost/upload/3%20(3).jpg', 
            //     url: 'http://yourhost/uploads/3%20(3).jpg', 
            //     thumbnail_url: 'http://youhost/uploads/thumbnail/3%20(3).jpg'  
            // } 
        });
        upload.on('abort', function (fileInforeqres) { ... });
        upload.on('end', function (fileInforeqres) { ... });
        upload.on('delete', function (fileInforeqres) { ... });
        upload.on('error', function (ereqres) {
            console.log(e.message);
        });

Dynamic upload directory and url, isolating user files:

        upload.configure({
            imageVersions: {
                thumbnail: {
                    width: 80,
                    height: 80
                }
            }
        });
 
        app.use('/upload', function (reqresnext) {
            // imageVersions are taken from upload.configure() 
            upload.fileHandler({
                uploadDirfunction () {
                    return __dirname + '/public/uploads/' + req.sessionID
                },
                uploadUrlfunction () {
                    return '/uploads/' + req.sessionID
                }
            })(req, res, next);
        });

Moving uploaded files to different dir:

        app.use('/api', function (reqresnext) {
            req.filemanager = upload.fileManager();
            next();
        });
 
        app.use('/api/endpoint', function (reqresnext) {
            // your real /api handler that will actually move the file 
            ...
            // req.filemanager.move(filename, path, function (err, result)) 
            req.filemanager.move('SomeFile.jpg', 'project1', function (errresult) {
                // SomeFile.jpg gets moved from uploadDir/SomeFile.jpg to 
                // uploadDir/project1/SomeFile.jpg 
                // if path is relative (no leading slash), uploadUrl will 
                // be used to generate relevant urls, 
                // for absolute paths urls are not generated 
                if (!err) {
                    // result structure 
                    // { 
                    //     filename: 'SomeFile.jpg', 
                    //     url: '/uploads/project1/SomeFile.jpg', 
                    //     thumbail_url : '/uploads/project1/thumbnail/SomeFile.jpg' 
                    // } 
                    ...
                } else {
                    console.log(err);
                }
            });
        });

Moving uploaded files out of uploadDir:

        app.use('/api', function (req, res, next) {
            var user = db.find(...);
 
            req.filemanager = upload.fileManager({
                targetDir: __dirname + '/public/u/' + user._id,
                targetUrl: '/u/' + user._id,
            });
 
            // or
            req.filemanager = upload.fileManager({
                targetDir: function () {
                    return __dirname + '/public/u/' + user._id
                },
                targetUrl: function () {
                    return'/u/' + user._id
                }
            });
            ...
            req.filemanager.move(req.body.filename, 'profile', function (err, result) {
                // file gets moved to __dirname + '/public/u/' + user._id + '/profile'
                if (!err) {
 
                }
            });
        });

Getting uploaded files mapped to their fs locations:

        app.use('/list', function (reqresnext) {
            upload.fileManager().getFiles(function (files) {
                //  { 
                //      "00001.MTS": { 
                //          "path": "/home/.../public/uploads/ekE6k4j9PyrGtcg+SA6a5za3/00001.MTS" 
                //      }, 
                //      "DSC00030.JPG": { 
                //          "path": "/home/.../public/uploads/ekE6k4j9PyrGtcg+SA6a5za3/DSC00030.JPG", 
                //          "thumbnail": "/home/.../public/uploads/ekE6k4j9PyrGtcg+SA6a5za3/thumbnail/DSC00030.JPG" 
                //      } 
                //  } 
                res.json(files);
            });
        });
 
        // with dynamic upload directories 
 
        app.use('/list', function (reqresnext) {
            upload.fileManager({
                uploadDirfunction () {
                    return __dirname + '/public/uploads/' + req.sessionID
                },
                uploadUrlfunction () {
                    return '/uploads/' + req.sessionID
                }
            }).getFiles(function (files) {
                res.json(files);
            });
        });

Other options and their default values:

{
    tmpDir: '/tmp',
    uploadDir: __dirname + '/public/uploads',
    uploadUrl: '/uploads',
    targetDir: uploadDir,
    targetUrl: uploadUrl,
    ssl: false,
    hostname: null, // in case your reverse proxy doesn't set Host header 
                    // eg 'google.com' 
    maxPostSize: 11000000000, // 11 GB 
    minFileSize: 1,
    maxFileSize: 10000000000, // 10 GB 
    acceptFileTypes: /.+/i,
    imageTypes: /\.(gif|jpe?g|png)$/i,
    imageVersions: {
        thumbnail: {
            width: 80,
            height: 80
        }
    },
    imageArgs: ['-auto-orient'],
    accessControl: {
        allowOrigin: '*',
        allowMethods: 'OPTIONS, HEAD, GET, POST, PUT, DELETE'
    }
}

Copyright (c) 2012 Aleksandr Guidrevitch Released under the MIT license.