Config
Table of Contents

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).

Property

O.ButtonView#layerTag

  • String

Overrides default in O.ButtonView#layerTag.

Property

O.FileButtonView#type

  • String

Overrides default in O.ButtonView#type.

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

eventEvent The change event.
Animation
Application
Core
DataStore
DOM
DragDrop
Foundation
IO
Localisation
Selection
Parser
TimeZones
Storage
Touch
CollectionViews
UA
ContainerViews
ControlViews
PanelViews
View