File Uploader element fails on mobile when screen shuts off or user switches to another app

So I have a file upload element on a form page that I want to use to upload a video (up to 5GB), so it will take a while. On a desktop there is no issue, but on mobile, when the screen times out (powers off), or the user switches to another app (return to home screen), the upload fails, although it will appear it is still working, it will eventually issue an error message.

Ideally, I would have the file uploader be able to continue to upload in the background. Is this something that is possible with the native Bubble uploader? If not, what would be the solution to achieve this within Bubble?

As a follow up, I asked ChatGPT for a solution, and it said to use a service worker to make it a background upload. I have no experience in this area, but it looks like I would need to run some javascript and have it run when it detects a file upload. However, my first attempt at doing this didn’t work (making a plugin and putting in the javascript that ChatGPT said to use), and I could definitely use a hand in pointing in the right direction here.

Have you tried a different uploader like Better Uploader and see if it’s specific to Bubble’s uploader?

It could be an inherent issue with mobile web browsers where they pause tabs not being active/open :man_shrugging:

1 Like

I tried better uploader, but it would crash the page before even trying to upload. Weird. I’m not sure it’s because the file size is large (1.5GB on the test video file), but the bubble file uploader doesn’t have an issue with it, unless the screen times out or the app changes.

It might be out of Bubble’s control and purely be a web app-type issue when you minimize it the browser just pauses the tab completely…

There’s some other uploader elements like Uppy and Bubble’s own MultiFile uploader. Or if you think its worth the work just to test it, there’s plugins that don’t even upload to Bubble storage but your own S3 bucket.

The error message:

Yea I think “Sorry, we ran into a temporary bug” means it blew up and doesn’t know what happened… very odd that the file completed the upload though. That might mean you’ll have better luck with a different uploader.

Let me try on one of my apps right now with a plugin that uploads to Wasabi S3

I just tried a 300MB video with this plugin (my go-to external file storage plugin) and it didn’t have any issues

I started the upload and hit the home button, navigated a different app, locked the phone, after a minute i reopened to check the progress saw it was half way, close out, a few minutes later I saw it on my app on desktop and reopening the app on the phone there were no errors.

But maybe you should put a disclaimer like “Don’t close out plz” with the regular Bubble file uploader because who knows if my phone battery gets low if it will behave differently, right?

2 Likes

Thank for going out of your way to test this out. I appreciate that a lot!

For sure, and this particular uploader would be for an admin user, so not a big deal to put a disclaimer. I just see it as a problem because on a long upload, the screen will time out unless you keep engaging with it or the user has turned off the screen time out option on their mobile.

But that is promising that someone did solve this, so I just to need to keep digging. Thank you.

1 Like

Just an update in case anyone else was wondering, I worked with Bubble support and figured out the native uploader does work with background uploading (allowing you to switch to other apps or screen time out). My issue was that my devices I was testing on had Power Saving enabled, which prevents it from working.

1 Like

:grinning_face_with_smiling_eyes:

1 Like