[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('file-html5', function (Y, NAME) {
   9  
  10      /**
  11       * The FileHTML5 class provides a wrapper for a file pointer in an HTML5 The File wrapper
  12       * also implements the mechanics for uploading a file and tracking its progress.
  13       * @module file-html5
  14       */
  15  
  16      /**
  17       * The class provides a wrapper for a file pointer.
  18       * @class FileHTML5
  19       * @extends Base
  20       * @constructor
  21       * @param {Object} config Configuration object.
  22       */
  23      var Lang = Y.Lang,
  24          Bind = Y.bind,
  25          Win = Y.config.win;
  26  
  27      var FileHTML5 = function(o) {
  28  
  29          var file = null;
  30  
  31          if (FileHTML5.isValidFile(o)) {
  32              file = o;
  33          }
  34          else if (FileHTML5.isValidFile(o.file)) {
  35              file = o.file;
  36          }
  37          else {
  38              file = false;
  39          }
  40  
  41          FileHTML5.superclass.constructor.apply(this, arguments);
  42  
  43          if (file && FileHTML5.canUpload()) {
  44             if (!this.get("file")) {
  45                 this._set("file", file);
  46             }
  47  
  48             if (!this.get("name")) {
  49             this._set("name", file.name || file.fileName);
  50             }
  51  
  52             if (this.get("size") != (file.size || file.fileSize)) {
  53             this._set("size", file.size || file.fileSize);
  54             }
  55  
  56             if (!this.get("type")) {
  57             this._set("type", file.type);
  58             }
  59  
  60             if (file.hasOwnProperty("lastModifiedDate") && !this.get("dateModified")) {
  61                 this._set("dateModified", file.lastModifiedDate);
  62             }
  63          }
  64      };
  65  
  66  
  67      Y.extend(FileHTML5, Y.Base, {
  68  
  69         /**
  70          * Construction logic executed during FileHTML5 instantiation.
  71          *
  72          * @method initializer
  73          * @protected
  74          */
  75          initializer : function (cfg) {
  76              if (!this.get("id")) {
  77                  this._set("id", Y.guid("file"));
  78              }
  79          },
  80  
  81         /**
  82          * Handler of events dispatched by the XMLHTTPRequest.
  83          *
  84          * @method _uploadEventHandler
  85          * @param {Event} event The event object received from the XMLHTTPRequest.
  86          * @protected
  87          */
  88          _uploadEventHandler: function (event) {
  89              var xhr = this.get("xhr");
  90  
  91              switch (event.type) {
  92                  case "progress":
  93                    /**
  94                     * Signals that progress has been made on the upload of this file.
  95                     *
  96                     * @event uploadprogress
  97                     * @param event {Event} The event object for the `uploadprogress` with the
  98                     *                      following payload:
  99                     *  <dl>
 100                     *      <dt>originEvent</dt>
 101                     *          <dd>The original event fired by the XMLHttpRequest instance.</dd>
 102                     *      <dt>bytesLoaded</dt>
 103                     *          <dd>The number of bytes of the file that has been uploaded.</dd>
 104                     *      <dt>bytesTotal</dt>
 105                     *          <dd>The total number of bytes in the file (the file size)</dd>
 106                     *      <dt>percentLoaded</dt>
 107                     *          <dd>The fraction of the file that has been uploaded, out of 100.</dd>
 108                     *  </dl>
 109                     */
 110                     this.fire("uploadprogress", {originEvent: event,
 111                                                 bytesLoaded: event.loaded,
 112                                                 bytesTotal: this.get("size"),
 113                                                 percentLoaded: Math.min(100, Math.round(10000*event.loaded/this.get("size"))/100)
 114                                                 });
 115                     this._set("bytesUploaded", event.loaded);
 116                     break;
 117  
 118                  case "load":
 119                    /**
 120                     * Signals that this file's upload has completed and data has been received from the server.
 121                     *
 122                     * @event uploadcomplete
 123                     * @param event {Event} The event object for the `uploadcomplete` with the
 124                     *                      following payload:
 125                     *  <dl>
 126                     *      <dt>originEvent</dt>
 127                     *          <dd>The original event fired by the XMLHttpRequest instance.</dd>
 128                     *      <dt>data</dt>
 129                     *          <dd>The data returned by the server.</dd>
 130                     *  </dl>
 131                     */
 132  
 133                     if (xhr.status >= 200 && xhr.status <= 299) {
 134                          this.fire("uploadcomplete", {originEvent: event,
 135                                                       data: event.target.responseText});
 136                          var xhrupload = xhr.upload,
 137                              boundEventHandler = this.get("boundEventHandler");
 138  
 139                          xhrupload.removeEventListener ("progress", boundEventHandler);
 140                          xhrupload.removeEventListener ("error", boundEventHandler);
 141                          xhrupload.removeEventListener ("abort", boundEventHandler);
 142                          xhr.removeEventListener ("load", boundEventHandler);
 143                          xhr.removeEventListener ("error", boundEventHandler);
 144                          xhr.removeEventListener ("readystatechange", boundEventHandler);
 145  
 146                          this._set("xhr", null);
 147                     }
 148                     else {
 149                          this.fire("uploaderror", {originEvent: event,
 150                                                    data: xhr.responseText,
 151                                                    status: xhr.status,
 152                                                    statusText: xhr.statusText,
 153                                                    source: "http"});
 154                     }
 155                     break;
 156  
 157                  case "error":
 158                    /**
 159                     * Signals that this file's upload has encountered an error.
 160                     *
 161                     * @event uploaderror
 162                     * @param event {Event} The event object for the `uploaderror` with the
 163                     *                      following payload:
 164                     *  <dl>
 165                     *      <dt>originEvent</dt>
 166                     *          <dd>The original event fired by the XMLHttpRequest instance.</dd>
 167                     *      <dt>data</dt>
 168                     *          <dd>The data returned by the server.</dd>
 169                     *      <dt>status</dt>
 170                     *          <dd>The status code reported by the XMLHttpRequest. If it's an HTTP error,
 171                                    then this corresponds to the HTTP status code received by the uploader.</dd>
 172                     *      <dt>statusText</dt>
 173                     *          <dd>The text of the error event reported by the XMLHttpRequest instance</dd>
 174                     *      <dt>source</dt>
 175                     *          <dd>Either "http" (if it's an HTTP error), or "io" (if it's a network transmission
 176                     *              error.)</dd>
 177                     *
 178                     *  </dl>
 179                     */
 180                     this.fire("uploaderror", {originEvent: event,
 181                                                    data: xhr.responseText,
 182                                                    status: xhr.status,
 183                                                    statusText: xhr.statusText,
 184                                                    source: "io"});
 185                     break;
 186  
 187                  case "abort":
 188  
 189                    /**
 190                     * Signals that this file's upload has been cancelled.
 191                     *
 192                     * @event uploadcancel
 193                     * @param event {Event} The event object for the `uploadcancel` with the
 194                     *                      following payload:
 195                     *  <dl>
 196                     *      <dt>originEvent</dt>
 197                     *          <dd>The original event fired by the XMLHttpRequest instance.</dd>
 198                     *  </dl>
 199                     */
 200                     this.fire("uploadcancel", {originEvent: event});
 201                     break;
 202  
 203                  case "readystatechange":
 204  
 205                    /**
 206                     * Signals that XMLHttpRequest has fired a readystatechange event.
 207                     *
 208                     * @event readystatechange
 209                     * @param event {Event} The event object for the `readystatechange` with the
 210                     *                      following payload:
 211                     *  <dl>
 212                     *      <dt>readyState</dt>
 213                     *          <dd>The readyState code reported by the XMLHttpRequest instance.</dd>
 214                     *      <dt>originEvent</dt>
 215                     *          <dd>The original event fired by the XMLHttpRequest instance.</dd>
 216                     *  </dl>
 217                     */
 218                     this.fire("readystatechange", {readyState: event.target.readyState,
 219                                                    originEvent: event});
 220                     break;
 221              }
 222          },
 223  
 224         /**
 225          * Starts the upload of a specific file.
 226          *
 227          * @method startUpload
 228          * @param url {String} The URL to upload the file to.
 229          * @param parameters {Object} (optional) A set of key-value pairs to send as variables along with the file upload HTTP request.
 230          * @param fileFieldName {String} (optional) The name of the POST variable that should contain the uploaded file ('Filedata' by default)
 231          */
 232          startUpload: function(url, parameters, fileFieldName) {
 233  
 234              this._set("bytesUploaded", 0);
 235  
 236              this._set("xhr", new XMLHttpRequest());
 237              this._set("boundEventHandler", Bind(this._uploadEventHandler, this));
 238  
 239              var uploadData = new FormData(),
 240                  fileField = fileFieldName || "Filedata",
 241                  xhr = this.get("xhr"),
 242                  xhrupload = this.get("xhr").upload,
 243                  boundEventHandler = this.get("boundEventHandler");
 244  
 245              Y.each(parameters, function (value, key) {uploadData.append(key, value);});
 246              uploadData.append(fileField, this.get("file"));
 247  
 248  
 249  
 250  
 251              xhr.addEventListener ("loadstart", boundEventHandler, false);
 252              xhrupload.addEventListener ("progress", boundEventHandler, false);
 253              xhr.addEventListener ("load", boundEventHandler, false);
 254              xhr.addEventListener ("error", boundEventHandler, false);
 255              xhrupload.addEventListener ("error", boundEventHandler, false);
 256              xhrupload.addEventListener ("abort", boundEventHandler, false);
 257              xhr.addEventListener ("abort", boundEventHandler, false);
 258              xhr.addEventListener ("loadend", boundEventHandler, false);
 259              xhr.addEventListener ("readystatechange", boundEventHandler, false);
 260  
 261              xhr.open("POST", url, true);
 262  
 263              xhr.withCredentials = this.get("xhrWithCredentials");
 264  
 265              Y.each(this.get("xhrHeaders"), function (value, key) {
 266                   xhr.setRequestHeader(key, value);
 267              });
 268  
 269              xhr.send(uploadData);
 270  
 271              /**
 272               * Signals that this file's upload has started.
 273               *
 274               * @event uploadstart
 275               * @param event {Event} The event object for the `uploadstart` with the
 276               *                      following payload:
 277               *  <dl>
 278               *      <dt>xhr</dt>
 279               *          <dd>The XMLHttpRequest instance handling the file upload.</dd>
 280               *  </dl>
 281               */
 282               this.fire("uploadstart", {xhr: xhr});
 283  
 284          },
 285  
 286         /**
 287          * Cancels the upload of a specific file, if currently in progress.
 288          *
 289          * @method cancelUpload
 290          */
 291          cancelUpload: function () {
 292              var xhr = this.get('xhr');
 293              if (xhr) {
 294                  xhr.abort();
 295              }
 296          }
 297  
 298  
 299      }, {
 300  
 301         /**
 302          * The identity of the class.
 303          *
 304          * @property NAME
 305          * @type String
 306          * @default 'file'
 307          * @readOnly
 308          * @protected
 309          * @static
 310          */
 311          NAME: 'file',
 312  
 313         /**
 314          * The type of transport.
 315          *
 316          * @property TYPE
 317          * @type String
 318          * @default 'html5'
 319          * @readOnly
 320          * @protected
 321          * @static
 322          */
 323          TYPE: 'html5',
 324  
 325         /**
 326          * Static property used to define the default attribute configuration of
 327          * the File.
 328          *
 329          * @property ATTRS
 330          * @type {Object}
 331          * @protected
 332          * @static
 333          */
 334          ATTRS: {
 335  
 336         /**
 337          * A String containing the unique id of the file wrapped by the FileFlash instance.
 338          * The id is supplied by the Flash player uploader.
 339          *
 340          * @attribute id
 341          * @type {String}
 342          * @initOnly
 343          */
 344          id: {
 345              writeOnce: "initOnly",
 346              value: null
 347          },
 348  
 349         /**
 350          * The size of the file wrapped by FileHTML5. This value is supplied by the instance of File().
 351          *
 352          * @attribute size
 353          * @type {Number}
 354          * @initOnly
 355          */
 356          size: {
 357              writeOnce: "initOnly",
 358              value: 0
 359          },
 360  
 361         /**
 362          * The name of the file wrapped by FileHTML5. This value is supplied by the instance of File().
 363          *
 364          * @attribute name
 365          * @type {String}
 366          * @initOnly
 367          */
 368          name: {
 369              writeOnce: "initOnly",
 370              value: null
 371          },
 372  
 373         /**
 374          * The date that the file wrapped by FileHTML5 was created on. This value is supplied by the instance of File().
 375          *
 376          * @attribute dateCreated
 377          * @type {Date}
 378          * @initOnly
 379          * @default null
 380          */
 381          dateCreated: {
 382              writeOnce: "initOnly",
 383              value: null
 384          },
 385  
 386         /**
 387          * The date that the file wrapped by FileHTML5 was last modified on. This value is supplied by the instance of File().
 388          *
 389          * @attribute dateModified
 390          * @type {Date}
 391          * @initOnly
 392          */
 393          dateModified: {
 394              writeOnce: "initOnly",
 395              value: null
 396          },
 397  
 398         /**
 399          * The number of bytes of the file that has been uploaded to the server. This value is
 400          * non-zero only while a file is being uploaded.
 401          *
 402          * @attribute bytesUploaded
 403          * @type {Date}
 404          * @readOnly
 405          */
 406          bytesUploaded: {
 407              readOnly: true,
 408              value: 0
 409          },
 410  
 411         /**
 412          * The type of the file wrapped by FileHTML. This value is provided by the instance of File()
 413          *
 414          * @attribute type
 415          * @type {String}
 416          * @initOnly
 417          */
 418          type: {
 419              writeOnce: "initOnly",
 420              value: null
 421          },
 422  
 423         /**
 424          * The pointer to the instance of File() wrapped by FileHTML5.
 425          *
 426          * @attribute file
 427          * @type {File}
 428          * @initOnly
 429          */
 430          file: {
 431              writeOnce: "initOnly",
 432              value: null
 433          },
 434  
 435         /**
 436          * The pointer to the instance of XMLHttpRequest used by FileHTML5 to upload the file.
 437          *
 438          * @attribute xhr
 439          * @type {XMLHttpRequest}
 440          * @initOnly
 441          */
 442          xhr: {
 443              readOnly: true,
 444              value: null
 445          },
 446  
 447         /**
 448          * The dictionary of headers that should be set on the XMLHttpRequest object before
 449          * sending it.
 450          *
 451          * @attribute xhrHeaders
 452          * @type {Object}
 453          * @initOnly
 454          */
 455          xhrHeaders: {
 456              value: {}
 457          },
 458  
 459         /**
 460          * A Boolean indicating whether the XMLHttpRequest should be sent with user credentials.
 461          * This does not affect same-site requests.
 462          *
 463          * @attribute xhrWithCredentials
 464          * @type {Boolean}
 465          * @initOnly
 466          */
 467          xhrWithCredentials: {
 468              value: true
 469          },
 470  
 471         /**
 472          * The bound event handler used to handle events from XMLHttpRequest.
 473          *
 474          * @attribute boundEventHandler
 475          * @type {Function}
 476          * @initOnly
 477          */
 478          boundEventHandler: {
 479              readOnly: true,
 480              value: null
 481          }
 482          },
 483  
 484         /**
 485          * Checks whether a specific native file instance is valid
 486          *
 487          * @method isValidFile
 488          * @param file {File} A native File() instance.
 489          * @static
 490          */
 491          isValidFile: function (file) {
 492              return (Win && Win.File && file instanceof File);
 493          },
 494  
 495         /**
 496          * Checks whether the browser has a native upload capability
 497          * via XMLHttpRequest Level 2.
 498          *
 499          * @method canUpload
 500          * @static
 501          */
 502          canUpload: function () {
 503              return (Win && Win.FormData && Win.XMLHttpRequest);
 504          }
 505      });
 506  
 507      Y.FileHTML5 = FileHTML5;
 508  
 509  
 510  }, '3.17.2', {"requires": ["base"]});