43 lines
1.1 KiB
JavaScript
43 lines
1.1 KiB
JavaScript
import { DirectUpload } from '@rails/activestorage';
|
|
import ProgressBar from './progress-bar';
|
|
|
|
/**
|
|
Uploader class is a delegate for DirectUpload instance
|
|
used to track lifecycle and progress of un upload.
|
|
*/
|
|
export default class Uploader {
|
|
constructor(input, file, directUploadUrl) {
|
|
this.directUpload = new DirectUpload(file, directUploadUrl, this);
|
|
this.progressBar = new ProgressBar(input, this.directUpload.id, file);
|
|
}
|
|
|
|
start() {
|
|
this.progressBar.start();
|
|
|
|
return new Promise((resolve, reject) => {
|
|
this.directUpload.create((error, attributes) => {
|
|
if (error) {
|
|
this.progressBar.error(error);
|
|
reject(error);
|
|
} else {
|
|
resolve(attributes.signed_id);
|
|
}
|
|
this.progressBar.end();
|
|
this.progressBar.destroy();
|
|
});
|
|
});
|
|
}
|
|
|
|
uploadRequestDidProgress(event) {
|
|
const progress = (event.loaded / event.total) * 100;
|
|
if (progress) {
|
|
this.progressBar.progress(progress);
|
|
}
|
|
}
|
|
|
|
directUploadWillStoreFileWithXHR(xhr) {
|
|
xhr.upload.addEventListener('progress', event =>
|
|
this.uploadRequestDidProgress(event)
|
|
);
|
|
}
|
|
}
|