Resumable uploads using live views from client to bucket while user can navigate to other pages at same time

I have a requirement to implement a feature that allows users to upload image files. I’m currently using LiveView in Phoenix for this, enabling direct uploads from the client to the cloud. However, there are additional specific requirements that need to be addressed:

  1. The feature should support resumable uploads. For example, if a user starts uploading a batch of 1000 images and the upload process is interrupted due to internet connectivity issues, it should be able to resume seamlessly from where it left off once the connection is restored.

  2. Users should have the flexibility to navigate to other LiveViews while an upload is in progress. This means that even if a user initiates the upload of 1000 files and then decides to navigate to a different page, the upload process should continue running in the background without being disrupted.

  3. Users should be able to simultaneously upload files to multiple galleries. This entails scenarios where a user may begin uploading 1000 files for one gallery, initiate the upload, and then proceed to another gallery to upload additional files. Each gallery’s upload process should work independently and concurrently.

  4. In case a user starts uploading files and their laptop enters sleep mode shortly thereafter, upon waking up the laptop, the upload should automatically resume from where it left off.

I’m seeking guidance on whether these requirements can be met using LiveViews or if any specific JavaScript libraries can be employed to achieve these functionalities efficiently. Your insights into how to approach this would be greatly appreciated.
Can it be handled by web workers at the client side, Are there any pros and cons to handling all this at the client side?

You should be able to solve 2 and 3 using a sticky LiveView Keep LiveViews alive across live redirects · The Phoenix Files.

3 Likes

@uzairaslam196 did you find a solution for 1 and 4 (resuming uploads after reconnecting)?

So the Update was:
1- I was able to resume the uploading of file on reconnecting to server. Here is the details you can read. resumable uploading for multiple files.

Cool, thanks for sharing!

Do you remember what was the motivation(s) to replace allow_upload with custom events? Together with phx-update="ignore", this seems to be a viable way of avoiding losing (external) upload state when the socket reconnects!

Were External Uploads available when you did your implementation?