0.1.2 • Published 4 years ago
file-progress v0.1.2
file-progress
An extended HTML file input that looks like a progress bar.
Features
- Lightweight, no dependencies.
- Better HTML file input design.
- Has option to upload file via ajax and show progress.
- Use your own implementation for ajax file upload.
Installation
Using npm:
$ npm install file-progressUsing yarn:
$ yarn add file-progressCloning the repo:
$ git clone https://github.com/mrethical/file-progressUsage
...
<body>
<input type="file" id="file-progress-input">
<script type="text/javascript" src="./dist/file-progress.js"></script>
</body>
...const fileProgress = new FileProgress('file-progress-input');If you installed the library via package manager, you can use the library by importing it.
import FileProgress from "file-progress";
const fileProgress = new FileProgress('file-progress-input');Options
| option | type | description |
|---|---|---|
| url | string | if set, will send selected file to the url via ajax |
| upload | function(File, FileProgress): void | function for implementing custom ajax call rather than built in |
| label | function(File?): void | function for setting custom label |
| onRemove | function(): void | callback when file was cleared/removed |
To set options, provide them at class initialization.
const fileProgress = new FileProgress('file-progress-input', {
url: 'https://example.com/upload'
});Methods
| name | parameters | description |
|---|---|---|
| progress | percentage (number) | set file progress bar (useful when using own ajax upload function) |
| prefill | prefill (label) | update the input label without updating the file |
| open | open file modal | |
| set | fileList (FileList) | programatically set files of input |
| clear | remove files |
Screenshots
License
This library is open-sourced software licensed under the MIT license.