title: Existing async requests failing with network error when file/image picker opened on iOS Safari
body: <p>I have a project where I need to upload multiple images asynchronously. It was working great everywhere (Chrome, Firefox, MacOS Safari, Android Chrome, iOS Safari on an iOS simulator running 11.4). However, on my iPhone using iOS Safari (and a few other iPhones I tried all running 11.4) the existing requests were failing when I opened the image/file picker.</p>
  
  <p>I've since distilled the problem down to some much more simple code:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;script src="https://code.jquery.com/jquery-2.2.4.min.js"&gt;&lt;/script&gt;
      &lt;script src="/javascripts/main.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;p&gt;Upload Progress: &lt;span id="status"&gt;Not Started&lt;/span&gt;&lt;/p&gt;
      &lt;p&gt;Blob Upload: &lt;button id="blobUpload"&gt;Upload Blob&lt;/button&gt;&lt;/p&gt;
      &lt;p&gt;File Input: &lt;input type="file" /&gt;&lt;/p&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is main.js:</p>
  
  <pre><code>$(document).ready(() =&gt; {
    $("#blobUpload").click(() =&gt; {
  
      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 data 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) =&gt; {
        const percent = Math.round(ev.loaded / ev.total * 100);
        status.innerHTML = percent + '%';
      }, false);
  
      request.upload.addEventListener('error', (ev) =&gt; {
        status.innerHTML = '&lt;span style="color: red"&gt;Network Error&lt;/span&gt;';
      });
  
      request.open('POST', '/upload', true);
      request.send(formData);
    });
  });
  </code></pre>
  
  <p>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). </p>
  
  <p><a href="https://i.imgur.com/WiUajYW.mp4" rel="noreferrer">Here is a video showing what happens.</a></p>
  
  <p>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.</p>