SwapnilB31 / react-file-picker-demo

Using File Picker with a Static Directory Tree Object

You can use the file picker to traverse on static Directory Tree object generated by node-file-tree-explorer's listDirectoryFromPath() method by providing an async method to the FilePicker Component that returns an array of dirents for a given path. Exampe code showing how to do that can be found in src/components/FileSystem.js and src/components/DirectoryTree.js files in this repository.

src/components/DirectoryTree.js has the static Directory Tree object and src/components/FileSystem.js returns an async method named scanDir(path : string) that traverses on the object.

src/components/FilePickerStatic.js imports the scanDir method from FileSystem.js and passes it on to the react-file-picker-ui component.

Using File Picker with an Express Server

A simple Node.js server that returns the dirents for a given path on the host machine is provided in the FileTreeServer/ directory of this repository.

To run the server, clone this repo on your dev environment, cd to the FileTreeServer/ directory and run

    npm install

to install the dependencies.

Then edit the the index.js file and set the serverRoot variable on line 3 to point to the directory you want to traverse upon. To start the server, run this command:

    node index.js

And the server will start listening on port 80.

The src/components/FilePickerServer.js file in this repo has a method that fetches the dirents for a path from the FileTreeServer and enables the FilePicker to work with a express server.

Issues

Please submit the exact code that produced the error along with the error log when you raise an issue. Without the code and the error log, fixing the issues will not be possible.

Contribution

Please feel free to add better and well documented examples to this repo. I commit to merging every distinct example to this repo.