An extended HTML file input that looks like a progress bar.
- 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.
Using npm:
$ npm install file-progressUsing yarn:
$ yarn add file-progressCloning the repo:
$ git clone https://github.com/mrethical/file-progress...
<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');| 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'
});| 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 |
This library is open-sourced software licensed under the MIT license.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent