Menu
I am running a Symfony 2.8 based web app which sends some form data back to a controller using Ajax.
So far everything worked fine, but since the latest macOS update to version 10.13.4 users start to report, that submitting the form does not work anymore in Safari. Other macOS Versions and other browsers on 10.13.4 still work fine, so it seems to be a problem in Safari. Of course I filed a bug report to Apple, but I do not think, that I will ever get feedback from there...
I was able to isolate the source of the problem: Submitting data which includes an empty file input fails:
// safri_bug.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form name="app_booking" method="post" action="/test/submit.php">
<div><input type="text" id="someValue" name="value"></div>
<div><input id="thefile" type="file" name="file"></div>
</form>
<button id="bSubmit" type="button">Submit</button>
<script>
$(document).ready(function() {
$('#bSubmit').click(function() {
var form = $('form');
var data = new FormData(form[0]);
$.ajax({
url : '/submit.php',
type : 'POST',
data : data,
contentType: false,
processData: false,
context : this,
success : function(response) {
alert('success: ' + response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('error: ' + xhr.responseText + ' - ' + thrownError);
}
});
});
});
</script>
</body>
</html>
// submit.php
<?php
echo "OK";
Result
submit.php does NOT get called. So, this seems to be a bug in the latest Safari update? Or is there anything wrong with my code?
Any idea how to prevent this bug?
393
Andrei Herford's solution will crash other browsers that do not support the entries() method of FormData - using try/catch will only find execution errors, not syntax errors.
Our solution was to use plain JavaScript to remove the empty file input element before creating the FormData object, thus:
for (i = 0; i < form.elements.length; i++) {
if (form.elements[i].type == 'file') {
if (form.elements[i].value == '') {
form.elements[i].parentNode.removeChild(form.elements[i]);
}
}
}
I use FormData throughout my site and can verify that this is a problem with the latest version of Safari. Removing the empty file fixes the problem. Here's the code that worked for me:
var form = $('#formID');
var data = new FormData(form[0])
//hack to fix safari bug where upload fails if file input is empty
if (document.getElementById("fileID").files.length == 0 ) { //if the file is empty
data.delete('fileID'); //remove it from the upload data
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
