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

<a id="button" >Upload</a>

or

<div id = "button">Upload</div>

or

<button id="button">Upload</button> // 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.

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

<a class="btn btn-lg btn-primary">Upload</a>

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.