form_with doesn't post remote forms with empty file input on Safari #32440
Comments
|
I've tried Demo Repository in Chrome and Safari. Chrome: v65.0.3325.181Safari: v11.0.3 (13604.5.6) |
|
From your logs it seems you selected a file in both cases (beach-xxx.jpg). Please try again, but leave the input empty. Just open the new photo page and click save. You will notice that the button is disabled but there's no network request (on safari) |
|
I got it. Thanks. |
|
I reproduced in Safari. It looks ActionController::InvalidAuthenticityToken error. It might be better to check these header's diff. SafariChrome |
|
That's better than what I get. While I made a mistake when I said that there's no network activity (safari shows a post request, but it just hangs there), my server logs don't show anything after the GET request for Edit: Just noticed you are using an earlier version of Safari then the one I'm using. That might be way we are getting different things. |
|
Hi, I just came across with a similar problem and found this SO. Probably it's not a bug in Rails? Hope it would be of your help. |
Adding a comment to rails/rails#32440 to explain the relevance of this commit.
|
I think this has come about with this change More specifically the change to ensure Default to remote: true Which was merged into rails 5.1 This means that data-remote=true as added even though it's not specified in the form above https://github.com/brenogazzola/turbolinks-bug-demo. Here is a shot from the inspector devtools inspector for chrome. This of course, is the same html for Safari but maybe Safari reads this data-remote as more explicit. For inputs of type file anyway. At a guess, it looks for the AJAX request in the in the javascript and doesn't default to a regular HTTP post request when there's no related javascript to be found. Not sure just a hypothesis. What we can demonstrate though is that if we set data-remote to false, safari works as expected.. Here is the forked request of your demo @brenogazzola jrae/turbolinks-bug-demo@bba828f Seems this default behaviour was added for a reason so hesitant to add a pull request to undo this behaviour. New to open source contributions but keen to do more - please let me know of best practices/comments :). (thanks @kpearson for the open source meetup session) |
|
Hi! I also got some problems with empty file inputs on data-remote forms. I think the problem is related to the new security feature in Safari: https://support.apple.com/en-us/HT208695 |
|
@jrae not sure what's the difference between |
|
@brenogazzola Nice! Prevents rails-ujs adding the data-remote attribute altogether 👍 A better solution :) Looks like they intended it to be used this way by the generated template |
|
I'm experiencing the same issue and I have to use remote because I want to submit the form with Ajax. Have you guys found any workaround? |
|
Unfortunately not. I thought of capturing a form submit event and removing the empty file input, but I couldn't get the submit it to trigger (maybe a Turbolinks thing?). Capturing clicks on the submit button wouldn't for me either since I sometimes trigger the submit programatically and didn't want to refactor. Still, if you want to try the submit button method, the closest I got was the code below (I'm not using jQuery, that's why I'm adding the event delegation code I use below: |
|
I confirmed that this also reproduces in iOS 11.3 (real devise and simulator) but not in 11.2 (simulator). |
|
Created (updated) workaround snippet: // iOS 11.3 Safari / macOS Safari 11.1 empty <input type="file"> XHR bug workaround.
// Replace empty File object with equivalent Blob in FormData, keeping its order, before sending it to server.
// Should work with IE10 and all other modern browsers.
// Because useragent value can be customized by WebView or etc., applying workaround code for all browsers.
// https://stackoverflow.com/questions/49614091/safari-11-1-ajax-xhr-form-submission-fails-when-inputtype-file-is-empty
// https://github.com/rails/rails/issues/32440
document.addEventListener('ajax:beforeSend', function(e) {
var formData = e.detail[1].data
if (!(formData instanceof window.FormData)) return
if (!formData.keys) return // unsupported browser
var newFormData = new window.FormData()
Array.from(formData.entries()).forEach(function(entry) {
var value = entry[1]
if (value instanceof window.File && value.name === '' && value.size === 0) {
newFormData.append(entry[0], new window.Blob([]), '')
} else {
newFormData.append(entry[0], value)
}
})
e.detail[1].data = newFormData
})See here for detail: https://stackoverflow.com/a/49827426/1474113 |
|
This seems Webkit's bug and already fixed by https://trac.webkit.org/changeset/230963/webkit. |
Webkit bug: rails/rails#32440 When file input is empty, safari don't send xhr request.
When using form_with with a single file_field (using the form helper), the form will not submit on Safari for OSX if no file was chosen. Switching to "local: true", solves the problem.
Steps to reproduce
1 - Create a form using form_with;
2 - Add a single file input field using the file_field helper;
3 - Without selecting a file, click submit.
Expected behavior
Form is submitted in all browsers
Actual behavior
In Safari the form isn't submitted. In Chrome, Android and Safari iOS the form is submitted.
System configuration
Rails version:
5.2.0.rc2
Ruby version:
2.4.3 and 2.5.0
OSX version:
10.13.4
Safari version:
11.1 (13605.1.33.1.2)
Relevant Code
Demo Repository
https://github.com/brenogazzola/turbolinks-bug-demo
The text was updated successfully, but these errors were encountered: