3

I want created a form to upload document by using POST method to call an API.

It did work well in desktop, but mobile browser totally doesn't work on the upload action.

Device : IPhone X - IOS 11.4

Mobile Browser: Google Chrome & Safari (both are the updated as now)

Html Code:

<form id="docsUpload">
    <input type="hidden" name="token" value="aa">
    <input type="file" class="upload-file" id="brFile" name="brFile" data-text="Find file">
    <button id="submitBtn" class="btn btn-custom btn-upload" type="button">
        <span name="langKey">Upload</span>
    </button>
</form>

JQUERY Code:

$('#submitBtn').on('click', function (e) {
    e.preventDefault();
    var data = new FormData($('#docsUpload')[0]);
    var newToken = data.get('token');
    newToken = encodeURIComponent(newToken);

    $.ajax({
        url: host + 'uploadFile?token=' + newToken,
        type: 'POST',
        data: data,
        cache: false,
        dataType: 'json',
        enctype: 'multipart/form-data',
        processData: false, // Don't process the files
        contentType: false, // Set content type to false as jQuery will tell the server its a query string request
        success: function (response) {
            console.log(response)
            if (response.isUploadSuccess) {
                return showResult('ok', 'uploadSuccess', response.uploadMessage);
            }
            return showResult('fail', 'uploadFail', response.uploadMessage);
        }, error: function (jqXHR, textStatus, errorThrown) {
            console.log(jqXHR);
            let errorMsg = JSON.stringify(jqXHR)
            return showResult('fail', 'uploadFail', errorMsg + '<br>' + textStatus + '<br>' + errorThrown)
        }
    })
});

The above code is totally working fine in PC browser, but when run in mobile i always get the below error:

{"readtState":0,"status":0,"statusText":"error"}

Additional Info:

  • The "host" in the ajax url is https://www.example-A.com, and the JS is loaded in https://www.example-B.com. BUT, www.example-A.com web server side already set the Access-Control-Allow-Origin to wildcard ("*"). Thats why PC browser is totally working fine.

I am totally lost now.. Please help.

Thank you.

Jerry
  • 1,455
  • 1
  • 18
  • 39
  • https://stackoverflow.com/questions/19395354/jquery-ajax-readystate-0-responsetext-status-0-statustext-error discusses a similar error to yours, but the solution seems to be using `e.preventDefault()`, which you are indeed including. – UpQuark Jul 16 '18 at 03:55
  • Per https://stackoverflow.com/questions/11994833/event-preventdefault-not-canceling-link-direction-in-jquery-mobile, have you tried `e. stopPropagation()` as well? – UpQuark Jul 16 '18 at 03:57
  • yea, i did try that, unfortunately it still doesn't work – Jerry Jul 16 '18 at 04:04
  • What does "totally doesn't work on the upload action" mean exactly? What is happening specifically? – Wesley Smith Jul 16 '18 at 05:05
  • when click on the upload button, the it show the error `{"readtState":0,"status":0,"statusText":"error"}`. – Jerry Jul 16 '18 at 06:22
  • Ideally it should work , However the result depends on many factors , the internet connection strength ,the file size and the file type are the most important ones . – Ashraf Sep 18 '18 at 07:00
  • Maybe you check your size of file you upload. – XuXu Aug 28 '21 at 10:03

2 Answers2

0

I had this same issue. I did not able to resolve that. one more thing i want to add that for me even on mobile WiFi network it was working failing only on mobile data. I did add one more page on same origin and from server side did get JSON and render to the browser and at least this solved form me.

Nisarg Desai
  • 361
  • 3
  • 16
0

This is probably too much of a late answer. But I ran into the same problem today. Not sure if it will help anyone, but figured out it was our server running Nginx which has a file upload limit of 1MB. As soon as we increased this limit, we stopped getting these rejections.

Here is a source about learning of Ngnix file size upload limits. Hope it helps someone else who may encounter the same problem.

https://www.tecmint.com/limit-file-upload-size-in-nginx/

Frank Altamirano
  • 1