Norway


I have a project where I need to upload multiple images asynchronously. It was working great everywhere (Chrome, Firefox, MacOS Safari, Chrome, Safari on an simulator running 11.4). However, on my iPhone using Safari (and a few other iPhones I tried all running 11.4) the existing were when I the image/file picker.

I’ve since distilled the problem down to some much more simple code:

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="/javascripts/main.js"></script>
  </head>
  <body>
    <p>Upload Progress: <span id="status">Not Started</span></p>
    <p>Blob Upload: <button id="blobUpload">Upload Blob</button></p>
    <p>File Input: <input type="file" /></p>
  </body>
</html>

This is main.js:

$(document).(() => {
  $("#blobUpload").click(() => {

    const status = document.getElementById("status");
    status.innerHTML = "Started";

    // Create an array about 2mb in size (similar to an image);
    // and append it to a form  object
    const intArray = new Uint8Array(2000000);
    const blob = new Blob([intArray]);
    const formData = new FormData();
    formData.append('file', blob);

    const request = new XMLHttpRequest();

    request.upload.addEventListener('progress', (ev) => {
      const percent = Math.round(ev.loaded / ev.total * 100);
      status.innerHTML = percent + '%';
    }, false);

    request.upload.addEventListener('error', (ev) => {
      status.innerHTML = '<span style="color: red"> Error</span>';
    });

    request.open('POST', '/upload', true);
    request.send(formData);
  });
});

If I click the ‘Upload Blob’ button and then don’t do anything else, it works 100% of the time, never ever fails. However, if I click the upload blob button, then while it’s uploading I click a file input (which is totally unrelated to everything else), choose one of the menu options (Take Photo or Video, Photo Library, or Browse), then either choose something, or take a photo, or even just hit cancel to go back, the uploading blob will fail about 1/3 of the time with a ‘Failed to load resource: The network connection was lost.’ error. It doesn’t matter what is being uploaded, (image or blob or whatever).

Here is a video showing what happens.

It’s been 2 days of debugging this, and I’ve found NOTHING of interest in my research and believe me I’ve tried. Any help would be appreciated. Beginning to believe it may just be a bug with Safari.



Source link

LEAVE A REPLY

Please enter your comment!
Please enter your name here