@superhawk610/file-select

File Select

Minimalist file/folder selection interface that includes Node/Express integration or works standalone.

Installation

npm install @superhawk610/file-select

Once you have installed the module via NPM, make sure to include the scripts and styles. You can either manually copy them from the /dist folder, or have them served for you if you are using Express via the included middleware (see Usage).

Requires jQuery 3.x or higher

Usage

Include the .js and .css files for the plugin. If you are manually copying them, link to wherever they are being served. If you are using Express, link to select.min.css and select.min.js as though they were at the root directory and they will be served by the included middleware.

<link rel="stylesheet" href="select.min.css">
...
<script type="text/javascript" src="select.min.js">

Simply call .fileSelect() on any div on your page to have it converted to a file select popup. Call it with the argument 'show' or 'hide' to have it displayed or hidden.

$('#myFileSelect').fileSelect()
$('#myFileSelect').fileSelect('show')

To get the user's selection from the interface, bind to the sfs.submit event fired by the element you called fileSelect() on. This event will return an Object array, each containing the name, type, and full path of each file selected. Here's an example:

$('#myFileSelect').on('sfs.submit', function(event, files) {
    console.log(files[0].name) // 'words.txt'
    console.log(files[0].type) // 'dir' or 'file'
    console.log(files[0].path) // '/home/user/words.txt'
})

The file select will need a data source. Currently, only the included Express middleware is available, but a future update will add the ability for custom data sources. In your Express app, include the following lines:

var fileSelect = require('@superhawk610/file-select')
app.use(fileSelect())

You will likely want to include this before any calls to express.static just so the middleware has precedence when serving its styles and scripts.

By default, your home directory is used as the starting directory when the modal is shown. If you would like to start at a different directory, specify it when activating the middleware, like so:

app.use(fileSelect({
    path: '/var/www'
}))

Be aware that this interface will expose your server's full file listing to any page on which it is visible. Use at your own risk.