react-file-picker-ui

Simple file picker that lets users pick files from a directory tree. Supports navigation inside a nested file structure and allows for customizations such as filtering files based on extension and custom icons for different file types. Can be used as the UI for accessing the file system of a file server that has the navigation logic built into it, you just need to pass into it a function that will return the directory entries for a given path. Compatible with the directory-tree generated by node-file-tree-explorer on the server side.

Installation

    npm i react-file-picker-ui

Documentation

Dependencies

• uuid
• react-icons

Example

    import {FilePicker} from 'react-file-picker-ui'
    import {Scanir} from 'scandir-server'
    import React, {useState} from 'react'

    function App() {
        const [show,setShow] = useState(false)
        const [selectedPath,setSelectedPath] = useState('')

        return (
            <React.Fragment>
                <h2>Select Path : {path}</h2>
                <button onClick={() => setShow(true)}>
                    Show File Picker
                </button>
                <FilePicker show={show} setShow={setShow} scanDir={scanDir} setSelectedPath={setSelectedPath}/>
            </React.Fragment>
        )
    }

Props

• show : boolean value that represents the state of the FilePickerUI. true for visible and false for hidden.

• setShow(val : boolean) : sets the value for the show prop

• async scanDir(path : string) : asynchronous function that returns an array objects for the directory entries in a given path. Please note that react-file-picker uses linux/unix like paths where the separator '/' (forward slash) is used. So, the scanDir method you supply should support '/' separated paths. The object describing the directory entries must have these three properties

type direntObj {
    name : string, //name of the file
    isDirectory : boolean, // is it a directory
    path : string 
    /*relative path to the static directory in your server, or the serverRoot param in node-file-tree-explorer's scanDir method */ 
}

For detailed examples check out node-file-tree-explorer's github page

• setSelectedPath(val : string) : setter method from React.useState that sets a string variable. This method is used to return the file selected by the user

Optional Props

filters

A string array that contains a list of file extensions that should be shown by the file picker. When this extension is not passed, all the files having any extension is displayed. Its preferable that the extensions are typed in lower case letters only.

Example

    const filtersArray = ["mp4","mp3","wav","aac","mkv","avi","pdf","doc","docx"]

    return (
        <FilePicker 
            show={fpOpen} 
            setShow={setFpOpen} 
            scanDir={scanDirFromServer} 
            setSelectedPath={setSelectedPath} 
            filters={filtersArray} 
        />
    )

iconsObj

A map that maps file extensions with react-icons. Pass this parameter if you want specific files to have their own distinct icons. This prop works only if react-icons from the react-icons library are passed.

Example

    import {FaFilePdf, FaFileVideo, FaFileAudio, FaFileWord} from 'react-icons/fa'

    function App() {
        const [show,setShow] = useState(false)
        const [selectedPath,setSelectedPath] = useState('')

          const iconsObj = {
            "mp4" : <FaFileVideo/>,
            "mkv" : <FaFileVideo/>,
            "avi" : <FaFileVideo/>,
            "mp3" : <FaFileAudio/>,
            "wav" : <FaFileAudio/>,
            "aac" : <FaFileAudio/>,
            "pdf" : <FaFilePdf/>,
            "doc" : <FaFileWord/>,
            "docx" : <FaFileWord/>
        }

        return (
            <React.Fragment>
                <h2>Select Path : {path}</h2>
                <button onClick={() => setShow(true)}>
                    Show File Picker
                </button>
                <FilePicker 
                    show={fpOpen} 
                    setShow={setFpOpen} 
                    scanDir={scanDirFromServer} 
                    setSelectedPath={setSelectedPath} 
                    iconsObj={iconsObj} 
                />
            </React.Fragment>

        )
    }

Demo

View the demo here

Full Example Code

Full Example Code available at this repository. The Files in src/components show how to use the file picker with a static DirectoryObject as well as a File Server.