<file-uploadlet>
A UI-less Component that helps automate the tedious stuff associated with doing file uploads. BYO-UI
Installation
npm install file-uploadlet --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:
<!-- Insert UI Here -->
Usage
The <file-uploadlet>
UI-less, so Bring Your Own UI. It is meant to be used as a wrapper for your UI. Set up the bindings in your template on the viewModel/HTML attributes and you have a sweet little uploader.
Once you have your template ready to go, you'll need to setup a UploadModel
in the parent component.
UploadModel
Setting up an This package includes a handy makeUploadModel
utility to get file uploads working quickly. Import it into your parent component's viewModel and set it up like this:
; // TODO: Finish this.
For an easy way to input files, install the file-droplet
component from NPM and wrap it around this one.
You can also install the file-input-button
from NPM and put it inside this component to use the browser's file select dialog.
HTML Attributes for Configuration / Input
extensions
: A comma-separated list of the allowed file extensions. If it's not provided, all extensions are allowed. Use"no-ext"
to allow files without extensions. A file with the wrong extension it will have itsstate
set toerrored
.min-file-size
: The minimum file size in bytes. A file that is too small will have itsstate
set toerrored
.max-file-size
: The maximum file size in bytes. A file that is too big will have itsstate
set toerrored
.
HTML Attributes for One-Way Binding
state
File A file can have one of the following states:
pending
uploading
uploaded
stopped
errored
: Whenever a file is set toerrored
, the error message will be available on the fileserrorMessage
attribute.
Overall Progress
A few of the included attributes exist to help with creating progress bars.
Progress Batches
Each file's batch
attribute keeps track of which files belong to the current overall progress. The component's currentBatch
increments after all current files
have their status set to uploaded
, stopped
, or errored
. A file's batch
number is set to the currentBatch
any time downloading begins. When a file is stopped
, errored
, its batch
property is set to "none"
, which removes it from the current progress. Once the current batch resolves and the currentBatch
number increments, the batch
attribute is removed from the files in the finished batch.
Contributing
Pull requests are welcome. Analyze the code. See where it needs improvement, and let me know. Please, help make it better!