Browse and select files from already uploaded files within the web application

Question

I am building an web application. There are a big number of files (>100) already uploaded in a web folder (different from current flow). I want to let the user select to browse a few of them (<10) and attach to the current flow.

Is there a good UX for that I can follow?

Since the pool is big, my tentative solution is launching a popup that has a search box to let user narrow selection, then select and add. It's something similar to browse files on my Mac to attach to web mail (like gmail), but the browse window now is web-based.

Not sure if it's intuitive enough. Any tip/link where I can have a look? Thanks

Answer 1

I think the design you described makes sense, considering the limited context. What is important is that the user understands which objects they have selected vs which objects exist. Just be sure that if there is filtering or searching against the list, the user is still aware of the objects or number of objects selected if they are no longer shown in the search/filter. Additionally if the user needs to recall their selection, they need to be able to find what was selected in order to validate the correct selection.

Answer 2

It would be nice to have some visuals supporting your idea.

I think as well that your design goes in the right direction. I'd avoid an overlay to support the feeling of control. The question here is - how important is the action "add files" for the current flow? Does it need more attention or could it be hidden under a button?

Probably the user wants to have an overview from where the files will be attached and which status they have.

I attached an idea how the dialogue could look like. Probably you don't need the filter, but i think it could make sense for large file sets to be able to apply a filter after searching. Maybe a quickfiler with simple pre defined chip like filetype, tag, etc..

Worth to read is This article describing the difference between search filter and sort. Some Best practices for search