<file-input-button>
A custom Component that wraps a file input and lets you live bind to its selected files.
Installation
npm install file-input-button --save
You can use any of the builds in the dist folder to meet your project needs.
Using CanJS's built-in support for StealJS, you can now import the module directly inside your templates. For example:
{{#each files}} {{name}} {{/each}}
Usage
The component wraps a file input and lets you live bind to the selected files. It hides the internal file input and displays a button.
It is minimally styled and lets you provide an button-class=""
html attribute that gets passed directly to the button:
<file-input-button {^files}="uploads" button-class="btn btn-primary"> </file-input-button>
By default, the button label says "Select Files", but you can change this using the button-label=""
attribute:
<file-input-button {^files}="uploads" button-label="Pick some files, Y'all!"> </file-input-button>
You can also supply your own button by using the no-ui
attribute. Just make sure you put a fancy click handler that calls the selectFiles()
function, like this:
<file-input-button {^files}="uploads" no-ui>
<button ($click)="selectFiles()" class="what-evs">My Groovy Custom Button</button>
</file-input-button>
And let's not forget, you can use the multiple
attribute, just like on any file input:
<file-input-button {^files}="uploads" multiple> </file-input-button>
API
multiple
: Lets you select multiple files in the browser's file picker.no-ui
: Let's you turn off the included button so you can provide your own.($click)="selectFiles()"
: The required attribute to put on your own button. Used with theno-ui
attribute.button-label
: Lets you customize the text inside the button.button-class
: Lets you set classes directly to the included button.files
: The list of files that have been selected. Each time you select more file, this list will grow. Instead of being a simple FileList, this is live-bindable List. The file is wrapped in a can.Map with the same attributes. You can access the actual File object at List[index].file. Each file in the list will look like this:
name: filename size: filesize type: filetype lastModified: filelastModified lastModifiedDate: filelastModifiedDate file: file // <--- Here's the actual File object.
Contributing
Pull requests are welcome.