Angular File Upload is a module for the AngularJS framework

angular, file, upload, module
bower install angular-file-upload-binaryjs


# Angular File Upload


  • added grunt watch task. Please use grunt watch to automatically build angular-file-upload.* files for easier development
  • imported ngThumb directive in angularFileUpload moudule
  • if ngThumb is used under under a uploader directive then the thumbnails will be blured according to upload status

Added support for

Use as normal passing your socketJsClaient client to fileuploader object

Client Side You may want to have angular js service as in:

.service('fileService', function (FileUploader, socket) {
    var uploader = new FileUploader({
      socketJsClient : socket

      name: 'customFilter',
      fn: function(item /*{File|FileLikeObject}*/, options) {
        return this.queue.length < 10;

    return uploader;

where the socket service is something like

.factory('socket', function(socketFactory) {

    // now auto-configures its connection when we ommit a connection url
    var ioSocket = io('', {
      // Send auth token on connection, you will need to DI the Auth service above
      // 'query': 'token=' + Auth.getToken()
      path: '/'

    var socket = socketFactory({
      ioSocket: ioSocket

    return {
      socket: socket,

       * Register listeners to sync an array with updates on a model
       * Takes the array we want to sync, the model name that socket updates are sent from,
       * and an optional callback function after new items are updated.
       * @param {String} modelName
       * @param {Array} array
       * @param {Function} cb
      syncUpdates: function (modelName, array, cb) {
        cb = cb || angular.noop;

         * Syncs item creation/updates on 'model:save'
        socket.on(modelName + ':save', function (item) {
          var oldItem = _.find(array, {_id: item._id});
          var index = array.indexOf(oldItem);
          var event = 'created';

          // replace oldItem if it exists
          // otherwise just add item to the collection
          if (oldItem) {
            array.splice(index, 1, item);
            event = 'updated';
          } else {

          cb(event, item, array);

         * Syncs removed items on 'model:remove'
        socket.on(modelName + ':remove', function (item) {
          var event = 'deleted';
          _.remove(array, {_id: item._id});
          cb(event, item, array);

       * Removes listeners for a models updates on the socket
       * @param modelName
      unsyncUpdates: function (modelName) {
        socket.removeAllListeners(modelName + ':save');
        socket.removeAllListeners(modelName + ':remove');

       * Send a Stream to the server
       * @param {file} the file to upload
       * @param {Object} metadata
      send : function(file, metadata) {
        metadata = angular.extend(metadata || {}, {
          name :,
          size : file.size

        console.log('Streaming : ', metadata, socket);

        var stream = ss.createStream();

        // upload a file to the server.
        ss(socket).emit('stream', stream, metadata);

        return stream;

Server Side You'll need a working instance of with processing incoming stream as in:

// Got stream from client
  ss(socket).on('stream', function(stream, metadata) {'Got Stream with metadata: ', metadata);
    var itemHash = metadata.hash;
    var size = 0;
    var progress = 0;
    stream.on('data', function(chunk) {
      size += chunk.length;
      progress = Math.floor(size / metadata.size * 100);
      socket.emit('progress', { itemKey : itemHash, tx : progress });


    stream.on('end', function() {
      console.log('File uploaded successfully');
      socket.emit('upload-done', { itemKey : itemHash });

Added support for binary js upload

Client Side

Use as normal but passing your binaryJs client to the fileUploader object as in

var binaryJsClient = new BinaryClient('ws://localhost:9001');

var uploader = $scope.uploader = new FileUploader({
  binaryJsClient : binaryJsClient

Server Side You'll need a working instance of BinaryJs and then you may want to process the incoming stream as in

client.on('stream', function(stream, meta) {
  console.log('Received stream: ', stream);
  console.log('With meta: ', meta);

  // store stream
  var file = fs.createWriteStream('/tmp/' +;
  // Send progress back
  stream.on('data', function(data){
    var progress = {rx: data.length / meta.size};
    console.log('Data received: %d', progress.rx);


For detailed informations on how to use BinaryJs


Angular File Upload is a module for the AngularJS framework. Supports drag-n-drop upload, upload progress, validation filters and a file upload queue. It supports native HTML5 uploads, but degrades to a legacy iframe upload method for older browsers. Works with any server side platform which supports standard HTML form uploads.

When files are selected or dropped into the component, one or more filters are applied. Files which pass all filters are added to the queue and are ready to be uploaded.

You could find this module in bower like angular file upload.


  1. Simple example
  2. Uploads only images (with canvas preview)
  3. Without bootstrap example

More Info

  1. Introduction
  2. Module API
  3. FAQ
  4. Migrate from 0.x.x to 1.x.x
  5. RubyGem