1
0
Fork 0
mirror of synced 2024-06-26 18:20:43 +12:00

progress and remove button

This commit is contained in:
Damodar Lohani 2022-02-11 05:17:57 +00:00
parent 7865644168
commit 9a7608c3a6

View file

@ -223,12 +223,13 @@
</form> </form>
</div> </div>
<div <div
id="upload-modal" style="position: absolute; right:0; bottom: 0; background: white;z-index: 9999;"> id="upload-modal" style="position: fixed; right:0; bottom: 0; background: white;z-index: 9999;">
<template x-data x-if="$store.uploader.files.length > 0"> <template x-data x-if="$store.uploader.files.length > 0">
<template x-data x-for="file in $store.uploader.files" :key="file.id"> <template x-data x-for="file in $store.uploader.files" :key="file.id">
<p> <p>
<span x-text="file.progress"></span> <span x-text="file.progress"></span>
<span x-text="file.name"></span> <span x-text="file.name"></span>
<button @click="$store.uploader.removeFile(file.id)">X</button>
</p> </p>
</template> </template>
</template> </template>
@ -241,10 +242,10 @@
this.files.push(file); this.files.push(file);
}, },
updateFile(id, file) { updateFile(id, file) {
const files = this.files.map((oldFile) => file.id == oldFile.id ? file : oldFile); this.files = this.files.map((oldFile) => id == oldFile.id ? {...oldFile, ...file} : oldFile);
this.files = [ },
...files removeFile(id) {
] this.files = this.files.filter((file) => file.id !== id);
}, },
async uploadFile(target) { async uploadFile(target) {
const formData = new FormData(target); const formData = new FormData(target);
@ -262,35 +263,44 @@
} }
this.addFile({ this.addFile({
id: id,
name: file.name, name: file.name,
progress: 0, progress: 0,
completed: false, completed: false,
failed: false, failed: false,
}); });
const response = await sdk.storage.createFile( try {
formData.get('bucketId'), const response = await sdk.storage.createFile(
fileId, formData.get('bucketId'),
file, fileId,
read, file,
write, read,
(progress) => { write,
console.log("progress", progress); (progress) => {
this.updateFile(id, { console.log("progress", progress);
id: id, this.updateFile(id, {
name: file.name, id: id,
progress: progress, name: file.name,
completed: false, progress: Math.round(progress),
failed: false completed: false,
failed: false
});
}); });
this.updateFile(id,{
id: response.$id,
name: response.name,
progress: 100,
completed: true,
failed: false,
}); });
this.updateFile(id,{ target.reset();
id: response.$id, } catch(error) {
name: response.name, this.updateFile(id, {
progress: 100, id: id,
completed: true, failed: true,
failed: false, });
}); }
} }
}); });