Appwrite/console
1
0
Fork 0
mirror of https://github.com/appwrite/console.git synced 2026-06-06 19:27:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: replace upload box

Browse Source
This commit is contained in:
Arman
2024-12-19 17:37:59 +01:00
parent 0c82bd5de9
commit 74b7b86c81
2 changed files with 9 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/uploadBox.svelte
+2 -118
View File
@@ -1,124 +1,8 @@
<script lang="ts">
import { uploader } from '$lib/stores/uploader';
import { Pill } from '$lib/elements';
import { sdk } from '$lib/stores/sdk';
import { Avatar } from '$lib/components';
import { base } from '$app/paths';
import { page } from '$app/stores';
let hovering = false;
const getPreview = (fileId: string, bucketId: string) =>
sdk.forProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
import { Upload } from '@appwrite.io/pink-svelte';
</script>
{#if $uploader?.isOpen}
<section class="upload-box">
<header class="upload-box-header">
<h4 class="upload-box-title">
<span class="text">Uploading files</span>
<span class="amount">{$uploader.files.length}</span>
</h4>
<button
class="upload-box-button"
class:is-open={!$uploader.isCollapsed}
aria-label="toggle upload box"
on:click={() => uploader.toggle()}>
<span class="icon-cheveron-up" aria-hidden="true" />
</button>
<button
on:click={() => uploader.reset()}
class="upload-box-button"
aria-label="close upload box">
<span class="icon-x" aria-hidden="true" />
</button>
</header>
<div class="upload-box-content" class:is-open={!$uploader.isCollapsed}>
<ul class="upload-box-list">
{#each $uploader.files as file}
{@const progress = Math.round(file.progress)}
{#if file.completed || file.progress === 100}
<a
class="upload-box-item"
href={`${base}/project-${$page.params.project}/storage/bucket-${$page.params.bucket}/file-${file.$id}`}>
<div class="u-margin-inline-end-16">
<Avatar
size={32}
src={getPreview(file.$id, file.resourceId)}
name={file.name} />
</div>
<label for={file.name} class="file-name u-trim">{file.name}</label>
<button
class="upload-box-button"
aria-label="Failed"
on:mouseenter={() => (hovering = true)}
on:mouseleave={() => (hovering = false)}
on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
<span class:icon-check={!hovering} class:icon-x={hovering} />
</button>
</a>
{:else if file.failed}
<li class="upload-box-item">
<div class="upload-image u-margin-inline-end-16">
<div
class="progress"
role="progressbar"
aria-valuenow={progress}
aria-valuemin={0}
aria-valuemax={100} />
<span class="icon">{progress}%</span>
</div>
<label for={file.name} class="file-name u-trim">{file.name}</label>
<Pill danger>Failed</Pill>
<button
class="upload-box-button"
aria-label="Failed"
on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
<span class="icon-x" />
</button>
</li>
{:else}
<li class="upload-box-item">
<div class="upload-image u-margin-inline-end-16">
<div
class="progress"
role="progressbar"
style={`--progress-value:${progress}`}
aria-valuenow={progress}
aria-valuemin={0}
aria-valuemax={100} />
<span class="icon">{progress}%</span>
</div>
<label for={file.name} class="file-name u-trim">{file.name}</label>
<Pill warning>Pending</Pill>
</li>
{/if}
{/each}
</ul>
</div>
</section>
<Upload.Box bind:files={$uploader.files} on:close={() => uploader.close()}></Upload.Box>
{/if}
<style>
.upload-box-title {
font-size: 11px;
}
.upload-box-button {
display: flex;
align-items: center;
justify-content: center;
}
.upload-box-content {
min-width: 400px;
max-width: 100vw;
}
.file-name {
max-width: 24ch;
}
</style>
src/lib/stores/uploader.ts
+7 -10
View File
@@ -8,8 +8,7 @@ type UploaderFile = {
resourceId: string;
name: string;
progress: number;
completed: boolean;
failed: boolean;
status: 'failed' | 'pending' | 'success';
error?: string;
};
export type Uploader = {
@@ -75,8 +74,7 @@ const createUploader = () => {
resourceId: bucketId,
name: file.name,
progress: 0,
completed: false,
failed: false
status: 'pending'
};
update((n) => {
n.isOpen = true;
@@ -92,13 +90,13 @@ const createUploader = () => {
(p) => {
newFile.$id = p.$id;
newFile.progress = p.progress;
newFile.completed = p.progress === 100;
newFile.status = p.progress === 100 ? 'success' : 'pending';
updateFile(p.$id, newFile);
}
);
newFile.$id = uploadedFile.$id;
newFile.progress = 100;
newFile.completed = true;
newFile.status = 'success';
updateFile(newFile.$id, newFile);
},
uploadSiteDeployment: async (siteId: string, code: File) => {
@@ -107,8 +105,7 @@ const createUploader = () => {
resourceId: siteId,
name: code.name,
progress: 0,
completed: false,
failed: false
status: 'pending'
};
update((n) => {
n.isOpen = true;
@@ -126,13 +123,13 @@ const createUploader = () => {
(p) => {
newDeployment.$id = p.$id;
newDeployment.progress = p.progress;
newDeployment.completed = p.progress === 100;
newDeployment.status = p.progress === 100 ? 'success' : 'pending';
updateFile(p.$id, newDeployment);
}
);
newDeployment.$id = uploadedFile.$id;
newDeployment.progress = 100;
newDeployment.completed = true;
newDeployment.status = 'success';
updateFile(newDeployment.$id, newDeployment);
},
removeFromQueue: (id: string) => {