Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 efrain 1
H5PEditor.FileUploader = (function ($, EventDispatcher) {
2
 
3
  /**
4
   * File Upload API for H5P
5
   *
6
   * @class H5PEditor.FileUploader
7
   * @extends H5P.EventDispatcher
8
   * @param {Object} field Required for validating the uploaded file
9
   */
10
  function FileUploader(field) {
11
    var self = this;
12
 
13
    // Initialize event inheritance
14
    EventDispatcher.call(self);
15
 
16
    /**
17
     * Triggers the actual upload of the file.
18
     *
19
     * @param {Blob|File} file
20
     * @param {string} filename Required due to validation
21
     */
22
    self.upload = function (file, filename) {
23
      var formData = new FormData();
24
      formData.append('file', file, filename);
25
      formData.append('field', JSON.stringify(field));
26
      formData.append('contentId', H5PEditor.contentId || 0);
27
 
28
      // Submit the form
29
      var request = new XMLHttpRequest();
30
      request.upload.onprogress = function (e) {
31
        if (e.lengthComputable) {
32
          self.trigger('uploadProgress', (e.loaded / e.total));
33
        }
34
      };
35
      request.onload = function () {
36
        var result;
37
        var uploadComplete = {
38
          error: null,
39
          data: null
40
        };
41
 
42
        try {
43
          result = JSON.parse(request.responseText);
44
        }
45
        catch (err) {
46
          H5P.error(err);
47
          // Add error data to event object
48
          uploadComplete.error = H5PEditor.t('core', 'fileToLarge');
49
        }
50
 
51
        if (result !== undefined) {
52
          if (result.error !== undefined) {
53
            uploadComplete.error = result.error;
54
          }
55
          if (result.success === false) {
56
            uploadComplete.error = (result.message ? result.message : H5PEditor.t('core', 'unknownFileUploadError'));
57
          }
58
        }
59
 
60
        if (uploadComplete.error === null) {
61
          // No problems, add response data to event object
62
          uploadComplete.data = result;
63
        }
64
 
65
        // Allow the widget to process the result
66
        self.trigger('uploadComplete', uploadComplete);
67
      };
68
 
69
      request.open('POST', H5PEditor.getAjaxUrl('files'), true);
70
      request.send(formData);
71
      self.trigger('upload');
72
    };
73
 
74
    /**
75
     * Upload the list of file objects.
76
     * TODO: Future improvement, iterate for multiple files
77
     *
78
     * @param {File[]} files
79
     */
80
    self.uploadFiles = function (files) {
81
      self.upload(files[0], files[0].name);
82
    };
83
 
84
    /**
85
     * Open the file selector and trigger upload upon selecting file.
86
     */
87
    self.openFileSelector = function () {
88
      // Create a file selector
89
      const input = document.createElement('input');
90
      input.type = 'file';
91
      input.setAttribute('accept', determineAllowedMimeTypes());
92
      input.style='display:none';
93
      input.addEventListener('change', function () {
94
        // When files are selected, upload them
95
        self.uploadFiles(this.files);
96
        document.body.removeChild(input);
97
      });
98
 
99
      document.body.appendChild(input);
100
      // Open file selector
101
      input.click();
102
    };
103
 
104
    /**
105
     * Determine allowed file mimes. Used to make it easier to find and
106
     * select the correct file.
107
     *
108
     * @return {string}
109
     */
110
    const determineAllowedMimeTypes = function () {
111
      if (field.mimes) {
112
        return field.mimes.join(',');
113
      }
114
 
115
      switch (field.type) {
116
        case 'image':
117
          return 'image/jpeg,image/png,image/gif';
118
        case 'audio':
119
          return 'audio/mpeg,audio/x-wav,audio/ogg,audio/mp4';
120
        case 'video':
121
          return 'video/mp4,video/webm,video/ogg';
122
      }
123
    }
124
  }
125
 
126
  // Extends the event dispatcher
127
  FileUploader.prototype = Object.create(EventDispatcher.prototype);
128
  FileUploader.prototype.constructor = FileUploader;
129
 
130
  return FileUploader;
131
})(H5P.jQuery, H5P.EventDispatcher);