Web Upload lacks early feedback when choosing large amounts of files #21479

adrianjost · 2025-08-31T19:33:03Z

adrianjost
Aug 31, 2025

I have searched the existing feature requests, both open and closed, to make sure this is not a duplicate request.

Yes

The feature

When selecting a large number of files (like 150, 12MP images, or a couple of videos), the input change event (web/src/lib/utils/file-uploader.ts) is only triggered after a couple of seconds or even minutes on slower smartphones. During this time, the website does not know that any files were selected at all, and no UI is updated.
This makes it a really bad experience when ingesting data, because you don't know if something is happening or not.

Especially when using the shared album with upload function, to let friends upload their vacation images, and they don't know about this limitation.

I've built a prototype to verify this:

  <body>
    Select ~100+ 12MP images + ~10x 10s videos
    <input id="input" type="file" max="5" multiple accept="image/*, video/*" />

    <script>
      const input = document.getElementById("input");
      input.addEventListener("change", (e) => {
        // FIXME - it takes multiple seconds before this is executed after choosing a lot of files (100+ images+ videos)
        alert("Oh oh, that took long");
      });
    </script>
  </body>

Unfortunately this seems out of our control, and is likely caused by the browser having to load all these images first, before it can create the change event that contains all the file references. At least that's all the info I found when searching the internet for similar issues.

The showOpenFilePicker API is much faster in initially returning something, while then requiring the developer to fetch all files via async APIs. But that can be shown as progress to the user.

The downside of this new API is that it isn't supported in Firefox and Safari yet, and on Chrome Android, it is not possible to trigger the MediaPicker, instead of the FilePicker. But this already only works by heuristics and is not working in Chrome browsers at the moment, according to this issue and my testing.

I would like to give it a try to implement the new picker API as a progressive enhancement and open a PR for this, but would like to get your general feeling for this, before putting any more work into it. What are your thoughts

Here is a more complete demo of the new and old API.
I have mainly seen the difference with an S24 device with the latest Chrome, when selecting ~100 Images and a couple of 10s videos. On my MacBook M1 Pro, the issue was way less obvious, but when dragging media that is on a slow external HDD, it became slightly visible too.

<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
  </head>
  <body>
    Select ~100+ 12MP images + ~10x 10s videos
    <input
      id="input-classic"
      type="file"
      max="5"
      multiple
      accept="image/*, video/*"
    />

    <hr />

    <button type="button" id="input-modern">New Picker</button>
    <script>
      const types = ["image/*", "video/*"];

      const inputClassic = document.getElementById("input-classic");
      inputClassic.setAttribute("accept", types);
      inputClassic.addEventListener("change", (e) => {
        // FIXME - it takes multiple seconds before this is executed after choosing a lot of files (100+ images+ videos)
        alert("Oh oh, that took long");
      });

      const inputModern = document.getElementById("input-modern");
      const openFileOrFiles = async (multiple = false) => {
        let fileOrFiles;
        try {
          // Show the file picker, optionally allowing multiple files.
          const handles = await showOpenFilePicker({
            multiple,
            id: "videos",
            startIn: "downloads",
            excludeAcceptAllOption: true,
            types: [
              {
                description: "Images", // This is new, we need to differentiate the extensions by MIME-Type
                accept: {
                  "image/*": [".png", ".gif", ".jpeg", ".jpg"],
                },
              },
            ],
          });
          const start = performance.now();
          console.log("got some file handles in reasonable time", start);
          fileOrFiles = await Promise.all(
            handles.map(async (handle) => {
              const file = await handle.getFile();
              // Add the `FileSystemFileHandle` as `.handle`.
              file.handle = handle;
              return file;
            })
          );
          console.log("all files loaded", performance.now() - start);
        } catch (err) {
          // Fail silently if the user has simply canceled the dialog.
          if (err.name !== "AbortError") {
            console.error(err.name, err.message);
          }
        }
        return fileOrFiles;
      };

      inputModern.addEventListener("click", () => {
        openFileOrFiles(true);
      });
    </script>
  </body>
</html>

Platform

Server
Web
Mobile

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Web Upload lacks early feedback when choosing large amounts of files #21479

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Web Upload lacks early feedback when choosing large amounts of files #21479

Uh oh!

Uh oh!

adrianjost Aug 31, 2025

I have searched the existing feature requests, both open and closed, to make sure this is not a duplicate request.

The feature

Platform

Replies: 0 comments

adrianjost
Aug 31, 2025