70 lines
1.7 KiB
JavaScript
70 lines
1.7 KiB
JavaScript
|
import { DirectUpload } from 'activestorage';
|
||
|
|
import { dispatchEvent } from './helpers';
|
||
|
|
|
||
|
|
export class DirectUploadController {
|
||
|
|
constructor(input, file) {
|
||
|
|
this.input = input;
|
||
|
|
this.file = file;
|
||
|
|
this.directUpload = new DirectUpload(this.file, this.url, this);
|
||
|
|
this.dispatch('initialize');
|
||
|
|
}
|
||
|
|
|
||
|
|
start(callback) {
|
||
|
|
const hiddenInput = document.createElement('input');
|
||
|
|
hiddenInput.type = 'hidden';
|
||
|
|
hiddenInput.name = this.input.name;
|
||
|
|
this.input.insertAdjacentElement('beforebegin', hiddenInput);
|
||
|
|
|
||
|
|
this.dispatch('start');
|
||
|
|
|
||
|
|
this.directUpload.create((error, attributes) => {
|
||
|
|
if (error) {
|
||
|
|
hiddenInput.parentNode.removeChild(hiddenInput);
|
||
|
|
this.dispatchError(error);
|
||
|
|
} else {
|
||
|
|
hiddenInput.value = attributes.signed_id;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.dispatch('end');
|
||
|
|
callback(error);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
uploadRequestDidProgress(event) {
|
||
|
|
const progress = (event.loaded / event.total) * 100;
|
||
|
|
if (progress) {
|
||
|
|
this.dispatch('progress', { progress });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
get url() {
|
||
|
|
return this.input.getAttribute('data-direct-upload-url');
|
||
|
|
}
|
||
|
|
|
||
|
|
dispatch(name, detail = {}) {
|
||
|
|
detail.file = this.file;
|
||
|
|
detail.id = this.directUpload.id;
|
||
|
|
return dispatchEvent(this.input, `direct-upload:${name}`, { detail });
|
||
|
|
}
|
||
|
|
|
||
|
|
dispatchError(error) {
|
||
|
|
const event = this.dispatch('error', { error });
|
||
|
|
if (!event.defaultPrevented) {
|
||
|
|
alert(error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// DirectUpload delegate
|
||
|
|
|
||
|
|
directUploadWillCreateBlobWithXHR(xhr) {
|
||
|
|
this.dispatch('before-blob-request', { xhr });
|
||
|
|
}
|
||
|
|
|
||
|
|
directUploadWillStoreFileWithXHR(xhr) {
|
||
|
|
this.dispatch('before-storage-request', { xhr });
|
||
|
|
xhr.upload.addEventListener('progress', event =>
|
||
|
|
this.uploadRequestDidProgress(event)
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|