44 lines
1.4 KiB
JavaScript
44 lines
1.4 KiB
JavaScript
|
export const upload = function(superClass) {
|
||
|
|
return class extends superClass {
|
||
|
|
/**
|
||
|
|
* Upload files to the backend
|
||
|
|
*
|
||
|
|
* @param {String} id An identifier send with the upload events to filter out the right upload if multiple onces are running.
|
||
|
|
* @param {Array} files List of files to upload
|
||
|
|
* @param {Object} opts Upload options
|
||
|
|
* @returns Promise
|
||
|
|
*/
|
||
|
|
uploadFiles(url, files, opts = {}) {
|
||
|
|
return new Promise((resolve, reject) => {
|
||
|
|
const request = new XMLHttpRequest();
|
||
|
|
const formData = new FormData();
|
||
|
|
|
||
|
|
for (const key in opts) {
|
||
|
|
formData.append(key, opts[key]);
|
||
|
|
}
|
||
|
|
|
||
|
|
request.open('POST', url, true);
|
||
|
|
request.addEventListener('readystatechange', () => {
|
||
|
|
if (request.readyState === 4) {
|
||
|
|
resolve(request);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
request.upload.addEventListener('progress', e => {
|
||
|
|
this.dispatchEvent(new CustomEvent('upload-progress', { detail: { percent: ((e.loaded / e.total) * 100).toFixed(2) }, bubbles: true, composed: true }));
|
||
|
|
});
|
||
|
|
|
||
|
|
request.addEventListener('load', () => {
|
||
|
|
this.dispatchEvent(new CustomEvent('upload-finished', { detail: null, bubbles: true, composed: true }));
|
||
|
|
});
|
||
|
|
|
||
|
|
for (let i = 0; i < files.length; i++) {
|
||
|
|
formData.append(files[i].name, files[i]);
|
||
|
|
}
|
||
|
|
|
||
|
|
request.send(formData);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
};
|
||
|
|
};
|