Add drag file to upload feature.

app/views/admin/archive_files/_form.html.erb

@@ -18,7 +18,38 @@
 <% end %>
 
   <%#= f.error_messages %>
-
+<style>
+  #fileupload {
+    position: relative;
+    clear: both;
+    overflow: hidden;
+    height: 254px;
+  }
+  #fileupload #dropzone.drop {
+    position: absolute;
+    left: 0;
+    right: 0;
+    border: 2px dashed #0088CC;
+    border-radius: 10px;
+    color: #0088CC;
+    background-color: #FFFFFF;
+    z-index: 0;
+  }
+  #fileupload #dropzone {
+    padding: 30px;
+    text-align: center;
+    font-size: 3em;
+    font-family: 'Raleway';
+    line-height: 1.2em;
+    color: #e4e4e4;
+  }
+  #fileupload #dropzone.in {
+    opacity: .7;
+    z-index: 2;
+    border-color: #faa732;
+    color: #faa732;
+  }
+</style>
 <!-- Input Area -->
 <div class="input-area">
 
@@ -170,6 +201,12 @@
             <hr>
           </div>
         <% end %>
+        <div id="fileupload" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);" ondragleave="(function(){$('#dropzone').removeClass('in');})()">
+          <div id="dropzone" class="drop">
+            <div data-icons=""></div>
+            <%=t("archive.drag_file_to_here")%>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -184,6 +221,67 @@
 
 <% content_for :page_specific_javascript do %>
   <script>
+    function FileListItems (files) {
+      var b = new ClipboardEvent("").clipboardData || new DataTransfer()
+      for (var i = 0, len = files.length; i<len; i++) b.items.add(files[i])
+      return b.files
+    }
+    function change_files_to_file_field(file_field,files){
+      var fileupload = $(file_field).parents(".fileupload");
+      if(fileupload.length > 0){
+        fileupload.find(".fileupload-preview").text(files[0].name);
+      }
+      var files_list = new FileListItems(files)
+      $(file_field).prop("files" ,files_list);
+    }
+    function dragOverHandler(ev) {
+      document.activeElement.blur();
+      $(ev.target).addClass("in");
+      // Prevent default behavior (Prevent file from being opened)
+      ev.preventDefault();
+    }
+    function dropHandler(ev) {
+      // Prevent default behavior (Prevent file from being opened)
+      ev.preventDefault();
+      var files = [];
+      if (ev.dataTransfer.items) {
+        // Use DataTransferItemList interface to access the file(s)
+        for (var i = 0; i < ev.dataTransfer.items.length; i++) {
+          // If dropped items aren't files, reject them
+          if (ev.dataTransfer.items[i].kind === 'file') {
+            var file = ev.dataTransfer.items[i].getAsFile();
+            files.push(file)
+          }
+        }
+      } else {
+        // Use DataTransfer interface to access the file(s)
+        for (var i = 0; i < ev.dataTransfer.files.length; i++) {
+          var file = ev.dataTransfer.files[i];
+          files.push(file)
+        }
+      }
+      files.forEach(function(file){
+        var single_file = [file];
+        var file_field = add_file_field();
+        change_files_to_file_field(file_field,single_file);
+      })
+      $(ev.target).removeClass("in");
+    }
+    function add_file_field(){
+      var self = $('#add_file');
+      var new_id = $(self).prev().attr('value');
+      var old_id = new RegExp("new_archive_file_multiples", "g");
+      var on = $('.language-nav li.active').index();
+      var le = $('#add-target').children('.start-line').length;
+      $(self).prev().attr('value', parseInt(new_id) + 1);
+      $('#add-target').prepend(("<%= escape_javascript(add_attribute 'form_file', f, :archive_file_multiples) %>").replace(old_id, new_id).replace("new_archive_file_sort_order_XXX", parseInt(new_id) + 1));
+      var file_field = $('#add-target').find("*").eq(0).find("[type=\"file\"]");
+      $('#add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() {
+        $(self).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
+      });
+      formTip();
+      return file_field;
+    }
     $(document).ready(function() {
       $(".plugin-sortable").sortable({
         update : function(event, ui){
@@ -194,18 +292,7 @@
         }
       });
     	$('.main-forms .add-on').tooltip();
-      $(document).on('click', '#add_file', function(){
+      $(document).on('click', '#add_file', add_file_field); 
-        var new_id = $(this).prev().attr('value');
-        var old_id = new RegExp("new_archive_file_multiples", "g");
-        var on = $('.language-nav li.active').index();
-        var le = $('#add-target').children('.start-line').length;
-        $(this).prev().attr('value', parseInt(new_id) + 1);
-        $('#add-target').prepend(("<%= escape_javascript(add_attribute 'form_file', f, :archive_file_multiples) %>").replace(old_id, new_id).replace("new_archive_file_sort_order_XXX", parseInt(new_id) + 1));
-        $('#add-target').children('.start-line').eq(le).children('.input-append').find('.tab-content').each(function() {
-          $(this).children('.tab-pane').eq(on).addClass('in active').siblings().removeClass('in active');
-        });
-        formTip();
-      }); 
       $(document).on('click', '.delete_file', function(){
         $(this).parents('.input-prepend').remove();
       });

config/locales/en.yml

@@ -2,6 +2,7 @@ en:
   restful_actions:
     categories_order: Categories Order
   archive:
+    drag_file_to_here: Drag file to here
     description: File description
     category: Category
     sort_number: Sort Order

config/locales/zh_tw.yml

@@ -2,6 +2,7 @@ zh_tw:
   restful_actions:
     categories_order: 類別排序
   archive:
+    drag_file_to_here: 拖移檔案到此
     description: 檔案簡介
     category: 類別
     sort_number: 排序號碼