JavaScript Using FormData and jQuery's ajax for uploading files returns error 500 when no file is selected on iOS

Question

I'm using FormData and jQuery's ajax for uploading files in form. Everything works fine except when there's no file selected on iOS, then I get error 500 from PHP script.

On PC and Android it works fine if file is or isn't selected, but on iOS it works only if file is selected (it is not required to select file). I am using latest iOS 11.4.1.

This is my code that's called when the form is submitted:

var form = this;
var data = new FormData(form);

var options = {
    url: $(form).attr('action'),
    data: data,
    type: $(form).attr('method'),
    cache: false,
    contentType: false,
    processData: false,
    complete: function(r){
        if(r.status == 200){
            var response = r.responseJSON;

            showErrors(form, response.errors);
            $.each(response.actions, handleAction.bind(form));
        }else{
            showErrors(form, ['Vyskytla sa neočkávaná chyba, skúste znova neskôr']);
        }
    }
};
if(data.fake){
    opts.xhr = function(){
        var xhr = jQuery.ajaxSettings.xhr();
        xhr.send = xhr.sendAsBinary;
        return xhr;
    }
    opts.contentType = 'multipart/form-data;boundary='+data.boundary;
    opts.data = data.toString();
}

$.ajax(options);

There was a part of code that printed the response from server and this was the response:

{"readyState":4,"responseText":"\n\n\n\n
Internal Server Error

\n
The server encountered an internal error or\nmisconfiguration and was unable to complete\nyour request.

\n
Please contact the server administrator at \n [email protected] to inform them of the time this error occurred,\n and the actions you performed just before this error.

\n
More information about this error may be available\nin the server error log.

\n\n","status":500,"statusText":"Internal Server Error"}

"More information about this error may be available in the server error log." It's a server-side error, you need to debug on the server and/or show us your backend code. — DarthJDG
– DarthJDG, Commented Jul 30, 2018 at 9:03
Because of this error I put only this code in PHP script: header('Content-Type: application/json');echo json_encode($_POST, $_FILES);. And I'm not really sure where the server error log is located. — Matej
– Matej, Commented Jul 30, 2018 at 9:04
I don't have access to file system of the hosting, but according to phpinfo the error_log value is not even set. — Matej
– Matej, Commented Jul 30, 2018 at 9:10
You really need a development machine with full access to debug server side code, otherwise if you don't even see the error messages, that will be a lot of trial and error. Also, check the manual for json_encode(), the second argument is additional options. php.net/manual/en/function.json-encode.php — DarthJDG
– DarthJDG, Commented Jul 30, 2018 at 9:14

Matej · Accepted Answer · 2018-07-31 09:12:20Z

1

I finally found the solution to my problem, it was not on the server side. Looks like FormData puts array of one empty File object on iOS into data variable and server cannot handle that.

I edited JS to this:

var data = new FormData(form);
$.each($(form).find('input[type="file"]'), function(){
    var name = $(this).attr('name');
    var files = $(this).prop('files');

    if(files.length == 0){
        data.set(name, null);
    }
});

answered Jul 31, 2018 at 9:12

Matej

1863 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript Using FormData and jQuery's ajax for uploading files returns error 500 when no file is selected on iOS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related