Drag and drop file upload to file type custom field (#30776).

Patch by Mizuki ISHIKAWA.


git-svn-id: http://svn.redmine.org/redmine/trunk@20712 e93f8b46-1217-0410-a6f0-8f06a7374b81

4 files changed, 19 insertions, 5 deletions

diff --git a/app/views/attachments/_form.html.erb b/app/views/attachments/_form.html.erb
index 6dd07a9d4..7bda59c95 100644
--- a/app/views/attachments/_form.html.erb
+++ b/app/views/attachments/_form.html.erb
@@ -1,9 +1,10 @@
 <% attachment_param ||= 'attachments' %>
+<% attachment_format_custom_field ||= false %>
 <% saved_attachments ||= container.saved_attachments if defined?(container) && container %>
 <% multiple = true unless defined?(multiple) && multiple == false %>
 <% show_add = multiple || saved_attachments.blank? %>
 <% description = (defined?(description) && description == false ? false : true) %>
-<% css_class = (defined?(filedrop) && filedrop == false ? '' : 'filedrop') %>
+<% css_class = (defined?(filedrop) && filedrop == false ? '' : (attachment_format_custom_field ? 'custom-field-filedrop' : 'filedrop')) %>
 
 <span class="attachments_form">
   <span class="attachments_fields">
@@ -30,7 +31,7 @@
         :multiple => multiple,
         :onchange => 'addInputFiles(this);',
         :data => {
-          :max_number_of_files_message => l(:error_attachments_too_many, :max_number_of_files => 10),
+          :max_number_of_files_message => l(:error_attachments_too_many, :max_number_of_files => (multiple ? 10 : 1)),
           :max_file_size => Setting.attachment_max_size.to_i.kilobytes,
           :max_file_size_message => l(:error_attachment_too_big, :max_size => number_to_human_size(Setting.attachment_max_size.to_i.kilobytes)),
           :max_concurrent_uploads => Redmine::Configuration['max_concurrent_ajax_uploads'].to_i,
diff --git a/lib/redmine/field_format.rb b/lib/redmine/field_format.rb
index 32b645d1d..70a60a577 100644
--- a/lib/redmine/field_format.rb
+++ b/lib/redmine/field_format.rb
@@ -1070,7 +1070,8 @@ module Redmine
               :multiple => false,
               :description => false,
               :saved_attachments => [attachment].compact,
-              :filedrop => false
+              :filedrop => true,
+              :attachment_format_custom_field => true
             })
       end
     end
diff --git a/public/javascripts/attachments.js b/public/javascripts/attachments.js
index 7e66939d6..63e72bac8 100644
--- a/public/javascripts/attachments.js
+++ b/public/javascripts/attachments.js
@@ -182,7 +182,11 @@ function handleFileDropEvent(e) {
 
   if ($.inArray('Files', e.dataTransfer.types) > -1) {
     handleFileDropEvent.target = e.target;
-    uploadAndAttachFiles(e.dataTransfer.files, $('input:file.filedrop').first());
+    if ($(this).hasClass('custom-field-filedroplistner')){
+      uploadAndAttachFiles(e.dataTransfer.files, $(this).find('input:file.custom-field-filedrop').first());
+    } else {
+      uploadAndAttachFiles(e.dataTransfer.files, $(this).find('input:file.filedrop').first());
+    }
   }
 }
 handleFileDropEvent.target = '';
@@ -211,6 +215,14 @@ function setupFileDrop() {
           paste: copyImageFromClipboard
       }).addClass('filedroplistner');
     });
+
+    $('form div.box input:file.custom-field-filedrop').closest('p').not('.custom-field-filedroplistner').each(function() {
+      $(this).on({
+          dragover: dragOverHandler,
+          dragleave: dragOutHandler,
+          drop: handleFileDropEvent
+      }).addClass('custom-field-filedroplistner');
+    });
   }
 }
 
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 126993048..960ceaefd 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -925,7 +925,7 @@ span.required {color: #bb0000;}
 a.remove-upload:hover {text-decoration:none !important;}
 .existing-attachment.deleted .filename {text-decoration:line-through; color:#999 !important;}
 
-div.fileover { background-color: lavender; }
+div.fileover, p.custom-field-filedroplistner.fileover { background-color: lavender; }
 
 div.attachments p { margin:4px 0 2px 0; }
 div.attachments img { vertical-align: middle; }