3

I have a web app with a file upload input for large videos (30+ minutes). In iOS, when user selects a video, the OS will first compress it, an action that happens before the onClick of the file input is being called.

As this process can take a while for large videos, users tend to switch to other apps meanwhile, but it seems that when a user is leaving the compression screen, the action is being canceled, without even notifying the user.

This is the file input snippet (I'm using react).

<input
    required={true}
    id="inputFile"
    type="file"
    accept="video/*"
    ref={fileInput}
    className={style['input']}
    onChange={(e) => {
        const file = e.target.files[0];
        if(file) {
        setValue(fieldName, file)
    }}
/>

The behaviour is the same on both iOS chrome and safari.

Is there a way to make the action proceed when the browser is not active anymore?

Samball
  • 623
  • 7
  • 22
Tom Raz
  • 713
  • 6
  • 13
  • 1
    Can you add how you've configured your HTML `input` tag please? – Ermiya Eskandary May 14 '22 at 12:15
  • 1
    You could use js `beforeUnload` event to let the user know that if they leave the page the upload will cancel. Something like [this](https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes) – Samball May 16 '22 at 13:31
  • @Samball The problem is when a user switches to another tab / app. The event you suggested will only be fired if the user is trying to navigate away within this tab. – Tom Raz May 16 '22 at 16:29

1 Answers1

1

It is not possible to continue an action in the background when the browser is not active. The only way to do this would be to use a native app instead of a web app. The documentation for the File API on mobile devices states https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications is going to be "further limited" on mobile devices.

The only way to continue an action in the background when the browser is not active would be to use a native app instead of a web app.

Carter McKay
  • 432
  • 2
  • 12