Redmine

I can confirm that files won't uploaded via drag & drop on Safari 5.1.7 (Windows). See http://bugs.jquery.com/ticket/12182

I have to correct myself: It does work with Safari 6, but it does not work with Safari 5.1.9 (MacOS 10.6)

Confirm. Run in exactly the same bug. Is someone already working on a fix?

We've run into this one too Safari 5.1.7 on Windows 7 and Windows 8 - in Redmine version 2.3.3.

Same here with Safari 5.1.10 (6534.59.10) on OS X 10.6.8 with Redmine 2.3.2.

A client of Planio encountered the same issue on Mac OS 10.6 and Safari 5.1.9.

The problem is that Safari 5.1 only partially supports the API needed for this: it can pass files around and give the names of the files, but it cannot send the files as a binary stream directly. There are workarounds to emulate this, but the platform is pretty dated, so we instead chose to fallback to the normal (non-ajax) upload for Safari 5.1 (or any other browser that doesn't support the FileReader API, which is what is ultimately needed to achieve this the way it is currently implemented in Redmine):

diff --git a/public/javascripts/attachments.js b/public/javascripts/attachments.js
index ab9f89a..a689c2e 100644
--- a/public/javascripts/attachments.js
+++ b/public/javascripts/attachments.js
@@ -117,7 +117,7 @@ function uploadBlob(blob, uploadUrl, attachmentId, options) {
 function addInputFiles(inputEl) {
   var clearedFileInput = $(inputEl).clone().val('');

-  if (inputEl.files) {
+  if ('FileReader' in window && inputEl.files) {
     // upload files using ajax
     uploadAndAttachFiles(inputEl.files, inputEl);
     $(inputEl).remove();

The ajax/async upload function still works on modern browsers but is disabled for browsers that don't provide all required APIs for it.

While this hack¹ allows the user to click on the "choose" button for <input type=file> and select a file, you still cannot drag a file and upload. Safari 5.1 has no problems uploading File objects via ajax that are drag and dropped (I use it all the time.) The real culprit here is jQuery 1.8.3.

It's jQuery.extend which transforms the File object into a plain Object. $.extend is called from ajaxSetup, which is called from $.ajax on line 7644

re-attaching blob [object File] in beforeSend does the trick

diff --git a/attachments.js.original b/attachments.js
index 43803ba..b6d9eca 100644
--- a/attachments.js.original
+++ b/attachments.js
@@ -99,8 +99,10 @@ function uploadBlob(blob, uploadUrl, attachmentId, options) {
   return $.ajax(uploadUrl, {
     type: 'POST',
     contentType: 'application/octet-stream',
-    beforeSend: function(jqXhr) {
+    beforeSend: function(jqXhr, settings) {
       jqXhr.setRequestHeader('Accept', 'application/js');
+      //attach proper File object 
+      settings.data = blob;
     },
     xhr: function() {
       var xhr = $.ajaxSettings.xhr();
@@ -117,7 +119,7 @@ function uploadBlob(blob, uploadUrl, attachmentId, options) {
 function addInputFiles(inputEl) {
   var clearedFileInput = $(inputEl).clone().val('');

-  if ('FileReader' in window && inputEl.files) {
+  if (inputEl.files) {
     // upload files using ajax
     uploadAndAttachFiles(inputEl.files, inputEl);
     $(inputEl).remove();

¹ FileReader API is not needed at all.