← Back to branch summary

~ubuntu-branches/ubuntu/utopic/moodle/utopic

« back to all changes in this revision

Viewing changes to lib/yuilib/3.13.0/file-html5/file-html5.js

  • Committer: Package Import Robot
  • Author(s): Thijs Kinkhorst
  • Date: 2014-05-12 16:10:38 UTC
  • mfrom: (36.1.3 sid)
  • Revision ID: package-import@ubuntu.com-20140512161038-puyqf65k4e0s8ytz
Tags: 2.6.3-1
New upstream release.

Show diffs side-by-side

added added

removed removed

Lines of Context:
lib/yuilib/3.13.0/file-html5/file-html5.js
 
1
/*
 
2
YUI 3.13.0 (build 508226d)
 
3
Copyright 2013 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
                                                  status: xhr.status,
 
151
                                                  statusText: xhr.statusText,
 
152
                                                  source: "http"});
 
153
                   }
 
154
                   break;
 
155
 
 
156
                case "error":
 
157
                  /**
 
158
                   * Signals that this file's upload has encountered an error.
 
159
                   *
 
160
                   * @event uploaderror
 
161
                   * @param event {Event} The event object for the `uploaderror` with the
 
162
                   *                      following payload:
 
163
                   *  <dl>
 
164
                   *      <dt>originEvent</dt>
 
165
                   *          <dd>The original event fired by the XMLHttpRequest instance.</dd>
 
166
                   *      <dt>status</dt>
 
167
                   *          <dd>The status code reported by the XMLHttpRequest. If it's an HTTP error,
 
168
                                  then this corresponds to the HTTP status code received by the uploader.</dd>
 
169
                   *      <dt>statusText</dt>
 
170
                   *          <dd>The text of the error event reported by the XMLHttpRequest instance</dd>
 
171
                   *      <dt>source</dt>
 
172
                   *          <dd>Either "http" (if it's an HTTP error), or "io" (if it's a network transmission
 
173
                   *              error.)</dd>
 
174
                   *
 
175
                   *  </dl>
 
176
                   */
 
177
                   this.fire("uploaderror", {originEvent: event,
 
178
                                                  status: xhr.status,
 
179
                                                  statusText: xhr.statusText,
 
180
                                                  source: "io"});
 
181
                   break;
 
182
 
 
183
                case "abort":
 
184
 
 
185
                  /**
 
186
                   * Signals that this file's upload has been cancelled.
 
187
                   *
 
188
                   * @event uploadcancel
 
189
                   * @param event {Event} The event object for the `uploadcancel` with the
 
190
                   *                      following payload:
 
191
                   *  <dl>
 
192
                   *      <dt>originEvent</dt>
 
193
                   *          <dd>The original event fired by the XMLHttpRequest instance.</dd>
 
194
                   *  </dl>
 
195
                   */
 
196
                   this.fire("uploadcancel", {originEvent: event});
 
197
                   break;
 
198
 
 
199
                case "readystatechange":
 
200
 
 
201
                  /**
 
202
                   * Signals that XMLHttpRequest has fired a readystatechange event.
 
203
                   *
 
204
                   * @event readystatechange
 
205
                   * @param event {Event} The event object for the `readystatechange` with the
 
206
                   *                      following payload:
 
207
                   *  <dl>
 
208
                   *      <dt>readyState</dt>
 
209
                   *          <dd>The readyState code reported by the XMLHttpRequest instance.</dd>
 
210
                   *      <dt>originEvent</dt>
 
211
                   *          <dd>The original event fired by the XMLHttpRequest instance.</dd>
 
212
                   *  </dl>
 
213
                   */
 
214
                   this.fire("readystatechange", {readyState: event.target.readyState,
 
215
                                                  originEvent: event});
 
216
                   break;
 
217
            }
 
218
        },
 
219
 
 
220
       /**
 
221
        * Starts the upload of a specific file.
 
222
        *
 
223
        * @method startUpload
 
224
        * @param url {String} The URL to upload the file to.
 
225
        * @param parameters {Object} (optional) A set of key-value pairs to send as variables along with the file upload HTTP request.
 
226
        * @param fileFieldName {String} (optional) The name of the POST variable that should contain the uploaded file ('Filedata' by default)
 
227
        */
 
