Skip to content

Commit

Permalink
Merge pull request #197 from appwrite/fix-uploader
Browse files Browse the repository at this point in the history 
fix: file upload
  • Loading branch information
@TorstenDittmann
TorstenDittmann committed Nov 25, 2022
2 parents 29842fb + 9c5fea1 commit f29d619
Show file tree
Hide file tree
Showing 9 changed files with 91 additions and 68 deletions.
52 changes: 28 additions & 24 deletions src/lib/components/uploadBox.svelte
View file
Expand Up @@ -3,11 +3,10 @@
import { Pill } from '$lib/elements';
import { sdkForProject } from '$lib/stores/sdk';
import { Avatar } from '$lib/components';
import { base } from '$app/paths';
import { page } from '$app/stores';
async function removeFile($id: string, bucketId: string) {
const file = await sdkForProject.storage.getFile(bucketId, $id);
uploader.removeFile(file);
}
let hovering = false;
const getPreview = (fileId: string, bucketId: string) =>
sdkForProject.storage.getFilePreview(bucketId, fileId, 32, 32).toString() + '&mode=admin';
Expand All @@ -28,7 +27,7 @@
<span class="icon-cheveron-up" aria-hidden="true" />
</button>
<button
on:click={() => uploader.close()}
on:click={() => uploader.reset()}
class="icon-button"
aria-label="close upload box">
<span class="icon-x" aria-hidden="true" />
Expand All @@ -37,59 +36,64 @@
<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}
<li class="upload-box-item">
<a
class="upload-box-item"
href={`${base}/console/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.bucketId)}
name={file.name} />
</div>

<label for={file.name} class="file-name">{file.name}</label>
<span class="icon-check" />
</li>
<label for={file.name} class="file-name u-trim">{file.name}</label>

<button
class="icon-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={file.progress}
aria-valuenow={progress}
aria-valuemin={0}
aria-valuemax={100} />
<span class="icon">{file.progress}%</span>
<span class="icon">{progress}%</span>
</div>
<label for={file.name} class="file-name">{file.name}</label>
<label for={file.name} class="file-name u-trim">{file.name}</label>
<Pill danger>Failed</Pill>
<button
class="icon-button"
aria-label="Failed"
on:click={() => removeFile(file.$id, file.bucketId)}>
on:click|preventDefault={() => uploader.removeFromQueue(file.$id)}>
<span class="icon-x" />
</button>
</li>
{:else if file.cancelled}
cancelled?
{:else}
<li class="upload-box-item">
<div class="upload-image u-margin-inline-end-16">
<div
class="progress"
role="progressbar"
aria-valuenow={file.progress}
style={`--progress-value:${progress}`}
aria-valuenow={progress}
aria-valuemin={0}
aria-valuemax={100} />
<span class="icon">{file.progress}%</span>
<span class="icon">{progress}%</span>
</div>
<label for={file.name} class="file-name">{file.name}</label>
<label for={file.name} class="file-name u-trim">{file.name}</label>
<Pill warning>Pending</Pill>
<button
class="icon-button"
aria-label="Pending"
on:click={() => removeFile(file.$id, file.bucketId)}>
<span class="icon-x" />
</button>
</li>
{/if}
{/each}
Expand Down
14 changes: 9 additions & 5 deletions src/lib/elements/forms/inputFile.svelte
View file
@@ -1,4 +1,5 @@
<script lang="ts">
import { Trim } from '$lib/components';
import { Button } from '.';
export let label: string = null;
Expand Down Expand Up @@ -47,20 +48,23 @@
on:dragover|preventDefault={dragOverHandler}
on:dragleave|preventDefault={() => (hovering = false)}>
<div class="u-flex u-main-center u-cross-center u-gap-32">
<div class="avatar is-size-large">
<div class="avatar is-size-large u-min-width-0">
<span class="icon-folder" aria-hidden="true" />
</div>
<div class="u-grid u-gap-16">
<div class="u-grid u-gap-16 u-min-width-0">
<p>Drag and drop files here to upload</p>
<div class="u-flex u-gap-8 ">
<div class="u-flex u-gap-8 u-min-width-0">
<Button secondary on:click={() => input.click()}>
<span class="icon-upload" aria-hidden="true" />
<span class="text">Choose File</span>
</Button>

{#if files?.length}
<div class="u-flex ">
{files.item(0).name}
{@const fileName = files.item(0).name.split('.')}
<div class="u-flex u-cross-center u-min-width-0">
<Trim>{fileName[0]}</Trim>
<span class="u-min-width-0 u-flex-shrink-0 u-margin-inline-end-16"
>.{fileName[1]}</span>
<button
on:click={() => (files = null)}
type="button"
Expand Down
53 changes: 32 additions & 21 deletions src/lib/stores/uploader.ts
View file
@@ -1,5 +1,6 @@
import type { Models } from '@aw-labs/appwrite-console';
import { writable } from 'svelte/store';
import { sdkForProject } from './sdk';

type UploaderFile = {
$id: string;
Expand All @@ -8,7 +9,6 @@ type UploaderFile = {
progress: number;
completed: boolean;
failed: boolean;
cancelled: boolean;
error?: string;
};
export type Uploader = {
Expand Down Expand Up @@ -42,7 +42,6 @@ const createUploader = () => {
close: () =>
update((n) => {
n.isOpen = !n.isOpen;

return n;
}),
toggle: () =>
Expand All @@ -57,22 +56,43 @@ const createUploader = () => {
isCollapsed: false,
files: []
}),
addFile: async (file: Models.File, isOpen = true, isCollapsed = false) => {
uploadFile: async (bucketId: string, id: string, file: File, permissions: string[]) => {
const newFile: UploaderFile = {
$id: file.$id,
bucketId: file.bucketId,
$id: id,
bucketId: bucketId,
name: file.name,
progress: calculateProgress(file),
completed: calculateProgress(file) === 100 ? true : false,
failed: false,
cancelled: false
progress: 0,
completed: false,
failed: false
};
return update((n) => {
n.isOpen = isOpen;
n.isCollapsed = isCollapsed;
update((n) => {
n.isOpen = true;
n.isCollapsed = false;
n.files.unshift(newFile);
return n;
});
const uploadedFile = await sdkForProject.storage.createFile(
bucketId,
id ?? 'unique()',
file,
permissions,
(p) => {
newFile.$id = p.$id;
newFile.progress = p.progress;
newFile.completed = p.progress === 100 ? true : false;
updateFile(p.$id, newFile);
}
);
newFile.$id = uploadedFile.$id;
newFile.progress = 100;
newFile.completed = true;
updateFile(newFile.$id, newFile);
},
removeFromQueue: (id: string) => {
update((n) => {
n.files = n.files.filter((f) => f.$id !== id);
return n;
});
},
removeFile: async (file: Models.File) => {
if (file.chunksTotal === file.chunksUploaded) {
Expand All @@ -81,18 +101,9 @@ const createUploader = () => {

return n;
});
} else {
if (confirm('Are you sure you want to cancel the upload?')) {
updateFile(file.$id, { cancelled: true });
}
}
}
};
};

export const uploader = createUploader();

function calculateProgress(file: Models.File) {
const progress = file.chunksUploaded / file.chunksTotal;
return Math.round(progress * 100);
}
6 changes: 3 additions & 3 deletions src/routes/console/project-[project]/auth/user-[user]/updateStatus.svelte
View file
Expand Up @@ -19,7 +19,7 @@
invalidate(Dependencies.USER);
addNotification({
message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
$user.emailVerification ? 'verified' : 'unverified'
$user.emailVerification ? 'unverified' : 'verified'
}`,
type: 'success'
});
Expand All @@ -38,7 +38,7 @@
invalidate(Dependencies.USER);
addNotification({
message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
$user.phoneVerification ? 'verified' : 'unverified'
$user.phoneVerification ? 'unverified' : 'verified'
}`,
type: 'success'
});
Expand All @@ -56,7 +56,7 @@
invalidate(Dependencies.USER);
addNotification({
message: `${$user.name || $user.email || $user.phone || 'The account'} has been ${
$user.status ? 'unblocked' : 'blocked'
$user.status ? 'blocked' : 'unblocked'
}`,
type: 'success'
});
Expand Down
3 changes: 2 additions & 1 deletion ...ect-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
View file
Expand Up @@ -199,7 +199,8 @@
the <a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer">Permissions Guide</a> in our documentation.
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</p>
<svelte:fragment slot="aside">
{#if collectionPermissions}
Expand Down
3 changes: 2 additions & 1 deletion ...oject-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte
View file
Expand Up @@ -12,7 +12,8 @@
Choose who can access your collection and documents. For more information, check out the <a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer">Permissions Guide</a> in our documentation.
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</svelte:fragment>
{#if $collection.documentSecurity}
<div class="common-section">
Expand Down
4 changes: 4 additions & 0 deletions src/routes/console/project-[project]/storage/bucket-[bucket]/[[page]]/+page.svelte
View file
Expand Up @@ -162,11 +162,15 @@
</button>
<svelte:fragment slot="list">
<DropListLink
on:click={() => {
showDropdown[index] = false;
}}
href={`${base}/console/project-${projectId}/storage/bucket-${bucketId}/file-${file.$id}`}
icon="pencil">Update</DropListLink>
<DropListItem
icon="trash"
on:click={() => {
showDropdown[index] = false;
selectedFile = file;
showDelete = true;
}}>Delete</DropListItem>
Expand Down
21 changes: 9 additions & 12 deletions src/routes/console/project-[project]/storage/bucket-[bucket]/create.svelte
View file
Expand Up @@ -2,7 +2,6 @@
import { Button, FormList, InputFile } from '$lib/elements/forms';
import { Pill } from '$lib/elements';
import { Modal, CustomId, Heading, Alert } from '$lib/components';
import { sdkForProject } from '$lib/stores/sdk';
import { createEventDispatcher } from 'svelte';
import { page } from '$app/stores';
import { uploader } from '$lib/stores/uploader';
Expand All @@ -25,20 +24,15 @@
async function create() {
try {
const file = await sdkForProject.storage.createFile(
bucketId,
id ?? 'unique()',
files[0],
permissions
);
files = null;
showCreate = false;
await uploader.uploadFile(bucketId, id, files[0], permissions);
files = null;
showCustomId = false;
uploader.addFile(file);
// uploader.addFile(file);
dispatch('created');
addNotification({
type: 'success',
message: `${file.name} has been created`
message: `File has been uploaded`
});
trackEvent('submit_file_create');
} catch ({ message }) {
Expand Down Expand Up @@ -74,8 +68,11 @@
<Heading tag="h6" size="7">Update Permissions</Heading>
<p class="text">
Choose who can access your buckets and files. For more information, check out the
<a href="https://appwrite.io/docs/permissions" target="_blank" rel="noopener noreferrer"
>Permissions Guide</a> in our documentation.
<a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</p>
{#if $bucket.fileSecurity}
<div class="common-section">
Expand Down
3 changes: 2 additions & 1 deletion src/routes/console/project-[project]/storage/bucket-[bucket]/settings/+page.svelte
View file
Expand Up @@ -275,7 +275,8 @@
the <a
href="https://appwrite.io/docs/permissions"
target="_blank"
rel="noopener noreferrer">Permissions Guide</a> in our documentation.
rel="noopener noreferrer"
class="link">Permissions Guide</a> in our documentation.
</p>
<svelte:fragment slot="aside">
{#if bucketPermissions}
Expand Down

1 comment on commit f29d619

@vercel
Copy link

@vercel vercel bot commented on f29d619 Nov 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

console – ./

svelte-console.vercel.app
console-appwrite.vercel.app
console-git-main-appwrite.vercel.app
brand-new-console.torsten.appwrite.org

Please sign in to comment.