ios - formdata - wordpress ajax not working on mobile




My $.ajax request stopped working properly on iOS 11.3 (6)

I had the same problem, this worked for me, I hope my solution helps anyone :

Before the Ajax request :

// disable all empty inputs with type file : 

 let fileInputs = document.querySelectorAll(".myForm input[type=file]");
        fileInputs.forEach(function (file) {

            let fileInput =  $('#'+file.id);
            if(fileInput.get(0).files.length === 0){
                fileInput.attr('disabled',true);
            }

        });

Then here you make your normal Ajax request.

Note : after that you might need to enable your inputs with type files again. ( The same way you disabled them )

 let myFiles = document.querySelectorAll(".myForm input[type=file]");
        myFiles.forEach(function (file) {
            let fileInput =  $('#'+file.id);
            fileInput.attr('disabled',false);
        });

This code used to work just fine and fast for years.

Given that $.ajax does not receive any file data, as of update to iOS 11.3 this $.ajax seems to work very slowly up to 20 seconds to submit a simple text-only form when tested on iOS browser.

But if the file element passes file data, the $.ajax works just fine in both cases and just 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 an iOS 11.3 bug?

----- EDIT -----

Yes indeed it is not only iOS 11.3 bug, but also a Safari 11.1 bug. So far I tested these environments and replicated the bug:

  1. Mac OS, Safari
  2. iOS, Safari
  3. iOS, Chrome
  4. iOS, WKWebView (hybrid app)

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


I have the exact same problem! I have a web application with several forms that dont work anymore if the user NOT choose to include a file. Have been running iOS 11.3 beta since beta 1 and hoped that every New beta should resolve this problem. Quite annoying that the problem persists in the public release. Hopefully there will be more info on how to solve this now when this ”bug” affects so many more people.


My workaround is to separate behavior for forms with and without file selected.

This solution is quite nasty, but it works around an Apple bug :(

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 */
            }
        });
    }
}

Please let me know if you have a cleaner solution.


Same problem here !!! Since many IOS users are upgrading it will be a real problem. Did someone find a workaround for this problem ? Works if I send a file.


Thank you! I combined the two previous answers to a cleaner and working example. I though think Apple should fix this in a hurry...

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

This function works on iOS 11.3, iOS 10.2 and windows Chrome 65.0.3325.181. Can someone help to test on other browsers?

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);




ajax