Vote #73853
完了File upload does not work with Safari
0%
説明
Tested with Safari 5.1.7 (Windows), but does also not work with -Safari 6 (MacOS)- Safari 5.1.9 (MacOS 10.6)
When you attach a file to an issue, a file with content
[object Object]
is created. The actual file is not uploaded.
journals
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":http://plan.io/redmine 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):
<pre><code class="diff">
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();
</code></pre>
The ajax/async upload function still works on modern browsers but is disabled for browsers that don't provide all required APIs for it.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
Committed in trunk r13184, 2.5-stable r13187, and 2.4-stable r13189, thanks.
--------------------------------------------------------------------------------
While this hack[1] 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":https://github.com/jquery/jquery/blob/869704ba067c9b444bb052140581a426a45baaf5/jquery.js#L291 which transforms the File object into a plain Object. $.extend is called from "ajaxSetup":https://github.com/jquery/jquery/blob/869704ba067c9b444bb052140581a426a45baaf5/jquery.js#L7533, which is called from "$.ajax on line 7644":https://github.com/jquery/jquery/blob/869704ba067c9b444bb052140581a426a45baaf5/jquery.js#L7644
re-attaching blob [object File] in @beforeSend@ does the trick
<pre><code class="diff">
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();
</code></pre>
fn1. FileReader API is not needed at all.
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
related_issues
relates,Closed,17151,File upload broken on Chrome 36
relates,Closed,17581,Drag & Drop does not work with Safari 5.1