prevent page refresh if incomplete upload
This commit is contained in:
parent
6e781b05b8
commit
c36734b90a
1 changed files with 19 additions and 8 deletions
|
@ -223,7 +223,7 @@
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section class="upload-box" x-data>
|
<section class="upload-box" x-data x-show="$store.uploader.files.length > 0">
|
||||||
<div class="upload-box-header">
|
<div class="upload-box-header">
|
||||||
<h4 class="upload-box-title">
|
<h4 class="upload-box-title">
|
||||||
<span class="text">Uploading files</span>
|
<span class="text">Uploading files</span>
|
||||||
|
@ -244,7 +244,7 @@
|
||||||
role="progressbar"
|
role="progressbar"
|
||||||
aria-valuemin="0"
|
aria-valuemin="0"
|
||||||
aria-valuemax="100"></div>
|
aria-valuemax="100"></div>
|
||||||
<span class="icon">%</span>
|
<span class="icon" x-text="file.progress"></span>
|
||||||
</div>
|
</div>
|
||||||
<label for="file1" class="file-name" x-text="file.name"></label>
|
<label for="file1" class="file-name" x-text="file.name"></label>
|
||||||
<button x-show="file.completed" class="icon-button is-success" aria-label="Uploading"><span class="icon-ok"></span></button>
|
<button x-show="file.completed" class="icon-button is-success" aria-label="Uploading"><span class="icon-ok"></span></button>
|
||||||
|
@ -260,6 +260,17 @@
|
||||||
Alpine.store('uploader', {
|
Alpine.store('uploader', {
|
||||||
files: [],
|
files: [],
|
||||||
isOpen: true,
|
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() {
|
toggle() {
|
||||||
this.isOpen = !this.isOpen;
|
this.isOpen = !this.isOpen;
|
||||||
},
|
},
|
||||||
|
@ -293,8 +304,9 @@
|
||||||
progress: 0,
|
progress: 0,
|
||||||
completed: false,
|
completed: false,
|
||||||
failed: false,
|
failed: false,
|
||||||
|
isCancelled: false,
|
||||||
});
|
});
|
||||||
|
target.reset();
|
||||||
try {
|
try {
|
||||||
const response = await sdk.storage.createFile(
|
const response = await sdk.storage.createFile(
|
||||||
formData.get('bucketId'),
|
formData.get('bucketId'),
|
||||||
|
@ -303,13 +315,11 @@
|
||||||
read,
|
read,
|
||||||
write,
|
write,
|
||||||
(progress) => {
|
(progress) => {
|
||||||
console.log("progress", progress);
|
/*if cancelled
|
||||||
|
throw something*/
|
||||||
this.updateFile(id, {
|
this.updateFile(id, {
|
||||||
id: id,
|
id: id,
|
||||||
name: file.name,
|
|
||||||
progress: Math.round(progress),
|
progress: Math.round(progress),
|
||||||
completed: false,
|
|
||||||
failed: false
|
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
this.updateFile(id,{
|
this.updateFile(id,{
|
||||||
|
@ -319,12 +329,13 @@
|
||||||
completed: true,
|
completed: true,
|
||||||
failed: false,
|
failed: false,
|
||||||
});
|
});
|
||||||
target.reset();
|
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
||||||
} catch(error) {
|
} catch(error) {
|
||||||
this.updateFile(id, {
|
this.updateFile(id, {
|
||||||
id: id,
|
id: id,
|
||||||
failed: true,
|
failed: true,
|
||||||
});
|
});
|
||||||
|
document.dispatchEvent(new CustomEvent('storage.createFile'));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue