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?
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.