Read folder

[MohrJonas]

Hi there,
I really enjoy using your file picker.
Would it be possible to add the ability to select folders and get their respective content?
Thank you.

[MrKampla]

Hi @MohrJonas,
happy to hear that you like our package!

Would it be possible to add the ability to select folders and get their respective content?

Yes, it's on our roadmap. We already have an idea how to implement this, as we did research around browser APIs for directory pickers some time ago.
Unfortunately, I don't have any estimates regarding the release date of such a feature. Right now, we're focusing on delivering v2.0.0 of use-file-picker that significantly improves DX and fixes some bugs. But right after that, we can dive into the select folders feature. I'll make sure to mention this issue in the PR that introduces the select folders feature, so you get a notification when it happens.

[MohrJonas]

Amazing to hear.
Thank you very much

[ReallyLiri]

Hi @MohrJonas, happy to hear that you like our package!

Would it be possible to add the ability to select folders and get their respective content?

Yes, it's on our roadmap. We already have an idea how to implement this, as we did research around browser APIs for directory pickers some time ago. Unfortunately, I don't have any estimates regarding the release date of such a feature. Right now, we're focusing on delivering v2.0.0 of use-file-picker that significantly improves DX and fixes some bugs. But right after that, we can dive into the select folders feature. I'll make sure to mention this issue in the PR that introduces the select folders feature, so you get a notification when it happens.

Can you share some hints about how you thought to achieve this functionality?
From playing around with the options, it doesn't seem like a built-in browser picker can allow selection of both files and folders.
Unless we are only talking about folder picking.
ref https://stackoverflow.com/a/16774922/1236401 , which is old, but seems no updates since (?)

[MrKampla]

@ReallyLiri
You're right, there's no built-in browser picker that allows for selection of both files and folders, so we're only talking about directory picking.
To shed some light on the actual implementation, we were thinking about creating a new hook exported from our package called useDirectoryPicker. It would be based on a part of this library browser-fs-access which is a ponyfill for File System API. The most popular browsers have support for directory picking with fs api since 2021 (Safari was last to implement it). It also falls back to the legacy webkitdirectory property on a plain input element that you've linked, if the user's browser does not support the new fs api.

[bwharrington]

@MrKampla

Your package is fantastic. Its really the only option I found that is pretty lean and easy to implement. What I wanted to ask is that I could not figure out from the docs or debugging the code is if the selected file path gets surfaced somehow. The Path looks like its just the name. Was this in here somewhere or possibly on the roadmap, a bug or maybe I missed something?

[MrKampla]

@bwharrington
I'm glad you find useFilePicker useful!
Regarding your question about path, when using useFilePicker in browser, path and name are always gonna be the same. This is a fundamental limitation of a browser API, it just doesn't provide the path of the selected file to us so we're falling back to the file name. When using useFilePicker in an electron app though, you should get the absolute path of the selected file. I've just tested it and electron is passing the absolute file path, but I've just found a bug in use-file-picker which causes this path to be lost and not passed to the user in filesContent variable, it is only present in plainFiles. I've created this issue #104, and will fix this in next release.

I've also read that when using webkitdirectory param on the file input element (which we're not using at the moment but probably will with useDirectoryPicker) you'll get the directory name that contains the selected files as path e.g. if you select a directory called xyz and it contains file1.txt, you'll get xyz/file1.txt as path.