My $ .ajax request stopped working on iOS 11.3

Question

This code worked very well and quickly for many years.

Given that $ .ajax does not receive any files, since upgrading to iOS 11.3 this $ .ajax has been running very slowly for up to 20 seconds to send a simple text form when testing in the iOS browser.

But if a file element transfers file data, $ .ajax works fine in both cases and as fast as expected.

HTML ---
<form enctype="multipart/form-data" id="chatform" method="post">
    <input type="file" name="pic" id="pic" class="hidden" />
    <textarea name="chattextarea" id="chattextarea" rows="3" cols="10"></textarea>
    <input type="button" value="Send" onclick="sendMessage();" />
</form>

JavaScript ---
function sendMessage() {
    var formData = new FormData($("#chatform")[0]);
    $.ajax({
        url: 'send.php',
        type: 'POST',
        data: formData,
        async: true,
        cache: false,
        contentType: false,
        processData: false,
        success: function (returndata) {
            /* some success message */
        }
    });
}

Is this a bug in iOS 11.3?

----- EDIT -----

Yes, indeed, this is not only an iOS 11.3 bug, but also a Safari 11.1 bug. While I tested these environments and replicated the error:

• Mac OS, Safari
• iOS, Safari
• iOS Chrome
• iOS, WKWebView (hybrid application)

I wrote a simple workaround, please check my answer and let me know if you have a cleaner solution.

Answer 1

formData :

if(!file.val()){
   file.attr('disabled', true);
}

Answer 2

! - , , . - iOS 11.3 - 1 , - . , . , , , "" .

Answer 3

!!! IOS , . - ? , .

Answer 4

.

, Apple: (

function sendMessage() {
    // Form does not have file selected
    if(!$("#pic").val()) {
        var formData = $("#chatform").serialize();
        $.post("send.php", formData, function(data) {
            /* success */
        });
    }
    // Form has file selected
    else {
        var formData = new FormData($("#chatform")[0]);
        $.ajax({
            url: 'send.php',
            type: 'POST',
            data: formData,
            async: true,
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                /* success */
            }
        });
    }
}

, , .

Answer 5

:

if(!imageUsed){
   formData.delete('file[]');
}

, , , .

Answer 6

! . , Apple ...

    var formData = new FormData( this );

    if(!$("#image").val()) {
    formData.delete('image_file');
    }

    if(!$("#pdf").val()) {
    formData.delete('pdf_doc');
    }

    $.ajax({
    type: 'post',
    data: formData
    //and so on...

Answer 7

iOS 11.3, iOS 10.2 Chrome 65.0.3325.181. - ?

function formDataFileFix(formData) {
    try {
        if (formData.keys) {
            var formKeysToBeRemoved = [];
            for (var key of formData.keys()) {
                var fileName = null || formData.get(key)['name'];
                var fileSize = null || formData.get(key)['size'];
                if (fileName != null && fileSize != null && fileName == '' && fileSize == 0) {
                    formKeysToBeRemoved.push(key);
                }
            }
            for (var i = 0; i < formKeysToBeRemoved.length; i++) {
                formData.delete(formKeysToBeRemoved[i]);
            }
        }
    }
    catch(err) {
        console.log(err.message);
    }
}

var formData = new FormData($(formID)[0]);
formDataFileFix(formData);