Handling multiple file uploads to S3 on Retool Mobile can be tricky when end users frequently go offline and come back online on mobile devices.
Retool write queries (like uploading to S3) can’t depend on other queries, which means you can't trigger multiple S3 uploads from a JS query while offline.
A Solution Option: Local Storage + Deferred Upload
To work around Retool’s query dependency limitations and support offline scenarios, we can store selected image data in localStorage while offline, then trigger uploads once back online. This approach separates the image selection and upload logic, allowing more control over timing and execution.
Here’s how it works:
-
User selects multiple images.
-
Store image metadata and content in localStorage.
-
When the app detects its back online, use JavaScript to loop through the stored images and trigger an upload query for each image individually.
Let's walk through a test app.
Step 1: Saving Images Locally
When users select images, we generate unique IDs and store their references in local storage. This creates a persistent array of image references, which you can retrieve anytime- even after a page reload.
Step 2: Uploading When Back Online
Once connectivity is restored, users can trigger a bulk upload using a button. The Javascript code reads from local storage, loops through each image, and triggers uploads by passing each file record via Additional Scope.
Loom here to see this in action --> Offline Image Uploads with Local Storage and JavaScript | Loom
Try it yourself with your own S3 resource:
Offline Upload Test With Local Storage (1).json (18.0 KB)