tha droppable

droppable.js

jQuery.widget("shovelapps.buildable", {
  options: {
    platformBaseUrl: ""
  },
  _create: function() {
    var _this = this,
      box = this.element;
    this.styleBox();

    box.on('dragenter', doNothing);
    box.on('dragover', doNothing);
    box.text('Drag files here');

    this.socket = io.connect(this.options.platformBaseUrl + 'zipbundle');
    //socket.io-stream stream
    // upload a file to the server.

    box.on('drop', function(e) {
      e.originalEvent.preventDefault();
      var file = e.originalEvent.dataTransfer.files[0];
      var stream = ss.createStream();

      // Add to list of uploaded files

      jQuery('<div align="center"></div>').attr("id", file.name).append(jQuery('<a></a>').text(file.name)).append(
        '<div class="progress"></div>').appendTo('body');


      ss(_this.socket).emit('sourcecodeupload', stream, {
        size: file.size
      });
      var readStream = ss.createBlobReadStream(file);

      readStream.pipe(stream);

      // Print progress
      var tx = 0;
      _this.socket.on('datareceived', function(data) {
        console.log(data);
        jQuery('#progress').text(data.progress + ' complete');
      });
    });

    // Deal with DOM quirks
    function doNothing(e) {
      e.preventDefault();
      e.stopPropagation();
    }
  },
  styleBox: function() {
    this.element.css({
      height: '100%',
      width: '100%',
      'min-height': "300px",
      'min-width': "300px",
      border: "1px dashed",
    });
  }
});