4 files changed, 61 insertions, 2 deletions

diff --git a/app/views/assets/edit.html.erb b/app/views/assets/edit.html.erb
index 0c1dd8fe..d0a39aa3 100644
--- a/app/views/assets/edit.html.erb
+++ b/app/views/assets/edit.html.erb
@@ -14,7 +14,12 @@
       <% end %>
 
       <div class="node_description"><%= f.label :upload, "Replace file" %></div>
-      <div class="node_content"><%= f.file_field :upload %></div>
+      <div class="node_content">
+        <div id="asset_dropzone">
+          <%= f.file_field :upload %>
+          <p class="field_hint">…or drop a file here.</p>
+        </div>
+      </div>
 
       <div class="node_description"><%= f.label :creator %></div>
       <div class="node_content"><%= f.text_field :creator %></div>
diff --git a/app/views/assets/new.html.erb b/app/views/assets/new.html.erb
index 7bded949..8a7a6094 100644
--- a/app/views/assets/new.html.erb
+++ b/app/views/assets/new.html.erb
@@ -9,7 +9,12 @@
       <div class="node_content"><%= f.text_field :name %></div>
 
       <div class="node_description"><%= f.label :upload, "File" %></div>
-      <div class="node_content"><%= f.file_field :upload %></div>
+      <div class="node_content">
+        <div id="asset_dropzone">
+          <%= f.file_field :upload %>
+          <p class="field_hint">…or drop a file here.</p>
+        </div>
+      </div>
 
       <div class="node_description"><%= f.label :creator %></div>
       <div class="node_content"><%= f.text_field :creator %></div>
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 5514f3b3..284d2b72 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -85,6 +85,44 @@ $(document).ready(function () {
     desktop_mq.addEventListener('change', sync_metadata);
   }
 
+  var dropzone = document.getElementById('asset_dropzone');
+  if (dropzone) {
+    var input = dropzone.querySelector('input[type=file]');
+
+    // Without these, a drop that misses the zone navigates the browser
+    // to the file, losing the half-filled form.
+    ['dragover', 'drop'].forEach(function(ev) {
+      window.addEventListener(ev, function(e) { e.preventDefault(); });
+    });
+
+    ['dragenter', 'dragover'].forEach(function(ev) {
+      dropzone.addEventListener(ev, function(e) {
+        e.preventDefault(); dropzone.classList.add('dragging');
+      });
+    });
+    ['dragleave', 'drop'].forEach(function(ev) {
+      dropzone.addEventListener(ev, function(e) {
+        e.preventDefault(); dropzone.classList.remove('dragging');
+      });
+    });
+
+    dropzone.addEventListener('drop', function(e) {
+      if (!e.dataTransfer.files.length) return;
+      var dt = new DataTransfer();
+      dt.items.add(e.dataTransfer.files[0]);
+      input.files = dt.files;
+      input.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+
+    input.addEventListener('change', function() {
+      var name_field = document.getElementById('asset_name');
+      if (input.files.length && name_field && name_field.value === '') {
+        name_field.value = input.files[0].name.replace(/\.[^.]+$/, '');
+      }
+    });
+  }
+
+
   jQuery.ajaxSetup({
     'beforeSend': function(xhr) {xhr.setRequestHeader("Accept", "text/javascript");}
   });
diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 9f737752..69f0fcf2 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -1386,6 +1386,17 @@ div#draft_list table td.actions a {
   background-color: #fffdf5;
 }
 
+#asset_dropzone {
+  border: 2px dashed #ccc;
+  border-radius: 6px;
+  padding: 1.5rem;
+}
+
+#asset_dropzone.dragging {
+  border-color: #f96;
+  background: #fff8f2;
+}
+
 /* ============================================================
    Live edit preview
    ============================================================ */