XMLHttpRequest cannot correctly send FormData that has an empty file element in Microsoft Edge
Warning
The retired, out-of-support Internet Explorer 11 desktop application has been permanently disabled through a Microsoft Edge update on certain versions of Windows 10. For more information, see Internet Explorer 11 desktop app retirement FAQ.
This article provides the workaround to solve the issue that FormData
that contains an empty file element cannot be sent correctly by XMLHttpRequest
in Microsoft Edge for Windows 10, version 1809.
Original product version: Microsoft Edge, Windows 10
Original KB number: 4490157
Symptoms
When the XMLHttpRequest
(jQuery.ajax()
) method is sent, it cannot correctly send a FormData
object that contains an empty file element in Microsoft Edge for Windows 10, version 1809.
For example, you set a file that contains one file element only and all the other file elements blank as in the following code example:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"
integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
crossorigin="anonymous"></script>
</head>
<body>
<form action="/AjaxUploadSample/Home/FileUpload" enctype="multipart/form-data" method="post">
<input name="files" id="files" type="file" value=""><br>
<input name="files" id="files" type="file" value=""><br>
<input name="files" id="files" type="file" value=""><br>
<button id="btn" type="button">Async Upload</button>
</form>
<hr>
<p id="message" style="white-space:pre;"></p>
<script>
$(document).ready(function () {
$("#btn").on("click", function () {
var _form = $(this).closest("form")[0];
$.ajax({
type: "post",
url: _form.action,
processData: false,
contentType: false,
data: new FormData(_form),
success: function (data, textStatus, jqXHR) {
$("#message").text(data.Message);
}
});
});
});
</script>
</body>
</html>
When you click Async Upload, the set file is not recognized correctly.
Cause
This issue occurs when the implementation of FormData
is changed in Microsoft Edge for Windows 10, version 1809.
Workaround
To work around this issue, insert the following code before $.ajax()
is called and explicitly skip empty entries.
// Workaround
var _data = new FormData(_form);
if (_data.entries)
{
var data = new FormData();
for (var p of _data)
{
if (p[1])
{
// p[1] is the value of form entry
data.append(p[0], p[1]);
}
} _data = data;
}
$.ajax(
{
type: 'post',
url: _form.action,
processData: false,
contentType: false,
data: _data,
success: function (data, textStatus, jqXHR)
{
$('#message').text(data.Message);
}
});
Feedback
https://aka.ms/ContentUserFeedback.
Coming soon: Throughout 2024 we will be phasing out GitHub Issues as the feedback mechanism for content and replacing it with a new feedback system. For more information see:Submit and view feedback for