Modern web applications increasingly behave like native apps, and users expect the same level of reliability — especially when it comes to something as fundamental as file uploads. If you're building a cloud storage product or anything involving large file transfers, you've probably encountered a frustrating limitation: uploads fail when the tab closes or the network drops, forcing users to start over.
In this article, I'll walk through how I solved this problem in a production environment by leveraging modern browser capabilities — specifically the File System Access API — and a simple architectural idea that led to a measurable product improvement.
The Problem: Fragile Uploads
While working on a cloud storage service (similar to Google Drive), one of our key features was file uploads. Straightforward, right? Not quite.
We observed a recurring issue:
- If a user closed the tab → upload was lost
- If the internet connection dropped → upload was lost
- If the file was large (e.g. gigabytes) → frustration was inevitable
This wasn't just a technical inconvenience — it directly affected user experience and business metrics.
The Insight That Changed Everything
The turning point came after a conference, where I had a conversation with a Google engineer. He mentioned something surprisingly simple but powerful:
You can persist access to a file in the browser and resume operations later — without requiring the user to reselect the file.
That idea became the foundation of the solution.
The Core Idea
Instead of treating file uploads as a one-time operation tied to a single session, we can make them stateful and recoverable.
The approach looks like this:
- When the user selects a file, the browser provides a special reference (a file handle)
- This handle can be stored locally in the browser (e.g. in IndexedDB)
- If the upload is interrupted (tab closed, network lost, crash, etc.), the app can retrieve that handle later
- Using this handle, the app can access the same file again — without asking the user
- Upload resumes automatically from where it stopped
The key shift here is simple but powerful:
The browser becomes responsible for remembering the file, not the user.
Why This Works
Traditionally, browsers forget everything about a file once the page is gone. That's why users have to reselect files after interruptions.
But with the File System Access API, the browser can:
- Maintain a persistent reference to a file
- Re-grant access (with permission)
- Allow the application to continue working with that file later
Combined with a backend that supports resumable uploads (e.g. chunked transfers and offset tracking), this creates a seamless recovery experience.
What the User Experiences
From the user's perspective, the improvement is almost invisible — but incredibly valuable:
- They start uploading a large file
- Something goes wrong (tab closed, internet drops, laptop sleeps)
- They return later
- The upload simply continues
No re-selection. No restarting. No frustration.
Real-World Impact
After implementing this approach:
- Upload reliability improved significantly
- Large file uploads stopped being a pain point
- A core product metric increased by 3%
What's important here is that this gain came without adding any friction. The user didn't need to learn anything new or perform extra steps.
Trade-offs and Limitations
This approach is powerful, but not universal:
- It works best in Chromium-based browsers
- Permissions are still part of the security model
- Local storage (IndexedDB) is not guaranteed forever
- You still need proper backend support for resumable uploads
That said, for many real-world products, these constraints are acceptable compared to the UX gains.
When This Approach Makes Sense
You should consider this pattern if:
- You're building a cloud storage or media-heavy application
- Users upload large files
- Reliability and completion rate matter
- You want to reduce friction without adding UI complexity
Learn More
The implementation details are based on the File System Access API. You can explore it here:
https://developer.chrome.com/docs/capabilities/web-apis/file-system-access
Final Thoughts
Sometimes, meaningful product improvements don't come from big redesigns or new features, but from rethinking how existing capabilities are used.
In this case, the shift was simple:
- Stop treating uploads as temporary
- Start treating them as recoverable processes
That small change turned a fragile experience into a resilient one — and delivered measurable business impact.
If you're working on file uploads, this is one of those ideas that's absolutely worth exploring.