228
        startUpload: function(url, parameters, fileFieldName) {
 
229
 
 
230
            this._set("bytesUploaded", 0);
 
231
 
 
232
            this._set("xhr", new XMLHttpRequest());
 
233
            this._set("boundEventHandler", Bind(this._uploadEventHandler, this));
 
234
 
 
235
            var uploadData = new FormData(),
 
236
                fileField = fileFieldName || "Filedata",
 
237
                xhr = this.get("xhr"),
 
238
                xhrupload = this.get("xhr").upload,
 
239
                boundEventHandler = this.get("boundEventHandler");
 
240
 
 
241
            Y.each(parameters, function (value, key) {uploadData.append(key, value);});
 
242
            uploadData.append(fileField, this.get("file"));
 
243
 
 
244
 
 
245
 
 
246
 
 
247
            xhr.addEventListener ("loadstart", boundEventHandler, false);
 
248
            xhrupload.addEventListener ("progress", boundEventHandler, false);
 
249
            xhr.addEventListener ("load", boundEventHandler, false);
 
250
            xhr.addEventListener ("error", boundEventHandler, false);
 
251
            xhrupload.addEventListener ("error", boundEventHandler, false);
 
252
            xhrupload.addEventListener ("abort", boundEventHandler, false);
 
253
            xhr.addEventListener ("abort", boundEventHandler, false);
 
254
            xhr.addEventListener ("loadend", boundEventHandler, false);
 
255
            xhr.addEventListener ("readystatechange", boundEventHandler, false);
 
256
 
 
257
            xhr.open("POST", url, true);
 
258
 
 
259
            xhr.withCredentials = this.get("xhrWithCredentials");
 
260
 
 
261
            Y.each(this.get("xhrHeaders"), function (value, key) {
 
262
                 xhr.setRequestHeader(key, value);
 
263
            });
 
264
 
 
265
            xhr.send(uploadData);
 
266
 
 
267
            /**
 
268
             * Signals that this file's upload has started.
 
269
             *
 
270
             * @event uploadstart
 
271
             * @param event {Event} The event object for the `uploadstart` with the
 
272
             *                      following payload:
 
273
             *  <dl>
 
274
             *      <dt>xhr</dt>
 
275
             *          <dd>The XMLHttpRequest instance handling the file upload.</dd>
 
276
             *  </dl>
 
277
             */
 
278
             this.fire("uploadstart", {xhr: xhr});
 
279
 
 
280
        },
 
281
 
 
282
       /**
 
283
        * Cancels the upload of a specific file, if currently in progress.
 
284
        *
 
285
        * @method cancelUpload
 
286
        */
 
287
        cancelUpload: function () {
 
288
            var xhr = this.get('xhr');
 
289
            if (xhr) {
 
290
                xhr.abort();
 
291
            }
 
292
        }
 
