| 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);
|