[Summary view] [Print] [Text view]

   1  /*
   2  YUI 3.17.2 (build 9c3c78e)
   3  Copyright 2014 Yahoo! Inc. All rights reserved.
   4  Licensed under the BSD License.
   5  http://yuilibrary.com/license/
   6  */
   7  
   8  YUI.add('uploader-html5', function (Y, NAME) {
   9  
  10  /**
  11  * This module provides a UI for file selection and multiple file upload capability using
  12  * HTML5 XMLHTTPRequest Level 2 as a transport engine.
  13  * The supported features include: automatic upload queue management, upload progress
  14  * tracking, drag-and-drop support, server response retrieval and error reporting.
  15  *
  16  * @module uploader-html5
  17  */
  18  
  19  // Shorthands for the external modules
  20  var  substitute  = Y.Lang.sub,
  21       UploaderQueue = Y.Uploader.Queue;
  22  
  23  /**
  24  * This module provides a UI for file selection and multiple file upload capability using
  25  * HTML5 XMLHTTPRequest Level 2 as a transport engine.
  26  * @class UploaderHTML5
  27  * @extends Widget
  28  * @constructor
  29  */
  30  function UploaderHTML5() {
  31      UploaderHTML5.superclass.constructor.apply ( this, arguments );
  32  }
  33  
  34  
  35  
  36  Y.UploaderHTML5 = Y.extend( UploaderHTML5, Y.Widget, {
  37  
  38      /**
  39      * Stored reference to the instance of the file input field used to
  40      * initiate the file selection dialog.
  41      *
  42      * @property _fileInputField
  43      * @type {Node}
  44      * @protected
  45      */
  46      _fileInputField: null,
  47  
  48      /**
  49      * Stored reference to the click event binding of the `Select Files`
  50      * button.
  51      *
  52      * @property _buttonBinding
  53      * @type {EventHandle}
  54      * @protected
  55      */
  56      _buttonBinding: null,
  57  
  58      /**
  59      * Stored reference to the instance of Uploader.Queue used to manage
  60      * the upload process. This is a read-only property that only exists
  61      * during an active upload process. Only one queue can be active at
  62      * a time; if an upload start is attempted while a queue is active,
  63      * it will be ignored.
  64      *
  65      * @property queue
  66      * @type {Uploader.Queue}
  67      */
  68      queue: null,
  69  
  70      // Y.UploaderHTML5 prototype
  71  
  72      /**
  73      * Construction logic executed during UploaderHTML5 instantiation.
  74      *
  75      * @method initializer
  76      * @protected
  77      */
  78      initializer : function () {
  79  
  80          this._fileInputField = null;
  81          this.queue = null;
  82          this._buttonBinding = null;
  83          this._fileList = [];
  84  
  85          // Publish available events
  86  
  87          /**
  88          * Signals that files have been selected.
  89          *
  90          * @event fileselect
  91          * @param event {Event} The event object for the `fileselect` with the
  92          *                      following payload:
  93          *  <dl>
  94          *      <dt>fileList</dt>
  95          *          <dd>An `Array` of files selected by the user, encapsulated
  96          *              in Y.FileHTML5 objects.</dd>
  97          *  </dl>
  98          */
  99          this.publish("fileselect");
 100  
 101          /**
 102          * Signals that an upload of multiple files has been started.
 103          *
 104          * @event uploadstart
 105          * @param event {Event} The event object for the `uploadstart`.
 106          */
 107          this.publish("uploadstart");
 108  
 109          /**
 110          * Signals that an upload of a specific file has started.
 111          *
 112          * @event fileuploadstart
 113          * @param event {Event} The event object for the `fileuploadstart` with the
 114          *                      following payload:
 115          *  <dl>
 116          *      <dt>file</dt>
 117          *          <dd>A reference to the Y.File that dispatched the event.</dd>
 118          *      <dt>originEvent</dt>
 119          *          <dd>The original event dispatched by Y.File.</dd>
 120          *  </dl>
 121          */
 122          this.publish("fileuploadstart");
 123  
 124          /**
 125          * Reports on upload progress of a specific file.
 126          *
 127          * @event uploadprogress
 128          * @param event {Event} The event object for the `uploadprogress` with the
 129          *                      following payload:
 130          *  <dl>
 131          *      <dt>file</dt>
 132          *          <dd>The pointer to the instance of `Y.File` that dispatched the event.</dd>
 133          *      <dt>bytesLoaded</dt>
 134          *          <dd>The number of bytes of the file that has been uploaded</dd>
 135          *      <dt>bytesTotal</dt>
 136          *          <dd>The total number of bytes in the file</dd>
 137          *      <dt>percentLoaded</dt>
 138          *          <dd>The fraction of the file that has been uploaded, out of 100</dd>
 139          *      <dt>originEvent</dt>
 140          *          <dd>The original event dispatched by the HTML5 uploader</dd>
 141          *  </dl>
 142          */
 143          this.publish("uploadprogress");
 144  
 145          /**
 146          * Reports on the total upload progress of the file list.
 147          *
 148          * @event totaluploadprogress
 149          * @param event {Event} The event object for the `totaluploadprogress` with the
 150          *                      following payload:
 151          *  <dl>
 152          *      <dt>bytesLoaded</dt>
 153          *          <dd>The number of bytes of the file list that has been uploaded</dd>
 154          *      <dt>bytesTotal</dt>
 155          *          <dd>The total number of bytes in the file list</dd>
 156          *      <dt>percentLoaded</dt>
 157          *          <dd>The fraction of the file list that has been uploaded, out of 100</dd>
 158          *  </dl>
 159          */
 160          this.publish("totaluploadprogress");
 161  
 162          /**
 163          * Signals that a single file upload has been completed.
 164          *
 165          * @event uploadcomplete
 166          * @param event {Event} The event object for the `uploadcomplete` with the
 167          *                      following payload:
 168          *  <dl>
 169          *      <dt>file</dt>
 170          *          <dd>The pointer to the instance of `Y.File` whose upload has been completed.</dd>
 171          *      <dt>originEvent</dt>
 172          *          <dd>The original event fired by the SWF Uploader</dd>
 173          *      <dt>data</dt>
 174          *          <dd>Data returned by the server.</dd>
 175          *  </dl>
 176          */
 177          this.publish("uploadcomplete");
 178  
 179          /**
 180          * Signals that the upload process of the entire file list has been completed.
 181          *
 182          * @event alluploadscomplete
 183          * @param event {Event} The event object for the `alluploadscomplete`.
 184          */
 185          this.publish("alluploadscomplete");
 186  
 187          /**
 188          * Signals that a error has occurred in a specific file's upload process.
 189          *
 190          * @event uploaderror
 191          * @param event {Event} The event object for the `uploaderror` with the
 192          *                      following payload:
 193          *  <dl>
 194          *      <dt>originEvent</dt>
 195          *          <dd>The original error event fired by the HTML5 Uploader. </dd>
 196          *      <dt>file</dt>
 197          *          <dd>The pointer at the instance of Y.File that returned the error.</dd>
 198          *      <dt>status</dt>
 199          *          <dd>The status reported by the XMLHttpRequest object.</dd>
 200          *      <dt>statusText</dt>
 201          *          <dd>The statusText reported by the XMLHttpRequest object.</dd>
 202          *  </dl>
 203          */
 204          this.publish("uploaderror");
 205  
 206          /**
 207          * Signals that a dragged object has entered into the uploader's associated drag-and-drop area.
 208          *
 209          * @event dragenter
 210          * @param event {Event} The event object for the `dragenter`.
 211          */
 212          this.publish("dragenter");
 213  
 214          /**
 215          * Signals that an object has been dragged over the uploader's associated drag-and-drop area.
 216          *
 217          * @event dragover
 218          * @param event {Event} The event object for the `dragover`.
 219          */
 220          this.publish("dragover");
 221  
 222          /**
 223          * Signals that an object has been dragged off of the uploader's associated drag-and-drop area.
 224          *
 225          * @event dragleave
 226          * @param event {Event} The event object for the `dragleave`.
 227          */
 228          this.publish("dragleave");
 229  
 230          /**
 231          * Signals that an object has been dropped over the uploader's associated drag-and-drop area.
 232          *
 233          * @event drop
 234          * @param event {Event} The event object for the `drop` with the
 235          *                      following payload:
 236          *  <dl>
 237          *      <dt>fileList</dt>
 238          *          <dd>An `Array` of files dropped by the user, encapsulated
 239          *              in Y.FileHTML5 objects.</dd>
 240          *  </dl>
 241          */
 242          this.publish("drop");
 243  
 244      },
 245  
 246      /**
 247      * Create the DOM structure for the UploaderHTML5.
 248      * UploaderHTML5's DOM structure consists of a "Select Files" button that can
 249      * be replaced by the developer's widget of choice; and a hidden file input field
 250      * that is used to instantiate the File Select dialog.
 251      *
 252      * @method renderUI
 253      * @protected
 254      */
 255      renderUI : function () {
 256          var contentBox = this.get('contentBox'),
 257              selButton = this.get("selectFilesButton");
 258  
 259          selButton.setStyles({width:"100%", height:"100%"});
 260          contentBox.append(selButton);
 261          this._fileInputField = Y.Node.create(UploaderHTML5.HTML5FILEFIELD_TEMPLATE);
 262          contentBox.append(this._fileInputField);
 263      },
 264  
 265      /**
 266      * Binds to the UploaderHTML5 UI and subscribes to the necessary events.
 267      *
 268      * @method bindUI
 269      * @protected
 270      */
 271      bindUI : function () {
 272  
 273          this._bindSelectButton();
 274          this._setMultipleFiles();
 275          this._setFileFilters();
 276          this._bindDropArea();
 277          this._triggerEnabled();
 278  
 279          this.after("multipleFilesChange", this._setMultipleFiles, this);
 280          this.after("fileFiltersChange", this._setFileFilters, this);
 281          this.after("enabledChange", this._triggerEnabled, this);
 282          this.after("selectFilesButtonChange", this._bindSelectButton, this);
 283          this.after("dragAndDropAreaChange", this._bindDropArea, this);
 284          this.after("tabIndexChange", function () {
 285              this.get("selectFilesButton").set("tabIndex", this.get("tabIndex"));
 286          }, this);
 287          this._fileInputField.on("change", this._updateFileList, this);
 288          this._fileInputField.on("click", function(event) {
 289              event.stopPropagation();
 290          }, this);
 291  
 292          this.get("selectFilesButton").set("tabIndex", this.get("tabIndex"));
 293      },
 294  
 295  
 296      /**
 297      * Recreates the file field to null out the previous list of files and
 298      * thus allow for an identical file list selection.
 299      *
 300      * @method _rebindFileField
 301      * @protected
 302      */
 303      _rebindFileField : function () {
 304          this._fileInputField.remove(true);
 305          this._fileInputField = Y.Node.create(UploaderHTML5.HTML5FILEFIELD_TEMPLATE);
 306          this.get("contentBox").append(this._fileInputField);
 307          this._fileInputField.on("change", this._updateFileList, this);
 308          this._setMultipleFiles();
 309          this._setFileFilters();
 310      },
 311  
 312  
 313      /**
 314      * Binds the specified drop area's drag and drop events to the
 315      * uploader's custom handler.
 316      *
 317      * @method _bindDropArea
 318      * @protected
 319      */
 320      _bindDropArea : function (event) {
 321          var ev = event || {prevVal: null},
 322              ddArea = this.get("dragAndDropArea");
 323  
 324          if (ev.prevVal !== null) {
 325              ev.prevVal.detach('drop', this._ddEventHandler);
 326              ev.prevVal.detach('dragenter', this._ddEventHandler);
 327              ev.prevVal.detach('dragover', this._ddEventHandler);
 328              ev.prevVal.detach('dragleave', this._ddEventHandler);
 329          }
 330  
 331          if (ddArea !== null) {
 332              ddArea.on('drop', this._ddEventHandler, this);
 333              ddArea.on('dragenter', this._ddEventHandler, this);
 334              ddArea.on('dragover', this._ddEventHandler, this);
 335              ddArea.on('dragleave', this._ddEventHandler, this);
 336          }
 337      },
 338  
 339      /**
 340      * Binds the instantiation of the file select dialog to the current file select
 341      * control.
 342      *
 343      * @method _bindSelectButton
 344      * @protected
 345      */
 346      _bindSelectButton : function () {
 347         this._buttonBinding = this.get("selectFilesButton").on("click", this.openFileSelectDialog, this);
 348      },
 349  
 350      /**
 351      * Handles the drag and drop events from the uploader's specified drop
 352      * area.
 353      *
 354      * @method _ddEventHandler
 355      * @protected
 356      */
 357      _ddEventHandler : function (event) {
 358  
 359  
 360          event.stopPropagation();
 361          event.preventDefault();
 362  
 363          if (Y.Array.indexOf(event._event.dataTransfer.types, 'Files') > -1) {
 364              switch (event.type) {
 365                  case "dragenter":
 366                      this.fire("dragenter");
 367                      break;
 368                  case "dragover":
 369                      this.fire("dragover");
 370                      break;
 371                  case "dragleave":
 372                      this.fire("dragleave");
 373                      break;
 374                  case "drop":
 375  
 376                      var newfiles = event._event.dataTransfer.files,
 377                          parsedFiles = [],
 378                          filterFunc = this.get("fileFilterFunction"),
 379                          oldfiles;
 380  
 381                      if (filterFunc) {
 382                          Y.each(newfiles, function (value) {
 383                              var newfile = new Y.FileHTML5(value);
 384                              if (filterFunc(newfile)) {
 385                                  parsedFiles.push(newfile);
 386                              }
 387                          });
 388                      }
 389                      else {
 390                          Y.each(newfiles, function (value) {
 391                              parsedFiles.push(new Y.FileHTML5(value));
 392                          });
 393                      }
 394  
 395                      if (parsedFiles.length > 0) {
 396                          oldfiles = this.get("fileList");
 397                          this.set("fileList",
 398                          this.get("appendNewFiles") ? oldfiles.concat(parsedFiles) : parsedFiles);
 399                          this.fire("fileselect", {fileList: parsedFiles});
 400                      }
 401  
 402                      this.fire("drop", {fileList: parsedFiles});
 403                      break;
 404              }
 405          }
 406      },
 407  
 408      /**
 409      * Adds or removes a specified state CSS class to the underlying uploader button.
 410      *
 411      * @method _setButtonClass
 412      * @protected
 413      * @param state {String} The name of the state enumerated in `buttonClassNames` attribute
 414      * from which to derive the needed class name.
 415      * @param add {Boolean} A Boolean indicating whether to add or remove the class.
 416      */
 417      _setButtonClass : function (state, add) {
 418          if (add) {
 419              this.get("selectFilesButton").addClass(this.get("buttonClassNames")[state]);
 420          }
 421          else {
 422              this.get("selectFilesButton").removeClass(this.get("buttonClassNames")[state]);
 423          }
 424      },
 425  
 426      /**
 427      * Syncs the state of the `multipleFiles` attribute between this class
 428      * and the file input field.
 429      *
 430      * @method _setMultipleFiles
 431      * @protected
 432      */
 433      _setMultipleFiles : function () {
 434          if (this.get("multipleFiles") === true) {
 435              this._fileInputField.set("multiple", "multiple");
 436          }
 437          else {
 438              this._fileInputField.set("multiple", "");
 439          }
 440      },
 441  
 442      /**
 443      * Syncs the state of the `fileFilters` attribute between this class
 444      * and the file input field.
 445      *
 446      * @method _setFileFilters
 447      * @protected
 448      */
 449      _setFileFilters : function () {
 450          if (this.get("fileFilters").length > 0) {
 451              this._fileInputField.set("accept", this.get("fileFilters").join(","));
 452          }
 453          else {
 454              this._fileInputField.set("accept", "");
 455          }
 456      },
 457  
 458  
 459      /**
 460      * Syncs the state of the `enabled` attribute between this class
 461      * and the underlying button.
 462      *
 463      * @method _triggerEnabled
 464      * @private
 465      */
 466      _triggerEnabled : function () {
 467          if (this.get("enabled") && this._buttonBinding === null) {
 468              this._bindSelectButton();
 469              this._setButtonClass("disabled", false);
 470              this.get("selectFilesButton").setAttribute("aria-disabled", "false");
 471          }
 472          else if (!this.get("enabled") && this._buttonBinding) {
 473              this._buttonBinding.detach();
 474              this._buttonBinding = null;
 475              this._setButtonClass("disabled", true);
 476              this.get("selectFilesButton").setAttribute("aria-disabled", "true");
 477          }
 478      },
 479  
 480      /**
 481      * Getter for the `fileList` attribute
 482      *
 483      * @method _getFileList
 484      * @private
 485      */
 486      _getFileList : function () {
 487          return this._fileList.concat();
 488      },
 489  
 490      /**
 491      * Setter for the `fileList` attribute
 492      *
 493      * @method _setFileList
 494      * @private
 495      */
 496      _setFileList : function (val) {
 497          this._fileList = val.concat();
 498          return this._fileList.concat();
 499      },
 500  
 501      /**
 502      * Adjusts the content of the `fileList` based on the results of file selection
 503      * and the `appendNewFiles` attribute. If the `appendNewFiles` attribute is true,
 504      * then selected files are appended to the existing list; otherwise, the list is
 505      * cleared and populated with the newly selected files.
 506      *
 507      * @method _updateFileList
 508      * @param ev {Event} The file selection event received from the uploader.
 509      * @protected
 510      */
 511      _updateFileList : function (ev) {
 512          var newfiles = ev.target.getDOMNode().files,
 513              parsedFiles = [],
 514              filterFunc = this.get("fileFilterFunction"),
 515              oldfiles;
 516  
 517          if (filterFunc) {
 518              Y.each(newfiles, function (value) {
 519                  var newfile = new Y.FileHTML5(value);
 520                  if (filterFunc(newfile)) {
 521                      parsedFiles.push(newfile);
 522                  }
 523              });
 524          }
 525          else {
 526              Y.each(newfiles, function (value) {
 527                  parsedFiles.push(new Y.FileHTML5(value));
 528              });
 529          }
 530  
 531          if (parsedFiles.length > 0) {
 532              oldfiles = this.get("fileList");
 533  
 534              this.set("fileList",
 535                      this.get("appendNewFiles") ? oldfiles.concat(parsedFiles) : parsedFiles );
 536  
 537              this.fire("fileselect", {fileList: parsedFiles});
 538          }
 539  
 540          this._rebindFileField();
 541      },
 542  
 543  
 544      /**
 545      * Handles and retransmits events fired by `Y.File` and `Y.Uploader.Queue`.
 546      *
 547      * @method _uploadEventHandler
 548      * @param event The event dispatched during the upload process.
 549      * @protected
 550      */
 551      _uploadEventHandler : function (event) {
 552  
 553          switch (event.type) {
 554              case "file:uploadstart":
 555                  this.fire("fileuploadstart", event);
 556                  break;
 557              case "file:uploadprogress":
 558                  this.fire("uploadprogress", event);
 559                  break;
 560              case "uploaderqueue:totaluploadprogress":
 561                  this.fire("totaluploadprogress", event);
 562                  break;
 563              case "file:uploadcomplete":
 564                  this.fire("uploadcomplete", event);
 565                  break;
 566              case "uploaderqueue:alluploadscomplete":
 567                  this.queue = null;
 568                  this.fire("alluploadscomplete", event);
 569                  break;
 570              case "file:uploaderror": // overflow intentional
 571              case "uploaderqueue:uploaderror":
 572                  this.fire("uploaderror", event);
 573                  break;
 574              case "file:uploadcancel": // overflow intentional
 575              case "uploaderqueue:uploadcancel":
 576                  this.fire("uploadcancel", event);
 577                  break;
 578          }
 579  
 580      },
 581  
 582      /**
 583      * Opens the File Selection dialog by simulating a click on the file input field.
 584      *
 585      * @method openFileSelectDialog
 586      */
 587      openFileSelectDialog : function () {
 588          var fileDomNode = this._fileInputField.getDOMNode();
 589          if (fileDomNode.click) {
 590              fileDomNode.click();
 591          }
 592      },
 593  
 594      /**
 595      * Starts the upload of a specific file.
 596      *
 597      * @method upload
 598      * @param file {File} Reference to the instance of the file to be uploaded.
 599      * @param url {String} The URL to upload the file to.
 600      * @param postVars {Object} (optional) A set of key-value pairs to send as variables along with the file upload HTTP request.
 601      *                          If not specified, the values from the attribute `postVarsPerFile` are used instead.
 602      */
 603      upload : function (file, url, postvars) {
 604  
 605          var uploadURL = url || this.get("uploadURL"),
 606              postVars = postvars || this.get("postVarsPerFile"),
 607              fileId = file.get("id");
 608  
 609          postVars = postVars.hasOwnProperty(fileId) ? postVars[fileId] : postVars;
 610  
 611          if (file instanceof Y.FileHTML5) {
 612  
 613              file.on("uploadstart", this._uploadEventHandler, this);
 614              file.on("uploadprogress", this._uploadEventHandler, this);
 615              file.on("uploadcomplete", this._uploadEventHandler, this);
 616              file.on("uploaderror", this._uploadEventHandler, this);
 617              file.on("uploadcancel", this._uploadEventHandler, this);
 618  
 619              file.startUpload(uploadURL, postVars, this.get("fileFieldName"));
 620          }
 621      },
 622  
 623     /**
 624      * Starts the upload of all files on the file list, using an automated queue.
 625      *
 626      * @method uploadAll
 627      * @param url {String} The URL to upload the files to.
 628      * @param [postVars] {Object} A set of key-value pairs to send as variables along with the file upload HTTP request.
 629      *                          If not specified, the values from the attribute `postVarsPerFile` are used instead.
 630      */
 631      uploadAll : function (url, postvars) {
 632          this.uploadThese(this.get("fileList"), url, postvars);
 633      },
 634  
 635      /**
 636      * Starts the upload of the files specified in the first argument, using an automated queue.
 637      *
 638      * @method uploadThese
 639      * @param files {Array} The list of files to upload.
 640      * @param url {String} The URL to upload the files to.
 641      * @param [postVars] {Object} A set of key-value pairs to send as variables along with the file upload HTTP request.
 642      *                          If not specified, the values from the attribute `postVarsPerFile` are used instead.
 643      */
 644      uploadThese : function (files, url, postvars) {
 645          if (!this.queue) {
 646              var uploadURL = url || this.get("uploadURL"),
 647                  postVars = postvars || this.get("postVarsPerFile");
 648  
 649              this.queue = new UploaderQueue({
 650                  simUploads: this.get("simLimit"),
 651                  errorAction: this.get("errorAction"),
 652                  fileFieldName: this.get("fileFieldName"),
 653                  fileList: files,
 654                  uploadURL: uploadURL,
 655                  perFileParameters: postVars,
 656                  retryCount: this.get("retryCount"),
 657                  uploadHeaders: this.get("uploadHeaders"),
 658                  withCredentials: this.get("withCredentials")
 659              });
 660  
 661              this.queue.on("uploadstart", this._uploadEventHandler, this);
 662              this.queue.on("uploadprogress", this._uploadEventHandler, this);
 663              this.queue.on("totaluploadprogress", this._uploadEventHandler, this);
 664              this.queue.on("uploadcomplete", this._uploadEventHandler, this);
 665              this.queue.on("alluploadscomplete", this._uploadEventHandler, this);
 666              this.queue.on("uploadcancel", this._uploadEventHandler, this);
 667              this.queue.on("uploaderror", this._uploadEventHandler, this);
 668              this.queue.startUpload();
 669  
 670              this.fire("uploadstart");
 671         }
 672         else if (this.queue._currentState === UploaderQueue.UPLOADING) {
 673              this.queue.set("perFileParameters", this.get("postVarsPerFile"));
 674              Y.each(files, function (file) {
 675                  this.queue.addToQueueBottom(file);
 676              }, this);
 677         }
 678      }
 679  }, {
 680  
 681      /**
 682      * The template for the hidden file input field container. The file input field will only
 683      * accept clicks if its visibility is set to hidden (and will not if it's `display` value
 684      * is set to `none`)
 685      *
 686      * @property HTML5FILEFIELD_TEMPLATE
 687      * @type {String}
 688      * @static
 689      */
 690      HTML5FILEFIELD_TEMPLATE: "<input type='file' style='visibility:hidden; width:0px; height: 0px;'>",
 691  
 692      /**
 693      * The template for the "Select Files" button.
 694      *
 695      * @property SELECT_FILES_BUTTON
 696      * @type {String}
 697      * @static
 698      * @default '<button type="button" class="yui3-button" role="button" aria-label="{selectButtonLabel}"
 699      *           tabindex="{tabIndex}">{selectButtonLabel}</button>'
 700      */
 701      SELECT_FILES_BUTTON: '<button type="button" class="yui3-button" role="button" aria-label="{selectButtonLabel}" ' +
 702                           'tabindex="{tabIndex}">{selectButtonLabel}</button>',
 703  
 704      /**
 705      * The static property reflecting the type of uploader that `Y.Uploader`
 706      * aliases. The UploaderHTML5 value is `"html5"`.
 707      *
 708      * @property TYPE
 709      * @type {String}
 710      * @static
 711      */
 712      TYPE: "html5",
 713  
 714      /**
 715      * The identity of the widget.
 716      *
 717      * @property NAME
 718      * @type String
 719      * @default 'uploader'
 720      * @readOnly
 721      * @protected
 722      * @static
 723      */
 724      NAME: "uploader",
 725  
 726      /**
 727      * Static property used to define the default attribute configuration of
 728      * the Widget.
 729      *
 730      * @property ATTRS
 731      * @type {Object}
 732      * @protected
 733      * @static
 734      */
 735      ATTRS: {
 736  
 737          /**
 738          * A Boolean indicating whether newly selected files should be appended
 739          * to the existing file list, or whether they should replace it.
 740          *
 741          * @attribute appendNewFiles
 742          * @type {Boolean}
 743          * @default true
 744          */
 745          appendNewFiles : {
 746              value: true
 747          },
 748  
 749          /**
 750          * The names of CSS classes that correspond to different button states
 751          * of the "Select Files" control. These classes are assigned to the
 752          * "Select Files" control based on the configuration of the uploader.
 753          * Currently, the only class name used is that corresponding to the
 754          * `disabled` state of the uploader. Other button states should be managed
 755          * directly via CSS selectors.
 756          * <ul>
 757          *   <li> <strong>`disabled`</strong>: the class corresponding to the disabled state
 758          *      of the "Select Files" button.</li>
 759          * </ul>
 760          * @attribute buttonClassNames
 761          * @type {Object}
 762          * @default {
 763          *            disabled: "yui3-button-disabled"
 764          *          }
 765          */
 766          buttonClassNames: {
 767              value: {
 768                  "hover": "yui3-button-hover",
 769                  "active": "yui3-button-active",
 770                  "disabled": "yui3-button-disabled",
 771                  "focus": "yui3-button-selected"
 772              }
 773          },
 774  
 775          /**
 776          * The node that serves as the drop target for files.
 777          *
 778          * @attribute dragAndDropArea
 779          * @type {Node}
 780          * @default null
 781          */
 782          dragAndDropArea: {
 783              value: null,
 784              setter: function (val) {
 785                  return Y.one(val);
 786              }
 787          },
 788  
 789          /**
 790          * A Boolean indicating whether the uploader is enabled or disabled for user input.
 791          *
 792          * @attribute enabled
 793          * @type {Boolean}
 794          * @default true
 795          */
 796          enabled : {
 797              value: true
 798          },
 799  
 800          /**
 801          * The action  performed when an upload error occurs for a specific file being uploaded.
 802          * The possible values are:
 803          * <ul>
 804          *   <li> <strong>`UploaderQueue.CONTINUE`</strong>: the error is ignored and the upload process is continued.</li>
 805          *   <li> <strong>`UploaderQueue.STOP`</strong>: the upload process is stopped as soon as any other parallel file
 806          *     uploads are finished.</li>
 807          *   <li> <strong>`UploaderQueue.RESTART_ASAP`</strong>: the file is added back to the front of the queue.</li>
 808          *   <li> <strong>`UploaderQueue.RESTART_AFTER`</strong>: the file is added to the back of the queue.</li>
 809          * </ul>
 810          * @attribute errorAction
 811          * @type {String}
 812          * @default UploaderQueue.CONTINUE
 813          */
 814          errorAction: {
 815              value: "continue",
 816              validator: function (val) {
 817                  return (
 818                      val === UploaderQueue.CONTINUE ||
 819                      val === UploaderQueue.STOP ||
 820                      val === UploaderQueue.RESTART_ASAP ||
 821                      val === UploaderQueue.RESTART_AFTER
 822                  );
 823              }
 824          },
 825  
 826          /**
 827          * An array indicating what fileFilters should be applied to the file
 828          * selection dialog. Each element in the array should be a string
 829          * indicating the Media (MIME) type for the files that should be supported
 830          * for selection. The Media type strings should be properly formatted
 831          * or this parameter will be ignored. Examples of valid strings include:
 832          * "audio/*", "video/*", "application/pdf", etc. More information
 833          * on valid Media type strings is available here:
 834          * http://www.iana.org/assignments/media-types/index.html
 835          * @attribute fileFilters
 836          * @type {Array}
 837          * @default []
 838          */
 839          fileFilters: {
 840              value: []
 841          },
 842  
 843          /**
 844          * A filtering function that is applied to every file selected by the user.
 845          * The function receives the `Y.File` object and must return a Boolean value.
 846          * If a `false` value is returned, the file in question is not added to the
 847          * list of files to be uploaded.
 848          * Use this function to put limits on file sizes or check the file names for
 849          * correct extension, but make sure that a server-side check is also performed,
 850          * since any client-side restrictions are only advisory and can be circumvented.
 851          *
 852          * @attribute fileFilterFunction
 853          * @type {Function}
 854          * @default null
 855          */
 856          fileFilterFunction: {
 857              value: null
 858          },
 859  
 860          /**
 861          * A String specifying what should be the POST field name for the file
 862          * content in the upload request.
 863          *
 864          * @attribute fileFieldName
 865          * @type {String}
 866          * @default Filedata
 867          */
 868          fileFieldName: {
 869              value: "Filedata"
 870          },
 871  
 872          /**
 873          * The array of files to be uploaded. All elements in the array
 874          * must be instances of `Y.File` and be instantiated with an instance
 875          * of native JavaScript File() class.
 876          *
 877          * @attribute fileList
 878          * @type {Array}
 879          * @default []
 880          */
 881          fileList: {
 882              value: [],
 883              getter: "_getFileList",
 884              setter: "_setFileList"
 885          },
 886  
 887          /**
 888          * A Boolean indicating whether multiple file selection is enabled.
 889          *
 890          * @attribute multipleFiles
 891          * @type {Boolean}
 892          * @default false
 893          */
 894          multipleFiles: {
 895              value: false
 896          },
 897  
 898          /**
 899          * An object, keyed by `fileId`, containing sets of key-value pairs
 900          * that should be passed as POST variables along with each corresponding
 901          * file. This attribute is only used if no POST variables are specifed
 902          * in the upload method call.
 903          *
 904          * @attribute postVarsPerFile
 905          * @type {Object}
 906          * @default {}
 907          */
 908          postVarsPerFile: {
 909              value: {}
 910          },
 911  
 912          /**
 913          * The label for the "Select Files" widget. This is the value that replaces the
 914          * `{selectButtonLabel}` token in the `SELECT_FILES_BUTTON` template.
 915          *
 916          * @attribute selectButtonLabel
 917          * @type {String}
 918          * @default "Select Files"
 919          */
 920          selectButtonLabel: {
 921              value: "Select Files"
 922          },
 923  
 924          /**
 925          * The widget that serves as the "Select Files control for the file uploader
 926          *
 927          *
 928          * @attribute selectFilesButton
 929          * @type {Node | Widget}
 930          * @default A standard HTML button with YUI CSS Button skin.
 931          */
 932          selectFilesButton : {
 933              valueFn: function () {
 934                  return Y.Node.create(substitute(Y.UploaderHTML5.SELECT_FILES_BUTTON, {
 935                      selectButtonLabel: this.get("selectButtonLabel"),
 936                      tabIndex: this.get("tabIndex")
 937                  }));
 938              }
 939          },
 940  
 941          /**
 942          * The number of files that can be uploaded
 943          * simultaneously if the automatic queue management
 944          * is used. This value can be in the range between 2
 945          * and 5.
 946          *
 947          * @attribute simLimit
 948          * @type {Number}
 949          * @default 2
 950          */
 951          simLimit: {
 952              value: 2,
 953              validator: function (val) {
 954                  return (val >= 1 && val <= 5);
 955              }
 956          },
 957  
 958          /**
 959          * The URL to which file upload requested are POSTed. Only used if a different url is not passed to the upload method call.
 960          *
 961          * @attribute uploadURL
 962          * @type {String}
 963          * @default ""
 964          */
 965          uploadURL: {
 966              value: ""
 967          },
 968  
 969          /**
 970          * Additional HTTP headers that should be included
 971          * in the upload request.
 972          *
 973          *
 974          * @attribute uploadHeaders
 975          * @type {Object}
 976          * @default {}
 977          */
 978          uploadHeaders: {
 979              value: {}
 980          },
 981  
 982          /**
 983          * A Boolean that specifies whether the file should be
 984          * uploaded with the appropriate user credentials for the
 985          * domain.
 986          *
 987          * @attribute withCredentials
 988          * @type {Boolean}
 989          * @default true
 990          */
 991          withCredentials: {
 992              value: true
 993          },
 994  
 995          /**
 996          * The number of times to try re-uploading a file that failed to upload before
 997          * cancelling its upload.
 998          *
 999          * @attribute retryCount
1000          * @type {Number}
1001          * @default 3
1002          */
1003          retryCount: {
1004              value: 3
1005          }
1006      }
1007  });
1008  
1009  Y.UploaderHTML5.Queue = UploaderQueue;
1010  
1011  
1012  
1013  }, '3.17.2', {"requires": ["widget", "node-event-simulate", "file-html5", "uploader-queue"]});