Class
O.FileButtonView
- Extends
- O.ButtonView
A FileButtonView is used to allow the user to select a file (or multiple files) from their computer, which you can then upload to a server or, on modern browsers, read and manipulate directly.
In general, FileButtonview is designed to be used just like an O.ButtonView instance, including styling.
Styling O.FileButtonView
The underlying DOM structure is:
<label>
<i class="$view.icon"></i>
<input type="file">
<span>$view.label</span>
</label>If there is no icon property set, the <i> will have a class of 'hidden' instead. The icon can be drawn as a background to the empty <i> element.
/*global FormData */
"use strict";
( function ( NS, undefined ) {
var canUseMultiple = FormData.isFake ? null : 'multiple';
var FileButtonView = NS.Class({
Extends: NS.ButtonView,
//!!SPLIT!!
acceptMultiple: false,
//!!SPLIT!!
acceptOnlyTypes: '',
// --- Render ---
//!!SPLIT!!
layerTag: 'label',
//!!SPLIT!!
type: 'v-FileButton',
//!!SPLIT!!
draw: function ( layer, Element, el ) {
var icon = this.get( 'icon' );
return [
el( 'i', {
className: icon ? 'icon ' + icon : 'u-hidden'
}),
this._domControl = el( 'input', {
className: 'v-FileButton-input',
type: 'file',
accept: this.get( 'acceptOnlyTypes' ) || undefined,
multiple: this.get( 'acceptMultiple' ) && canUseMultiple
}),
NS.AbstractControlView.prototype.draw
.call( this, layer, Element, el )
];
},
// --- Activate ---
// Remove these methods. Must be handled by the browser.
_activateOnClick: null,
_activateOnEnter: null,
//!!SPLIT!!
activate: function () {
this._domControl.click();
},
//!!SPLIT!!
_fileWasChosen: function ( event ) {
var input = this._domControl,
files, filePath,
target, action;
if ( event.target === input ) {
input.parentNode.replaceChild(
this._domControl = NS.Element.create( 'input', {
className: 'v-FileButton-input',
type: 'file',
disabled: this.get( 'isDisabled' ),
tabIndex: this.get( 'tabIndex' ),
accept: this.get( 'acceptOnlyTypes' ) || undefined,
multiple: this.get( 'acceptMultiple' ) && canUseMultiple
}), input );
if ( !FormData.isFake && input.files ) {
files = Array.prototype.slice.call( input.files );
} else {
filePath = input.value.replace( /\\/g, '/' );
files = [{
name: filePath.slice( filePath.lastIndexOf( '/' ) + 1 ),
size: 0,
type: '',
file: input
}];
}
if ( !this.get( 'isDisabled' ) ) {
target = this.get( 'target' ) || this;
if ( action = this.get( 'action' ) ) {
target.fire( action, {
originView: this,
files: files
});
} else if ( action = this.get( 'method' ) ) {
target[ action ]( files, this );
}
this.fire( 'button:activate' );
}
}
}.on( 'change' )
});
NS.FileButtonView = FileButtonView;
}( O ) );Property
O.FileButtonView#acceptMultiple
- Boolean
Should the user be allowed to select multiple files at once (if the browser supports it)?
Property
O.FileButtonView#acceptOnlyTypes
- String
A comma-separated list of MIME types that may be selected by the user.
Modern browsers only (set directly as the accept attribute in the
<input> element).
Method
O.FileButtonView#draw()
Overridden to draw view. See O.View#draw. For DOM structure, see general O.FileButtonView notes.
Method
O.FileButtonView#activate()
Opens the OS file chooser dialog.
Private Method
O.FileButtonView#_fileWasChosen( event )
Calls the method or fires the action on the target (see O.ButtonView
for description of these), with the files as the first argument or
files property on the event object.
Parameters
| event | Event The change event. |
|---|