Version 3.18.1

APIs

  • Begin typing in the search box above to see results.
Show:

File: uploader/js/uploader-html5.js

 /**
 * This module provides a UI for file selection and multiple file upload capability using
 * HTML5 XMLHTTPRequest Level 2 as a transport engine.
 * The supported features include: automatic upload queue management, upload progress
 * tracking, drag-and-drop support, server response retrieval and error reporting.
 *
 * @module uploader-html5
 */
 
 // Shorthands for the external modules
 var substitute = Y.Lang.sub,
 UploaderQueue = Y.Uploader.Queue;
 
 /**
 * This module provides a UI for file selection and multiple file upload capability using
 * HTML5 XMLHTTPRequest Level 2 as a transport engine.
 * @class UploaderHTML5
 * @extends Widget
 * @constructor
 */
 function UploaderHTML5() {
 UploaderHTML5.superclass.constructor.apply ( this, arguments );
 }
 
 
 
 Y.UploaderHTML5 = Y.extend( UploaderHTML5, Y.Widget, {
 
 /**
 * Stored reference to the instance of the file input field used to
 * initiate the file selection dialog.
 *
 * @property _fileInputField
 * @type {Node}
 * @protected
 */
 _fileInputField: null,
 
 /**
 * Stored reference to the click event binding of the `Select Files`
 * button.
 *
 * @property _buttonBinding
 * @type {EventHandle}
 * @protected
 */
 _buttonBinding: null,
 
 /**
 * Stored reference to the instance of Uploader.Queue used to manage
 * the upload process. This is a read-only property that only exists
 * during an active upload process. Only one queue can be active at
 * a time; if an upload start is attempted while a queue is active,
 * it will be ignored.
 *
 * @property queue
 * @type {Uploader.Queue}
 */
 queue: null,
 
 // Y.UploaderHTML5 prototype
 
 /**
 * Construction logic executed during UploaderHTML5 instantiation.
 *
 * @method initializer
 * @protected
 */
 initializer : function () {
 
 this._fileInputField = null;
 this.queue = null;
 this._buttonBinding = null;
 this._fileList = [];
 
 // Publish available events
 
 /**
 * Signals that files have been selected.
 *
 * @event fileselect
 * @param event {Event} The event object for the `fileselect` with the
 * following payload:
 * <dl>
 * <dt>fileList</dt>
 * <dd>An `Array` of files selected by the user, encapsulated
 * in Y.FileHTML5 objects.</dd>
 * </dl>
 */
 this.publish("fileselect");
 
 /**
 * Signals that an upload of multiple files has been started.
 *
 * @event uploadstart
 * @param event {Event} The event object for the `uploadstart`.
 */
 this.publish("uploadstart");
 
 /**
 * Signals that an upload of a specific file has started.
 *
 * @event fileuploadstart
 * @param event {Event} The event object for the `fileuploadstart` with the
 * following payload:
 * <dl>
 * <dt>file</dt>
 * <dd>A reference to the Y.File that dispatched the event.</dd>
 * <dt>originEvent</dt>
 * <dd>The original event dispatched by Y.File.</dd>
 * </dl>
 */
 this.publish("fileuploadstart");
 
 /**
 * Reports on upload progress of a specific file.
 *
 * @event uploadprogress
 * @param event {Event} The event object for the `uploadprogress` with the
 * following payload:
 * <dl>
 * <dt>file</dt>
 * <dd>The pointer to the instance of `Y.File` that dispatched the event.</dd>
 * <dt>bytesLoaded</dt>
 * <dd>The number of bytes of the file that has been uploaded</dd>
 * <dt>bytesTotal</dt>
 * <dd>The total number of bytes in the file</dd>
 * <dt>percentLoaded</dt>
 * <dd>The fraction of the file that has been uploaded, out of 100</dd>
 * <dt>originEvent</dt>
 * <dd>The original event dispatched by the HTML5 uploader</dd>
 * </dl>
 */
 this.publish("uploadprogress");
 
 /**
 * Reports on the total upload progress of the file list.
 *
 * @event totaluploadprogress
 * @param event {Event} The event object for the `totaluploadprogress` with the
 * following payload:
 * <dl>
 * <dt>bytesLoaded</dt>
 * <dd>The number of bytes of the file list that has been uploaded</dd>
 * <dt>bytesTotal</dt>
 * <dd>The total number of bytes in the file list</dd>
 * <dt>percentLoaded</dt>
 * <dd>The fraction of the file list that has been uploaded, out of 100</dd>
 * </dl>
 */
 this.publish("totaluploadprogress");
 
 /**
 * Signals that a single file upload has been completed.
 *
 * @event uploadcomplete
 * @param event {Event} The event object for the `uploadcomplete` with the
 * following payload:
 * <dl>
 * <dt>file</dt>
 * <dd>The pointer to the instance of `Y.File` whose upload has been completed.</dd>
 * <dt>originEvent</dt>
 * <dd>The original event fired by the SWF Uploader</dd>
 * <dt>data</dt>
 * <dd>Data returned by the server.</dd>
 * </dl>
 */
 this.publish("uploadcomplete");
 
 /**
 * Signals that the upload process of the entire file list has been completed.
 *
 * @event alluploadscomplete
 * @param event {Event} The event object for the `alluploadscomplete`.
 */
 this.publish("alluploadscomplete");
 
 /**
 * Signals that a error has occurred in a specific file's upload process.
 *
 * @event uploaderror
 * @param event {Event} The event object for the `uploaderror` with the
 * following payload:
 * <dl>
 * <dt>originEvent</dt>
 * <dd>The original error event fired by the HTML5 Uploader. </dd>
 * <dt>file</dt>
 * <dd>The pointer at the instance of Y.File that returned the error.</dd>
 * <dt>status</dt>
 * <dd>The status reported by the XMLHttpRequest object.</dd>
 * <dt>statusText</dt>
 * <dd>The statusText reported by the XMLHttpRequest object.</dd>
 * </dl>
 */
 this.publish("uploaderror");
 
 /**
 * Signals that a dragged object has entered into the uploader's associated drag-and-drop area.
 *
 * @event dragenter
 * @param event {Event} The event object for the `dragenter`.
 */
 this.publish("dragenter");
 
 /**
 * Signals that an object has been dragged over the uploader's associated drag-and-drop area.
 *
 * @event dragover
 * @param event {Event} The event object for the `dragover`.
 */
 this.publish("dragover");
 
 /**
 * Signals that an object has been dragged off of the uploader's associated drag-and-drop area.
 *
 * @event dragleave
 * @param event {Event} The event object for the `dragleave`.
 */
 this.publish("dragleave");
 
 /**
 * Signals that an object has been dropped over the uploader's associated drag-and-drop area.
 *
 * @event drop
 * @param event {Event} The event object for the `drop` with the
 * following payload:
 * <dl>
 * <dt>fileList</dt>
 * <dd>An `Array` of files dropped by the user, encapsulated
 * in Y.FileHTML5 objects.</dd>
 * </dl>
 */
 this.publish("drop");
 
 },
 
 /**
 * Create the DOM structure for the UploaderHTML5.
 * UploaderHTML5's DOM structure consists of a "Select Files" button that can
 * be replaced by the developer's widget of choice; and a hidden file input field
 * that is used to instantiate the File Select dialog.
 *
 * @method renderUI
 * @protected
 */
 renderUI : function () {
 var contentBox = this.get('contentBox'),
 selButton = this.get("selectFilesButton");
 
 selButton.setStyles({width:"100%", height:"100%"});
 contentBox.append(selButton);
 this._fileInputField = Y.Node.create(UploaderHTML5.HTML5FILEFIELD_TEMPLATE);
 contentBox.append(this._fileInputField);
 },
 
 /**
 * Binds to the UploaderHTML5 UI and subscribes to the necessary events.
 *
 * @method bindUI
 * @protected
 */
 bindUI : function () {
 
 this._bindSelectButton();
 this._setMultipleFiles();
 this._setFileFilters();
 this._bindDropArea();
 this._triggerEnabled();
 
 this.after("multipleFilesChange", this._setMultipleFiles, this);
 this.after("fileFiltersChange", this._setFileFilters, this);
 this.after("enabledChange", this._triggerEnabled, this);
 this.after("selectFilesButtonChange", this._bindSelectButton, this);
 this.after("dragAndDropAreaChange", this._bindDropArea, this);
 this.after("tabIndexChange", function () {
 this.get("selectFilesButton").set("tabIndex", this.get("tabIndex"));
 }, this);
 this._fileInputField.on("change", this._updateFileList, this);
 this._fileInputField.on("click", function(event) {
 event.stopPropagation();
 }, this);
 
 this.get("selectFilesButton").set("tabIndex", this.get("tabIndex"));
 },
 
 
 /**
 * Recreates the file field to null out the previous list of files and
 * thus allow for an identical file list selection.
 *
 * @method _rebindFileField
 * @protected
 */
 _rebindFileField : function () {
 this._fileInputField.remove(true);
 this._fileInputField = Y.Node.create(UploaderHTML5.HTML5FILEFIELD_TEMPLATE);
 this.get("contentBox").append(this._fileInputField);
 this._fileInputField.on("change", this._updateFileList, this);
 this._setMultipleFiles();
 this._setFileFilters();
 },
 
 
 /**
 * Binds the specified drop area's drag and drop events to the
 * uploader's custom handler.
 *
 * @method _bindDropArea
 * @protected
 */
 _bindDropArea : function (event) {
 var ev = event || {prevVal: null},
 ddArea = this.get("dragAndDropArea");
 
 if (ev.prevVal !== null) {
 ev.prevVal.detach('drop', this._ddEventHandler);
 ev.prevVal.detach('dragenter', this._ddEventHandler);
 ev.prevVal.detach('dragover', this._ddEventHandler);
 ev.prevVal.detach('dragleave', this._ddEventHandler);
 }
 
 if (ddArea !== null) {
 ddArea.on('drop', this._ddEventHandler, this);
 ddArea.on('dragenter', this._ddEventHandler, this);
 ddArea.on('dragover', this._ddEventHandler, this);
 ddArea.on('dragleave', this._ddEventHandler, this);
 }
 },
 
 /**
 * Binds the instantiation of the file select dialog to the current file select
 * control.
 *
 * @method _bindSelectButton
 * @protected
 */
 _bindSelectButton : function () {
 this._buttonBinding = this.get("selectFilesButton").on("click", this.openFileSelectDialog, this);
 },
 
 /**
 * Handles the drag and drop events from the uploader's specified drop
 * area.
 *
 * @method _ddEventHandler
 * @protected
 */
 _ddEventHandler : function (event) {
 
 
 event.stopPropagation();
 event.preventDefault();
 
 if (Y.Array.indexOf(event._event.dataTransfer.types, 'Files') > -1) {
 switch (event.type) {
 case "dragenter":
 this.fire("dragenter");
 break;
 case "dragover":
 this.fire("dragover");
 break;
 case "dragleave":
 this.fire("dragleave");
 break;
 case "drop":
 
 var newfiles = event._event.dataTransfer.files,
 parsedFiles = [],
 filterFunc = this.get("fileFilterFunction"),
 oldfiles;
 
 if (filterFunc) {
 Y.each(newfiles, function (value) {
 var newfile = new Y.FileHTML5(value);
 if (filterFunc(newfile)) {
 parsedFiles.push(newfile);
 }
 });
 }
 else {
 Y.each(newfiles, function (value) {
 parsedFiles.push(new Y.FileHTML5(value));
 });
 }
 
 if (parsedFiles.length > 0) {
 oldfiles = this.get("fileList");
 this.set("fileList",
 this.get("appendNewFiles") ? oldfiles.concat(parsedFiles) : parsedFiles);
 this.fire("fileselect", {fileList: parsedFiles});
 }
 
 this.fire("drop", {fileList: parsedFiles});
 break;
 }
 }
 },
 
 /**
 * Adds or removes a specified state CSS class to the underlying uploader button.
 *
 * @method _setButtonClass
 * @protected
 * @param state {String} The name of the state enumerated in `buttonClassNames` attribute
 * from which to derive the needed class name.
 * @param add {Boolean} A Boolean indicating whether to add or remove the class.
 */
 _setButtonClass : function (state, add) {
 if (add) {
 this.get("selectFilesButton").addClass(this.get("buttonClassNames")[state]);
 }
 else {
 this.get("selectFilesButton").removeClass(this.get("buttonClassNames")[state]);
 }
 },
 
 /**
 * Syncs the state of the `multipleFiles` attribute between this class
 * and the file input field.
 *
 * @method _setMultipleFiles
 * @protected
 */
 _setMultipleFiles : function () {
 if (this.get("multipleFiles") === true) {
 this._fileInputField.set("multiple", "multiple");
 }
 else {
 this._fileInputField.set("multiple", "");
 }
 },
 
 /**
 * Syncs the state of the `fileFilters` attribute between this class
 * and the file input field.
 *
 * @method _setFileFilters
 * @protected
 */
 _setFileFilters : function () {
 if (this.get("fileFilters").length > 0) {
 this._fileInputField.set("accept", this.get("fileFilters").join(","));
 }
 else {
 this._fileInputField.set("accept", "");
 }
 },
 
 
 /**
 * Syncs the state of the `enabled` attribute between this class
 * and the underlying button.
 *
 * @method _triggerEnabled
 * @private
 */
 _triggerEnabled : function () {
 if (this.get("enabled") && this._buttonBinding === null) {
 this._bindSelectButton();
 this._setButtonClass("disabled", false);
 this.get("selectFilesButton").setAttribute("aria-disabled", "false");
 }
 else if (!this.get("enabled") && this._buttonBinding) {
 this._buttonBinding.detach();
 this._buttonBinding = null;
 this._setButtonClass("disabled", true);
 this.get("selectFilesButton").setAttribute("aria-disabled", "true");
 }
 },
 
 /**
 * Getter for the `fileList` attribute
 *
 * @method _getFileList
 * @private
 */
 _getFileList : function () {
 return this._fileList.concat();
 },
 
 /**
 * Setter for the `fileList` attribute
 *
 * @method _setFileList
 * @private
 */
 _setFileList : function (val) {
 this._fileList = val.concat();
 return this._fileList.concat();
 },
 
 /**
 * Adjusts the content of the `fileList` based on the results of file selection
 * and the `appendNewFiles` attribute. If the `appendNewFiles` attribute is true,
 * then selected files are appended to the existing list; otherwise, the list is
 * cleared and populated with the newly selected files.
 *
 * @method _updateFileList
 * @param ev {Event} The file selection event received from the uploader.
 * @protected
 */
 _updateFileList : function (ev) {
 var newfiles = ev.target.getDOMNode().files,
 parsedFiles = [],
 filterFunc = this.get("fileFilterFunction"),
 oldfiles;
 
 if (filterFunc) {
 Y.each(newfiles, function (value) {
 var newfile = new Y.FileHTML5(value);
 if (filterFunc(newfile)) {
 parsedFiles.push(newfile);
 }
 });
 }
 else {
 Y.each(newfiles, function (value) {
 parsedFiles.push(new Y.FileHTML5(value));
 });
 }
 
 if (parsedFiles.length > 0) {
 oldfiles = this.get("fileList");
 
 this.set("fileList",
 this.get("appendNewFiles") ? oldfiles.concat(parsedFiles) : parsedFiles );
 
 this.fire("fileselect", {fileList: parsedFiles});
 }
 
 this._rebindFileField();
 },
 
 
 /**
 * Handles and retransmits events fired by `Y.File` and `Y.Uploader.Queue`.
 *
 * @method _uploadEventHandler
 * @param event The event dispatched during the upload process.
 * @protected
 */
 _uploadEventHandler : function (event) {
 
 switch (event.type) {
 case "file:uploadstart":
 this.fire("fileuploadstart", event);
 break;
 case "file:uploadprogress":
 this.fire("uploadprogress", event);
 break;
 case "uploaderqueue:totaluploadprogress":
 this.fire("totaluploadprogress", event);
 break;
 case "file:uploadcomplete":
 this.fire("uploadcomplete", event);
 break;
 case "uploaderqueue:alluploadscomplete":
 this.queue = null;
 this.fire("alluploadscomplete", event);
 break;
 case "file:uploaderror": // overflow intentional
 case "uploaderqueue:uploaderror":
 this.fire("uploaderror", event);
 break;
 case "file:uploadcancel": // overflow intentional
 case "uploaderqueue:uploadcancel":
 this.fire("uploadcancel", event);
 break;
 }
 
 },
 
 /**
 * Opens the File Selection dialog by simulating a click on the file input field.
 *
 * @method openFileSelectDialog
 */
 openFileSelectDialog : function () {
 var fileDomNode = this._fileInputField.getDOMNode();
 if (fileDomNode.click) {
 fileDomNode.click();
 }
 },
 
 /**
 * Starts the upload of a specific file.
 *
 * @method upload
 * @param file {File} Reference to the instance of the file to be uploaded.
 * @param url {String} The URL to upload the file to.
 * @param postVars {Object} (optional) A set of key-value pairs to send as variables along with the file upload HTTP request.
 * If not specified, the values from the attribute `postVarsPerFile` are used instead.
 */
 upload : function (file, url, postvars) {
 
 var uploadURL = url || this.get("uploadURL"),
 postVars = postvars || this.get("postVarsPerFile"),
 fileId = file.get("id");
 
 postVars = postVars.hasOwnProperty(fileId) ? postVars[fileId] : postVars;
 
 if (file instanceof Y.FileHTML5) {
 
 file.on("uploadstart", this._uploadEventHandler, this);
 file.on("uploadprogress", this._uploadEventHandler, this);
 file.on("uploadcomplete", this._uploadEventHandler, this);
 file.on("uploaderror", this._uploadEventHandler, this);
 file.on("uploadcancel", this._uploadEventHandler, this);
 
 file.startUpload(uploadURL, postVars, this.get("fileFieldName"));
 }
 },
 
 /**
 * Starts the upload of all files on the file list, using an automated queue.
 *
 * @method uploadAll
 * @param url {String} The URL to upload the files to.
 * @param [postVars] {Object} A set of key-value pairs to send as variables along with the file upload HTTP request.
 * If not specified, the values from the attribute `postVarsPerFile` are used instead.
 */
 uploadAll : function (url, postvars) {
 this.uploadThese(this.get("fileList"), url, postvars);
 },
 
 /**
 * Starts the upload of the files specified in the first argument, using an automated queue.
 *
 * @method uploadThese
 * @param files {Array} The list of files to upload.
 * @param url {String} The URL to upload the files to.
 * @param [postVars] {Object} A set of key-value pairs to send as variables along with the file upload HTTP request.
 * If not specified, the values from the attribute `postVarsPerFile` are used instead.
 */
 uploadThese : function (files, url, postvars) {
 if (!this.queue) {
 var uploadURL = url || this.get("uploadURL"),
 postVars = postvars || this.get("postVarsPerFile");
 
 this.queue = new UploaderQueue({
 simUploads: this.get("simLimit"),
 errorAction: this.get("errorAction"),
 fileFieldName: this.get("fileFieldName"),
 fileList: files,
 uploadURL: uploadURL,
 perFileParameters: postVars,
 retryCount: this.get("retryCount"),
 uploadHeaders: this.get("uploadHeaders"),
 withCredentials: this.get("withCredentials")
 });
 
 this.queue.on("uploadstart", this._uploadEventHandler, this);
 this.queue.on("uploadprogress", this._uploadEventHandler, this);
 this.queue.on("totaluploadprogress", this._uploadEventHandler, this);
 this.queue.on("uploadcomplete", this._uploadEventHandler, this);
 this.queue.on("alluploadscomplete", this._uploadEventHandler, this);
 this.queue.on("uploadcancel", this._uploadEventHandler, this);
 this.queue.on("uploaderror", this._uploadEventHandler, this);
 this.queue.startUpload();
 
 this.fire("uploadstart");
 }
 else if (this.queue._currentState === UploaderQueue.UPLOADING) {
 this.queue.set("perFileParameters", this.get("postVarsPerFile"));
 Y.each(files, function (file) {
 this.queue.addToQueueBottom(file);
 }, this);
 }
 }
 }, {
 
 /**
 * The template for the hidden file input field container. The file input field will only
 * accept clicks if its visibility is set to hidden (and will not if it's `display` value
 * is set to `none`)
 *
 * @property HTML5FILEFIELD_TEMPLATE
 * @type {String}
 * @static
 */
 HTML5FILEFIELD_TEMPLATE: "<input type='file' style='visibility:hidden; width:0px; height: 0px;'>",
 
 /**
 * The template for the "Select Files" button.
 *
 * @property SELECT_FILES_BUTTON
 * @type {String}
 * @static
 * @default '<button type="button" class="yui3-button" role="button" aria-label="{selectButtonLabel}"
 * tabindex="{tabIndex}">{selectButtonLabel}</button>'
 */
 SELECT_FILES_BUTTON: '<button type="button" class="yui3-button" role="button" aria-label="{selectButtonLabel}" ' +
 'tabindex="{tabIndex}">{selectButtonLabel}</button>',
 
 /**
 * The static property reflecting the type of uploader that `Y.Uploader`
 * aliases. The UploaderHTML5 value is `"html5"`.
 *
 * @property TYPE
 * @type {String}
 * @static
 */
 TYPE: "html5",
 
 /**
 * The identity of the widget.
 *
 * @property NAME
 * @type String
 * @default 'uploader'
 * @readOnly
 * @protected
 * @static
 */
 NAME: "uploader",
 
 /**
 * Static property used to define the default attribute configuration of
 * the Widget.
 *
 * @property ATTRS
 * @type {Object}
 * @protected
 * @static
 */
 ATTRS: {
 
 /**
 * A Boolean indicating whether newly selected files should be appended
 * to the existing file list, or whether they should replace it.
 *
 * @attribute appendNewFiles
 * @type {Boolean}
 * @default true
 */
 appendNewFiles : {
 value: true
 },
 
 /**
 * The names of CSS classes that correspond to different button states
 * of the "Select Files" control. These classes are assigned to the
 * "Select Files" control based on the configuration of the uploader.
 * Currently, the only class name used is that corresponding to the
 * `disabled` state of the uploader. Other button states should be managed
 * directly via CSS selectors.
 * <ul>
 * <li> <strong>`disabled`</strong>: the class corresponding to the disabled state
 * of the "Select Files" button.</li>
 * </ul>
 * @attribute buttonClassNames
 * @type {Object}
 * @default {
 * disabled: "yui3-button-disabled"
 * }
 */
 buttonClassNames: {
 value: {
 "hover": "yui3-button-hover",
 "active": "yui3-button-active",
 "disabled": "yui3-button-disabled",
 "focus": "yui3-button-selected"
 }
 },
 
 /**
 * The node that serves as the drop target for files.
 *
 * @attribute dragAndDropArea
 * @type {Node}
 * @default null
 */
 dragAndDropArea: {
 value: null,
 setter: function (val) {
 return Y.one(val);
 }
 },
 
 /**
 * A Boolean indicating whether the uploader is enabled or disabled for user input.
 *
 * @attribute enabled
 * @type {Boolean}
 * @default true
 */
 enabled : {
 value: true
 },
 
 /**
 * The action performed when an upload error occurs for a specific file being uploaded.
 * The possible values are:
 * <ul>
 * <li> <strong>`UploaderQueue.CONTINUE`</strong>: the error is ignored and the upload process is continued.</li>
 * <li> <strong>`UploaderQueue.STOP`</strong>: the upload process is stopped as soon as any other parallel file
 * uploads are finished.</li>
 * <li> <strong>`UploaderQueue.RESTART_ASAP`</strong>: the file is added back to the front of the queue.</li>
 * <li> <strong>`UploaderQueue.RESTART_AFTER`</strong>: the file is added to the back of the queue.</li>
 * </ul>
 * @attribute errorAction
 * @type {String}
 * @default UploaderQueue.CONTINUE
 */
 errorAction: {
 value: "continue",
 validator: function (val) {
 return (
 val === UploaderQueue.CONTINUE ||
 val === UploaderQueue.STOP ||
 val === UploaderQueue.RESTART_ASAP ||
 val === UploaderQueue.RESTART_AFTER
 );
 }
 },
 
 /**
 * An array indicating what fileFilters should be applied to the file
 * selection dialog. Each element in the array should be a string
 * indicating the Media (MIME) type for the files that should be supported
 * for selection. The Media type strings should be properly formatted
 * or this parameter will be ignored. Examples of valid strings include:
 * "audio/*", "video/*", "application/pdf", etc. More information
 * on valid Media type strings is available here:
 * http://www.iana.org/assignments/media-types/index.html
 * @attribute fileFilters
 * @type {Array}
 * @default []
 */
 fileFilters: {
 value: []
 },
 
 /**
 * A filtering function that is applied to every file selected by the user.
 * The function receives the `Y.File` object and must return a Boolean value.
 * If a `false` value is returned, the file in question is not added to the
 * list of files to be uploaded.
 * Use this function to put limits on file sizes or check the file names for
 * correct extension, but make sure that a server-side check is also performed,
 * since any client-side restrictions are only advisory and can be circumvented.
 *
 * @attribute fileFilterFunction
 * @type {Function}
 * @default null
 */
 fileFilterFunction: {
 value: null
 },
 
 /**
 * A String specifying what should be the POST field name for the file
 * content in the upload request.
 *
 * @attribute fileFieldName
 * @type {String}
 * @default Filedata
 */
 fileFieldName: {
 value: "Filedata"
 },
 
 /**
 * The array of files to be uploaded. All elements in the array
 * must be instances of `Y.File` and be instantiated with an instance
 * of native JavaScript File() class.
 *
 * @attribute fileList
 * @type {Array}
 * @default []
 */
 fileList: {
 value: [],
 getter: "_getFileList",
 setter: "_setFileList"
 },
 
 /**
 * A Boolean indicating whether multiple file selection is enabled.
 *
 * @attribute multipleFiles
 * @type {Boolean}
 * @default false
 */
 multipleFiles: {
 value: false
 },
 
 /**
 * An object, keyed by `fileId`, containing sets of key-value pairs
 * that should be passed as POST variables along with each corresponding
 * file. This attribute is only used if no POST variables are specifed
 * in the upload method call.
 *
 * @attribute postVarsPerFile
 * @type {Object}
 * @default {}
 */
 postVarsPerFile: {
 value: {}
 },
 
 /**
 * The label for the "Select Files" widget. This is the value that replaces the
 * `{selectButtonLabel}` token in the `SELECT_FILES_BUTTON` template.
 *
 * @attribute selectButtonLabel
 * @type {String}
 * @default "Select Files"
 */
 selectButtonLabel: {
 value: "Select Files"
 },
 
 /**
 * The widget that serves as the "Select Files control for the file uploader
 *
 *
 * @attribute selectFilesButton
 * @type {Node | Widget}
 * @default A standard HTML button with YUI CSS Button skin.
 */
 selectFilesButton : {
 valueFn: function () {
 return Y.Node.create(substitute(Y.UploaderHTML5.SELECT_FILES_BUTTON, {
 selectButtonLabel: this.get("selectButtonLabel"),
 tabIndex: this.get("tabIndex")
 }));
 }
 },
 
 /**
 * The number of files that can be uploaded
 * simultaneously if the automatic queue management
 * is used. This value can be in the range between 2
 * and 5.
 *
 * @attribute simLimit
 * @type {Number}
 * @default 2
 */
 simLimit: {
 value: 2,
 validator: function (val) {
 return (val >= 1 && val <= 5);
 }
 },
 
 /**
 * The URL to which file upload requested are POSTed. Only used if a different url is not passed to the upload method call.
 *
 * @attribute uploadURL
 * @type {String}
 * @default ""
 */
 uploadURL: {
 value: ""
 },
 
 /**
 * Additional HTTP headers that should be included
 * in the upload request.
 *
 *
 * @attribute uploadHeaders
 * @type {Object}
 * @default {}
 */
 uploadHeaders: {
 value: {}
 },
 
 /**
 * A Boolean that specifies whether the file should be
 * uploaded with the appropriate user credentials for the
 * domain.
 *
 * @attribute withCredentials
 * @type {Boolean}
 * @default true
 */
 withCredentials: {
 value: true
 },
 
 /**
 * The number of times to try re-uploading a file that failed to upload before
 * cancelling its upload.
 *
 * @attribute retryCount
 * @type {Number}
 * @default 3
 */
 retryCount: {
 value: 3
 }
 }
 });
 
 Y.UploaderHTML5.Queue = UploaderQueue;
 
 
 

AltStyle によって変換されたページ (->オリジナル) /