Narcissistic Pickle Meister
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    upperpublic

    upper

    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+

    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

    install

    npm i upper

    Downloadsweekly downloads

    9

    version

    0.2.2

    license

    MIT

    last publish

    collaborators

    • avatar