62 lines
2.2 KiB
JavaScript
62 lines
2.2 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, data = {}) {
|
|
return new Promise((resolve, reject) => {
|
|
const request = new XMLHttpRequest();
|
|
const formData = new FormData();
|
|
|
|
for (const key in data) {
|
|
formData.append(key, data[key]);
|
|
}
|
|
|
|
request.open('POST', url, true);
|
|
request.addEventListener('readystatechange', () => {
|
|
if (request.readyState === 4) {
|
|
resolve(request);
|
|
}
|
|
});
|
|
|
|
request.addEventListener('loadstart', e => {
|
|
this.dispatchEvent(new CustomEvent('upload-started', { detail: e, bubbles: true, composed: true }));
|
|
});
|
|
|
|
request.addEventListener('progress', e => {
|
|
this.dispatchEvent(new CustomEvent('upload-progress', { detail: { percent: ((e.loaded / e.total) * 100).toFixed(2) }, bubbles: true, composed: true }));
|
|
});
|
|
|
|
request.addEventListener('error', e => {
|
|
this.dispatchEvent(new CustomEvent('upload-error', { detail: e, bubbles: true, composed: true }));
|
|
});
|
|
|
|
request.addEventListener('error', e => {
|
|
this.dispatchEvent(new CustomEvent('upload-error', { detail: e, bubbles: true, composed: true }));
|
|
});
|
|
|
|
request.addEventListener('load', () => {
|
|
this.dispatchEvent(new CustomEvent('upload-finished', { detail: null, bubbles: true, composed: true }));
|
|
});
|
|
|
|
request.addEventListener('abort', () => {
|
|
this.dispatchEvent(new CustomEvent('upload-aborted', { detail: null, bubbles: true, composed: true }));
|
|
});
|
|
|
|
for (let i = 0; i < files.length; i++) {
|
|
formData.append(files[i].name, files[i]);
|
|
}
|
|
|
|
document.dispatchEvent(new CustomEvent('before-request', { detail: request, bubbles: true, composed: true }));
|
|
|
|
request.send(formData);
|
|
});
|
|
}
|
|
};
|
|
};
|