rails: form_with doesn't post remote forms with empty file input on Safari

Created (updated) workaround snippet: https://gist.github.com/ypresto/b4715b06230d4014a90eaacc3445158f

// 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

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. https://stackoverflow.com/questions/49614091/safari-11-1-ajax-xhr-form-submission-fails-when-inputtype-file-is-empty

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:

this.App || (this.App = {});
this.App.util = (function () {
    function delegate(event, selector, callback) {
        document.addEventListener(event, function (e) {
            if (e.target.matches(selector)) {
                e.stopPropagation();

                self = e.srcElement || e.target;
                callback(e);
            }
        });
    }

    return {
        delegate: delegate,
    };
})();

App.util.delegate("click", "input[type='submit']", function(){
    var file_input = document.querySelector("input[type=file]");
    if (file_input.files.length === 0) file_input.parentNode.removeChild(file_input);
});