https://github.com/benpptung/file-button
Turn a DOM element into a file input
https://github.com/benpptung/file-button
es5-javascript file-upload javascript
Last synced: 9 months ago
JSON representation
Turn a DOM element into a file input
- Host: GitHub
- URL: https://github.com/benpptung/file-button
- Owner: benpptung
- Created: 2015-05-13T00:18:21.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2018-05-24T06:00:20.000Z (almost 8 years ago)
- Last Synced: 2025-05-12T07:43:31.591Z (10 months ago)
- Topics: es5-javascript, file-upload, javascript
- Language: JavaScript
- Homepage:
- Size: 77.1 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Example
=======
##### javascript
```
var filebutton = require('file-button');
var request = require('superagent');
filebutton
.create()
.on('fileinput', function(fileinput){
var req = request.post('/upload/')
var files = fileinput.files;
var file;
for(var i = 0, len = files.length; i < len; ++i){
var file = files[i];
req.attach('ajaxfile-' + i, file, file.name);
}
req
.on('progress', function(e){
if (e.lengthComputable) {
// handle progress bar here
}
})
.end(function(err, res) {
if (res.ok) {
// handle successful result here
}
});
})
.mount(document.getElementById('button'));
```
##### html
```
Upload
```
or
```
Upload
```
or
```
Upload // IE8 won't work
```
# Test
```
$ npm test
```
# Basic
```
var filebutton = require('file-button');
filebutton
.create() // create the instance
.on('fileinput', listener) // listen to the event `fileinput`
.mount(el); // mount the view on the button
```
# API
### FileButton.create([options])
A `file-button` can be initiated by invoking the `.create()` method. For example.
```
var filebutton = require('file-button');
filebutton.create();
```
The `file-button` instance is also an Event-Emitter using [component-emitter](https://github.com/component/emitter).
options : {Object}
- multiple: {Boolean}, default to true
- accept: {String}, default to null
- fieldName: {String}, default to 'ajaxfile'
### Event: 'fileinput'
Emitted each time the file input value is changed. The `fileinput` element will be removed from the DOM Tree and emitted to the listener.
### Event: 'destroyed'
Emitted after the instance is destroyed.
### filebutton.mount({HtmlElement})
Mount the view on an element. For example, a bootstrap button
```
Upload
```
### filebutton.enable()
Enable the file input button.
### filebutton.disable()
Disable the file input button.
### filebutton.destroy()
Destroy the file input button. A `destroyed` event will be emitted.