node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »



wercker status

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+


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);


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.


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