293
 
 
294
 
 
295
    }, {
 
296
 
 
297
       /**
 
298
        * The identity of the class.
 
299
        *
 
300
        * @property NAME
 
301
        * @type String
 
302
        * @default 'file'
 
303
        * @readOnly
 
304
        * @protected
 
305
        * @static
 
306
        */
 
307
        NAME: 'file',
 
308
 
 
309
       /**
 
310
        * The type of transport.
 
311
        *
 
312
        * @property TYPE
 
313
        * @type String
 
314
        * @default 'html5'
 
315
        * @readOnly
 
316
        * @protected
 
317
        * @static
 
318
        */
 
319
        TYPE: 'html5',
 
320
 
 
321
       /**
 
322
        * Static property used to define the default attribute configuration of
 
323
        * the File.
 
324
        *
 
325
        * @property ATTRS
 
326
        * @type {Object}
 
327
        * @protected
 
328
        * @static
 
329
        */
 
330
        ATTRS: {
 
331
 
 
332
       /**
 
333
        * A String containing the unique id of the file wrapped by the FileFlash instance.
 
334
        * The id is supplied by the Flash player uploader.
 
335
        *
 
336
        * @attribute id
 
337
        * @type {String}
 
338
        * @initOnly
 
339
        */
 
340
        id: {
 
341
            writeOnce: "initOnly",
 
342
            value: null
 
343
        },
 
344
 
 
345
       /**
 
346
        * The size of the file wrapped by FileHTML5. This value is supplied by the instance of File().
 
347
        *
 
348
        * @attribute size
 
349
        * @type {Number}
 
350
        * @initOnly
 
351
        */
 
352
        size: {
 
353
            writeOnce: "initOnly",
 
354
            value: 0
 
355
        },
 
356
 
 
357
       /**
 
358
        * The name of the file wrapped by FileHTML5. This value is supplied by the instance of File().
 
359
        *
 
360
        * @attribute name
 
361
        * @type {String}
 
362
        * @initOnly
 
363
        */
 
364
        name: {
 
365
            writeOnce: "initOnly",
 
366
            value: null
 
367
        },
 
368
 
 
369
       /**
 
370
        * The date that the file wrapped by FileHTML5 was created on. This value is supplied by the instance of File().
 
371
        *
 
372
        * @attribute dateCreated
 
373
        * @type {Date}
 
374
        * @initOnly
 
375
        * @default null
 
376
        */
 
377
        dateCreated: {
 
378
            writeOnce: "initOnly",
 
379
            value: null
 
380
        },
 
381
 
 
382
       /**
 
383
        * The date that the file wrapped by FileHTML5 was last modified on. This value is supplied by the instance of File().
 
384
        *
 
385
        * @attribute dateModified
 
386
        * @type {Date}
 
387
        * @initOnly
 
388
        */
 
389
        dateModified: {
 
390
            writeOnce: "initOnly",
 
391
            value: null
 
392
        },
 
393
 
 
394
       /**
 
395
        * The number of bytes of the file that has been uploaded to the server. This value is
 
396
        * non-zero only while a file is being uploaded.
 
397
        *
 
398
        * @attribute bytesUploaded
 
399
        * @type {Date}
 
400
        * @readOnly
 
401
        */
 
402
        bytesUploaded: {
 
403
            readOnly: true,
 
404
            value: 0
 
405
        },
 
406
 
 
407
       /**
 
408
        * The type of the file wrapped by FileHTML. This value is provided by the instance of File()
 
409
        *
 
410
        * @attribute type
 
411
        * @type {String}
 
412
        * @initOnly
 
413
        */
 
414
        type: {
 
415
            writeOnce: "initOnly",
 
416
            value: null
 
417
        },
 
418
 
 
419
       /**
 
420
        * The pointer to the instance of File() wrapped by FileHTML5.
 
421
        *
 
422
        * @attribute file
 
423
        * @type {File}
 
424
        * @initOnly
 
425
        */
 
426
        file: {
 
427
            writeOnce: "initOnly",
 
428
            value: null
 
429
        },
 
430
 
 
431
       /**
 
432
        * The pointer to the instance of XMLHttpRequest used by FileHTML5 to upload the file.
 
433
        *
 
434
        * @attribute xhr
 
435
        * @type {XMLHttpRequest}
 
436
        * @initOnly
 
437
        */
 
438
        xhr: {
 
439
            readOnly: true,
 
440
            value: null
 
441
        },
 
442
 
 
443
       /**
 
444
        * The dictionary of headers that should be set on the XMLHttpRequest object before
 
445
        * sending it.
 
446
        *
 
447
        * @attribute xhrHeaders
 
448
        * @type {Object}
 
449
        * @initOnly
 
450
        */
 
451
        xhrHeaders: {
 
452
            value: {}
 
453
        },
 
454
 
 
455
       /**
 
456
        * A Boolean indicating whether the XMLHttpRequest should be sent with user credentials.
 
457
        * This does not affect same-site requests.
 
458
        *
 
459
        * @attribute xhrWithCredentials
 
460
        * @type {Boolean}
 
461
        * @initOnly
 
462
        */
 
463
        xhrWithCredentials: {
 
464
            value: true
 
465
        },
 
466
 
 
467
       /**
 
468
        * The bound event handler used to handle events from XMLHttpRequest.
 
469
        *
 
470
        * @attribute boundEventHandler
 
471
        * @type {Function}
 
472
        * @initOnly
 
473
        */
 
474
        boundEventHandler: {
 
475
            readOnly: true,
 
476
            value: null
 
477
        }
 
478
        },
 
479
 
 
480
       /**
 
481
        * Checks whether a specific native file instance is valid
 
482
        *
 
483
        * @method isValidFile
 
484
        * @param file {File} A native File() instance.
 
485
        * @static
 
486
        */
 
487
        isValidFile: function (file) {
 
488
            return (Win && Win.File && file instanceof File);
 
489
        },
 
490
 
 
491
       /**
 
492
        * Checks whether the browser has a native upload capability
 
493
        * via XMLHttpRequest Level 2.
 
494
        *
 
495
        * @method canUpload
 
496
        * @static
 
497
        */
 
498
        canUpload: function () {
 
499
            return (Win && Win.FormData && Win.XMLHttpRequest);
 
500
        }
 
501
    });
 
502
 
 
503
    Y.FileHTML5 = FileHTML5;
 
504
 
 
505
 
 
506
}, '3.13.0', {"requires": ["base"]});