upper

Full stack solution to file uploading, with backend express and front-end AMD support.

How it works

Transports data via primarily via websockets and utilizes the browser FileReader api. The ws library is used to listen to ws://.../upper to establish a file upload queue between the client and the server.

Support (for now)

• Latest 4/5 versions of Chrome, Firefox
• IE10+
• Safari 6+

Example

Server side code:

var app = require('express')(),
    server = require('http').createServer(app),
    // pass a server instance to establish websocket connection
    upper = require('upper')({ server: server });

// serve client side code and using expressjs middleware plugin
app.use(upper.client({ express: true, angular: true }));

// Get all complete uploaded files in once place:
upper.on('uploaded', function (fileData, cb) {
    console.log('fileData: ' + JSON.stringify(fileData));

    // example, upload to e3, save reference to mongo
    // callback to notify client useful data
    uploadToS3(fileData, function (name) {
        mongoSave(name, function () {
            cb.apply(this, arguments);
        });
    });
});

Frontend code:

// Create upper listener instance to file input element
var upper = Upper({ debug: true }),
    uploader = upper.listen(window.document.getElementById('fileUpload'))

// get callback with preview url
.on('preview', function (url) {
    window.document.getElementById('preview').setAttribute('src', url);
})

// get notified of upload progress
.on('progress', function (progress) {
    console.log(JSON.stringify(progress, null, 4));
});

// event on completed image upload
// - you can pass back data from the server here
// This is useful for passing back data like save location etc
.on('completed', function (passedBackData) {
    console.log('Upper completed, extra data from the server: ' + passedBackData);
});

Development

The project is built using browserify to maximise modularity since much of the code is applicable on both the backend and the frontend. To run and build all frontend files run npm run build. This witll populate the ./lib/static/dist folder with all the frontend code as well as minified versions.

Testing

The project uses mocha for backend tests and nightwatch for implementation testing. Cross-browser testing will be implemented using testing.

For local tests run npm test to run the full suite.

Future features/improvemnets

• Upload from social media accounts (facebook, twitter, g+ etc) - requires auth procedure
• Upload from webcam