define([
  'underscore',
  'backbone',
  'text!templates/media_editor.tpl',
  'collections/media',
  'models/media',
  'views/media_editor_thumbnail',
  'views/media_upload',
  'vent'
],
function(
  _,
  Backbone,
  Template,
  MediaCollection,
  Media,
  MediaThumbnailView,
  MediaUploadView,
  vent
)
{
  return Backbone.Marionette.CompositeView.extend({
    template: _.template(Template),

    itemView: MediaThumbnailView,
    itemViewContainer: '.itemViewContainer',

    className: 'media-editor',

    events:
    {
      "click .upload": "onClickUpload",
      "dragenter .media-drop-target": "onDragEnter",
      "dragleave .media-drop-target": "onDragLeave",
      "dragend .media-drop-target": "onDragEnd",
      "dragover .media-drop-target": "onDragOver",
      "drop .media-drop-target": "onDrop",
    },

    initialize: function()
    {
      var view = this;
      vent.on("media:upload", function(media)
      {
        view.collection.add(media);
      });

      this.reader = new FileReader();
      this.reader.onload = this.onReadFile.bind(this);
    },

    onRender: function()
    {
      //this.$el.find(".media-drop-target").on("drop", this.onDrop.bind(this));
    },


    onClickUpload: function()
    {
      var media = new Media({game_id: this.model.get("game_id"), name: ""});
      vent.trigger("application:popup:show", new MediaUploadView({model: media}), "Upload Media");
    },


    onDragEnter: function(event)
    {
      this.$el.find(".media-drop-target").addClass("media-hover");
      event.preventDefault();
      return false;
    },

    onDragOver: function(event)
    {
      this.$el.find(".media-drop-target").addClass("media-hover");
      event.preventDefault();
      return false;
    },

    onDragEnd: function(event)
    {
      this.$el.find(".media-drop-target").addClass("media-hover");
      event.preventDefault();
      return false;
    },

    onDragLeave: function(event)
    {
      this.$el.find(".media-drop-target").removeClass("media-hover");
      event.preventDefault();
      return false;
    },

    onDrop: function(event)
    {
      this.$el.find(".media-drop-target").removeClass("media-hover");
      event.preventDefault();

      var file = event.originalEvent.dataTransfer.files[0];

      this.model = new Media({game_id: this.model.get("game_id")});
      this.model.set("file_name",    file.name.toLowerCase());
      this.model.set("display_name", file.name.toLowerCase());

      this.reader.readAsDataURL(file);

      return false;
    },

    // TODO or pop up editor? single vs multiple file workflow.
    onReadFile: function(event)
    {
      var view = this;

      var data = event.target.result;

      // strip base64 header
      var start = data.indexOf(",") + 1;
      var data  = data.substr(start);

      this.model.set("data", data);

      this.model.save({}, {
        success: function()
        {
          vent.trigger("media:upload", view.model);
        }
      });
    }
  });
});

@@ -176,16 +176,28 @@
   'vent'
+,%0A  'config'
 %0A%5D,%0Afunc
@@ -306,16 +306,26 @@
 ,%0A  vent
+,%0A  config
 %0A)%0A%7B%0A  r
@@ -996,102 +996,8 @@
  %7D);
-%0A%0A      this.reader = new FileReader();%0A      this.reader.onload = this.onReadFile.bind(this);
 %0A   
@@ -2399,354 +2399,526 @@
     
-this.reader.readAsDataURL(file);%0A%0A      return false;%0A    %7D,%0A%0A    // TODO or pop up editor? single vs multiple file workflow.%0A    onReadFile: function(event)%0A    %7B%0A      var view = this;%0A%0A      var data = event.target.result;%0A%0A      // strip base64 header%0A      var start = data.indexOf(%22,%22) + 1;%0A      var data  = data.substr(start);%0A%0A
+var view = this;%0A      var formData = new FormData;%0A      formData.append('raw_upload', file);%0A      $.ajax(%7B%0A        url: config.base_url + 'rawupload.php',%0A        type: 'POST',%0A        data: formData,%0A        cache: false,%0A        contentType: false,%0A        processData: false,%0A        error: function() %7B%0A          // TODO: error message%0A          vent.trigger(%22application:alert%22, %7Btext: %22Error when uploading media.%22%7D);%0A          view.resetProgressBar();%0A        %7D,%0A        success: function(e) %7B%0A   
       
-this
+ view
 .mod
@@ -2928,34 +2928,43 @@
 set(
-%22data%22, data
+'raw_upload_id', e
 );%0A
-%0A
       
-this
+    view
 .mod
@@ -2977,16 +2977,20 @@
 e(%7B%7D, %7B%0A
+    
         
@@ -3013,26 +3013,34 @@
 n()%0A        
+  
-%7B%0A
+  %7B%0A    
           ve
@@ -3091,18 +3091,69 @@
     
-%7D%0A      %7D)
+    %7D,%0A          %7D);%0A        %7D,%0A      %7D);%0A%0A      return false
 ;%0A  

Fix media drag+drop to also do raw upload