2022-02-16 19:41:13 +13:00
|
|
|
(function(window){
|
|
|
|
document.addEventListener('alpine:init', () => {
|
|
|
|
Alpine.store('uploader', {
|
|
|
|
files: [],
|
|
|
|
isOpen: true,
|
|
|
|
init() {
|
|
|
|
window.addEventListener('beforeunload', (event) => {
|
|
|
|
this.files.forEach((file) => {
|
|
|
|
if(!file.completed && !file.failed) {
|
|
|
|
let confirmationMessage = "There are incomplete uploads, are you sure you want to leave?";
|
|
|
|
event.returnValue = confirmationMessage;
|
|
|
|
return confirmationMessage;
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
toggle() {
|
|
|
|
this.isOpen = !this.isOpen;
|
|
|
|
},
|
|
|
|
addFile(file) {
|
|
|
|
this.files.push(file);
|
|
|
|
},
|
|
|
|
updateFile(id, file) {
|
|
|
|
this.files = this.files.map((oldFile) => id == oldFile.id ? {...oldFile, ...file} : oldFile);
|
|
|
|
},
|
|
|
|
removeFile(id) {
|
2022-02-21 01:21:53 +13:00
|
|
|
const file = this.getFile(id) ?? {};
|
|
|
|
if(file.completed || file.failed) {
|
|
|
|
this.files = this.files.filter((file) => file.id !== id);
|
|
|
|
} else {
|
2022-02-21 20:26:40 +13:00
|
|
|
if(confirm("Are you sure you want to cancel the upload?")) {
|
|
|
|
this.updateFile(id, {cancelled: true});
|
|
|
|
}
|
2022-02-21 01:21:53 +13:00
|
|
|
}
|
|
|
|
},
|
|
|
|
getFile(id) {
|
|
|
|
return this.files.find((file) => file.id === id);
|
2022-02-16 19:41:13 +13:00
|
|
|
},
|
|
|
|
async uploadFile(target) {
|
|
|
|
const formData = new FormData(target);
|
|
|
|
const sdk = window.ls.container.get('sdk');
|
2022-02-22 01:21:30 +13:00
|
|
|
const bucketId = formData.get('bucketId');
|
2022-02-16 19:41:13 +13:00
|
|
|
const file = formData.get('file');
|
|
|
|
const fileId = formData.get('fileId');
|
2022-02-21 01:21:53 +13:00
|
|
|
let id = fileId === 'unique()' ? performance.now() : fileId;
|
2022-02-16 19:41:13 +13:00
|
|
|
let read = formData.get('read');
|
2022-02-21 21:12:30 +13:00
|
|
|
if(!file || !fileId) {
|
2022-02-21 20:26:40 +13:00
|
|
|
return;
|
|
|
|
}
|
2022-02-16 19:41:13 +13:00
|
|
|
if(read) {
|
|
|
|
read = JSON.parse(read);
|
|
|
|
}
|
|
|
|
let write = formData.get('write');
|
|
|
|
if(write) {
|
|
|
|
write = JSON.parse(wirte);
|
|
|
|
}
|
2022-02-11 13:11:09 +13:00
|
|
|
|
2022-02-21 20:26:40 +13:00
|
|
|
if(this.getFile(id)) {
|
|
|
|
this.updateFile(id, {
|
|
|
|
name: file.name,
|
|
|
|
completed: false,
|
|
|
|
failed: false,
|
|
|
|
cancelled: false,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
this.addFile({
|
|
|
|
id: id,
|
|
|
|
name: file.name,
|
|
|
|
progress: 0,
|
|
|
|
completed: false,
|
|
|
|
failed: false,
|
|
|
|
cancelled: false,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-02-16 19:41:13 +13:00
|
|
|
target.reset();
|
|
|
|
try {
|
|
|
|
const response = await sdk.storage.createFile(
|
2022-02-22 01:21:30 +13:00
|
|
|
bucketId,
|
2022-02-16 19:41:13 +13:00
|
|
|
fileId,
|
|
|
|
file,
|
|
|
|
read,
|
|
|
|
write,
|
|
|
|
(progress) => {
|
|
|
|
this.updateFile(id, {
|
2022-02-20 02:01:52 +13:00
|
|
|
id: progress.$id,
|
|
|
|
progress: Math.round(progress.progress),
|
2022-02-16 19:41:13 +13:00
|
|
|
});
|
2022-02-21 01:21:53 +13:00
|
|
|
id = progress.$id;
|
|
|
|
|
|
|
|
const file = this.getFile(id) ?? {};
|
|
|
|
if(file.cancelled === true) {
|
2022-02-22 01:21:30 +13:00
|
|
|
throw 'USER_CANCELLED';
|
2022-02-21 01:21:53 +13:00
|
|
|
}
|
2022-02-16 19:41:13 +13:00
|
|
|
});
|
2022-02-22 01:21:30 +13:00
|
|
|
const existingFile = this.getFile(id) ?? {};
|
|
|
|
if(existingFile.cancelled) {
|
|
|
|
this.updateFile(id,{
|
|
|
|
id: response.$id,
|
|
|
|
name: response.name,
|
|
|
|
failed: false,
|
|
|
|
});
|
|
|
|
id = response.$id;
|
|
|
|
throw 'USER_CANCELLED'
|
|
|
|
} else {
|
|
|
|
this.updateFile(id,{
|
|
|
|
id: response.$id,
|
|
|
|
name: response.name,
|
|
|
|
progress: 100,
|
|
|
|
completed: true,
|
|
|
|
failed: false,
|
|
|
|
});
|
|
|
|
id = response.$id;
|
|
|
|
}
|
2022-02-16 19:41:13 +13:00
|
|
|
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
|
|
|
} catch(error) {
|
2022-02-22 01:21:30 +13:00
|
|
|
if(error === 'USER_CANCELLED') {
|
|
|
|
await sdk.storage.deleteFile(bucketId, id);
|
|
|
|
this.updateFile(id, {
|
|
|
|
cancelled: false,
|
|
|
|
failed: true,
|
|
|
|
});
|
|
|
|
this.removeFile(id);
|
|
|
|
} else {
|
|
|
|
this.updateFile(id, {
|
|
|
|
id: id,
|
|
|
|
failed: true,
|
|
|
|
});
|
|
|
|
}
|
2022-02-16 19:41:13 +13:00
|
|
|
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
|
|
|
}
|
|
|
|
}
|
2022-02-11 13:11:09 +13:00
|
|
|
|
2022-02-16 19:41:13 +13:00
|
|
|
});
|
|
|
|
});
|
|
|
|
})(window);
|