Safari 11.1: ajax/XHR form submission fails when input[type=file] is empty

UPDATE: Old answer does NOT work in Firefox.

Firefox returns just empty string for FormData.get() on empty file field (instead of File object in other browsers). So when using old workaround, empty <input type="file"> will be sent like as empty <input type="text">. Unfortunately, there is no way to distinguish an empty file from an empty text after creating FormData object.

Use this solution instead:

var $form = $('form')var $inputs = $('input[type="file"]:not([disabled])', $form)$inputs.each(function(_, input) {  if (input.files.length > 0) return  $(input).prop('disabled', true)})var formData = new FormData($form[0])$inputs.prop('disabled', false)

Live Demo: https://jsfiddle.net/ypresto/05Lc45eL/

For non-jQuery environment:

var form = document.querySelector('form')var inputs = form.querySelectorAll('input[type="file"]:not([disabled])')inputs.forEach(function(input) {  if (input.files.length > 0) return  input.setAttribute('disabled', '')})var formData = new FormData(form)inputs.forEach(function(input) {  input.removeAttribute('disabled')})

For Rails (rails-ujs/jQuery-ujs): https://gist.github.com/ypresto/cabce63b1f4ab57247e1f836668a00a5

Old Answer:

Filtering FormData (in Ravichandra Adiga's answer) is better because it does not manipulate any DOM.

But the order of parts in FormData is guaranteed to be the same order to input elements in form, according to <form> specification. It could cause another bug if someone relies on this spec.

Below snippet will keep FormData order and empty part.

var formDataFilter = function(formData) {    // Replace empty File with empty Blob.  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)    }  })  return newFormData}

Live example is here:https://jsfiddle.net/ypresto/y6v333bq/

For Rails, see here: https://github.com/rails/rails/issues/32440#issuecomment-381185380

(NOTE: iOS 11.3's Safari has this issue but 11.2 is not.)

For workaround I delete the input type file completely from DOM using jQuery remove() method.

$("input[type=file]").each(function() {    if($(this).val() === "") {        $(this).remove();    }});

As of Webkit build r230963, this issue has been resolved in Webkit. I downloaded and ran that build and confirmed the issue is resolved. Not idea when a public release will be available for Safari that contains this fix.