I'm trying to understand how the Uppy library implements the feature of preventing certain files from being selected in the system's file picker using the concept of Restrictions. When accessing the Uppy examples page, I noticed that if I check the "Restrictions" checkbox and click on "Browse files," all files available in the user's storage are listed, but those that do not meet the format and size restrictions are disabled for selection.
I understand that it is possible to bypass Uppy's restrictions by choosing "All files" instead of "Custom files" in the system's file dialog. However, I'm specifically looking for strategies to restrict files during the file picking process, in addition to the format, using browser APIs.
I also understand that limiting which files can be selected for upload on the client-side is not a specific feature of Uppy, as it is possible to restrict the allowed file types using the accept attribute of the input tag. However, I would like to add more restrictions to the files that the user can select in the file picker, for example per type file size limit and total files size limit. It seems that this kind of customization goes beyond the scope of the input element.
I'm aware of how to prevent the user from uploading files that do not meet the upload rules, by presenting an error message if the file is not suitable. However, what I'm interested in is a way to interact with the system's file manager to prevent the user from selecting these files in the first place.
Can anyone provide insights into how Uppy achieves this file selection restriction feature, pointing out code from its Github repository? I'm looking for details on the underlying implementation and how Uppy interacts with the browser's APIs to achieve this behavior.
Alternatively, answers on how to achieve the same effect, even without reference to the Uppy library, will be accepted.
Related questions:
