iOS Picker UX issues with videos in the cloud Photo Library

[j2d2]

Expected Behavior

You should see the loading spinners immediately start loading from the cloud or very clearly indicate if that is what is happening, and ideally show which are already done.

Selection limit should be indicated in the UI somewhere, based on the customPickerOptions.maxFiles setting.
(note: this currently happens after you select files and then click "done" – it notifies you that not all were selected, but how do you go back to gallery and know which ones were not?)

Current Behavior

iOS

When you click on files that are stored in iCloud (which is almost all of them if you click the setting to "save space on your device") the file will show a white circle loading indicator in the center of the thumbnail, and then it goes away when done. If you upload more than a few files then this seems almost random and not sequential, and you do not see which are needed and which are completed. Especially if your initial selections are scrolled out of view.

Additionally, if you click "Add" again since you have no idea what is happening, the process restarts in a seemingly random order.

Android

This issue was deemed sufficient and not a blocker on Android, based on internal video upload testing.

Possible Solution

1. Keep the completed circle indicators on top of the thumbnail when they are done, or maybe show a thumbs-up?

2. Do not re-start if they click "Add" again, rather see if anything changed and continue.

3. Show the maxFiles limit in the UI somewhere to avoid losing files when you click "done." Can you alert on click if you're beyond the maxFiles?

4. Or, just an indicator that "clips are loading from the cloud - be patient"

5. Nice to have: Show the ones that have already been uploaded in prior sessions (we could pass an array of filenames to the picker if that would be helpful)

   submitted a separate feature request for this: Feature Request: FilePicker indicate which files have already been uploaded #570

Steps to Reproduce (for bugs)

"filestack-js": "^3.32.3"

1. Angular-17 PWA on iOS devices, “Upload from Device” opens the Photo Gallery showing only Videos.
2. Use the Filestack Picker to select the videos you want:

import { Client, ClientOptions, init, PickerFileMetadata, PickerInstance, PickerOptions } from 'filestack-js';

openFilePicker(event: Event) {
  const client: Client = init(this.apikey, this.clientOptions);
  /**
   * https://filestack.github.io/filestack-js/interfaces/pickeroptions.html
   */
  const pickerOptions: PickerOptions = {
    maxSize: 600 * 1024 * 1024, // 600MB
    maxFiles: 24,
    accept: 'video/*',
    displayMode: 'overlay',
    allowManualRetry: false,
    storeTo: {
      container: 's3-bucket',
      path: 'filestack-uploads/',
      region: 'us-west-2',
    },
    fromSources: ['local_file_system', 'video', 'googledrive', 'onedrive', 'facebook', 'box', 'url'],
    // note that commenting-out these handlers does not impact the UX
    onFileSelected: (file: PickerFileMetadata) => this.onFileSelected(file),
    onFileUploadFinished: (file: PickerFileMetadata) => this.fileUploadFinished.next(file),
    onFileUploadFailed: (file: PickerFileMetadata, error: Error) => this.fileUploadFailed.next({ file, error }),
    onUploadDone: (files: PickerUploadDone) => this.uploadDone.next(files)
  };

  const picker = client.picker(pickerOptions);
  picker.open().catch((err) => console.log(err)); 
}

Additional Screenshots

1. Video of single video selection on iOS: https://content.filmstacker.com/filestack-issue/RPReplay_Final1722888186.mp4
2. Video of selection with "Add" being clicked once: https://content.filmstacker.com/filestack-issue/RPReplay_Final1722888357.mp4
3. Speedtest report: Upload 20Mbps, Ping 23ms, 300Mbps Download

Context

Beta users have complained about the upload experience - need help to resolve and make it production-ready - thanks!:)

Your Environment

• Version used: "filestack-js": "^3.32.3"
• Browser Name and version: iOS Safari, Chrome (Webkit)
• Operating System and version (desktop or mobile): iOS