FilePreview
FilePreview is used to display upload progress for files.
Usage
import { FilePreview } from 'stwui';
import FilePreview from 'stwui/file-preview';
-
Screenshot 2023-02-24 at 3.19.17 PM.png
410.45 KB
-
Screenshot 2023-02-25 at 3.19.17 PM.png
410.45 KB
<script lang="ts">
import { FilePreview } from 'stwui';
import { slide } from 'svelte/transition';
import { UploadStatus } from 'stwui/enums';
import type { PickerPreviewFile } from 'stwui/types';
const files: PickerPreviewFile[] = [
{
file: {
lastModified: 1677269995370,
name: 'Screenshot 2023-02-24 at 3.19.17 PM.png',
size: 420305,
type: 'image/png'
},
src: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
progress: 25,
status: UploadStatus.UPLOADING
},
{
file: {
lastModified: 1677269995370,
name: 'Screenshot 2023-02-25 at 3.19.17 PM.png',
size: 420305,
type: 'image/png'
},
src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
progress: undefined,
status: UploadStatus.PENDING
}
];
</script>
<FilePreview>
{#each files as currentFile, index (currentFile.src)}
{@const { file, src, progress, status } = currentFile}
<div transition:slide|local>
<FilePreview.Item
class="flex flex-row cursor-pointer"
>
<FilePreview.Item.Leading slot="leading" class="h-8 w-8 min-w-[2rem] min-h-[2rem]">
{#if file.type.startsWith('image/')}
<FilePreview.Item.Leading.Avatar slot="avatar" size="sm" {src} alt={file.name} />
{:else}
<FilePreview.Item.Leading.Icon slot="icon" data={file_document} class="h-5 w-5" />
{/if}
</FilePreview.Item.Leading>
<FilePreview.Item.FileContent slot="file-content">
<FilePreview.Item.FileContent.Title slot="title">
{file.name}
</FilePreview.Item.FileContent.Title>
<FilePreview.Item.FileContent.Description slot="description">
{formatFileSize(file.size)}
</FilePreview.Item.FileContent.Description>
</FilePreview.Item.FileContent>
</FilePreview.Item>
</div>
{/each}
</FilePreview>
-
Screenshot 2023-02-24 at 3.19.17 PM.png
410.45 KB
Uploading 25%
-
Screenshot 2023-02-25 at 3.19.17 PM.png
410.45 KB
Pending Upload
<script lang="ts">
import { FilePreview } from 'stwui';
import { slide } from 'svelte/transition';
import { UploadStatus } from 'stwui/enums';
import type { PickerPreviewFile } from 'stwui/types';
const files: PickerPreviewFile[] = [
{
file: {
lastModified: 1677269995370,
name: 'Screenshot 2023-02-24 at 3.19.17 PM.png',
size: 420305,
type: 'image/png'
},
src: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
progress: 25,
status: UploadStatus.UPLOADING
},
{
file: {
lastModified: 1677269995370,
name: 'Screenshot 2023-02-25 at 3.19.17 PM.png',
size: 420305,
type: 'image/png'
},
src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
progress: undefined,
status: UploadStatus.PENDING
}
];
</script>
<FilePreview edgeToEdge>
{#each files as currentFile, index (currentFile.src)}
{@const { file, src, progress, status } = currentFile}
<div transition:slide|local>
<FilePreview.Item
class="flex flex-row cursor-pointer"
>
<FilePreview.Item.Leading slot="leading" class="h-8 w-8 min-w-[2rem] min-h-[2rem]">
{#if file.type.startsWith('image/')}
<FilePreview.Item.Leading.Avatar slot="avatar" size="sm" {src} alt={file.name} />
{:else}
<FilePreview.Item.Leading.Icon slot="icon" data={file_document} class="h-5 w-5" />
{/if}
</FilePreview.Item.Leading>
<FilePreview.Item.FileContent slot="file-content">
<FilePreview.Item.FileContent.Title slot="title">
{file.name}
</FilePreview.Item.FileContent.Title>
<FilePreview.Item.FileContent.Description slot="description">
{formatFileSize(file.size)}
</FilePreview.Item.FileContent.Description>
</FilePreview.Item.FileContent>
<FilePreview.Item.UploadContent slot="upload-content">
<FilePreview.Item.UploadContent.Status slot="status">
{#if status === UploadStatus.FAILED}
Upload Failed
{:else if status === UploadStatus.COMPLETE}
Upload Complete
{:else if status === UploadStatus.UPLOADING}
Uploading {#if progress}{progress.toFixed(0)}%{:else}0%{/if}
{:else if status === UploadStatus.REJECTED}
Upload Rejected
{:else if status === UploadStatus.PENDING}
Pending Upload
{/if}
</FilePreview.Item.UploadContent.Status>
</FilePreview.Item.UploadContent>
</FilePreview.Item>
</div>
{/each}
</FilePreview>
Kitchen Sink
-
Screenshot 2023-02-24 at 3.19.17 PM.png
410.45 KB
Uploading 25%
Tap to cancel
-
Screenshot 2023-02-25 at 3.19.17 PM.png
410.45 KB
Pending Upload
Tap to cancel
<script lang="ts">
import { FilePreview } from 'stwui';
import { slide } from 'svelte/transition';
import { UploadStatus } from 'stwui/enums';
import type { PickerPreviewFile } from 'stwui/types';
const files: PickerPreviewFile[] = [
{
file: {
lastModified: 1677269995370,
name: 'Screenshot 2023-02-24 at 3.19.17 PM.png',
size: 420305,
type: 'image/png'
},
src: 'https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
progress: 25,
status: UploadStatus.UPLOADING
},
{
file: {
lastModified: 1677269995370,
name: 'Screenshot 2023-02-25 at 3.19.17 PM.png',
size: 420305,
type: 'image/png'
},
src: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
progress: undefined,
status: UploadStatus.PENDING
}
];
async function handleFileClick(file: PickerPreviewFile) {
if (file.status === UploadStatus.PENDING || file.status === UploadStatus.Uploading) {
console.log('Cancel Upload');
} else if (file.status === UploadStatus.COMPLETE) {
console.log('Remove Uploaded File');
} else if (file.status === UploadStatus.FAILED) {
console.log('Retry Upload');
} else if (file.status == UploadStatus.REJECTED) {
console.log('Remove Rejected File');
}
}
</script>
<FilePreview bordered class="rounded-md">
{#each files as currentFile, index (currentFile.src)}
{@const { file, src, progress, status } = currentFile}
<div transition:slide|local>
<FilePreview.Item
class="flex flex-row cursor-pointer"
on:click={() => handleFileClick(currentFile)}
>
<FilePreview.Item.Leading slot="leading" class="h-8 w-8 min-w-[2rem] min-h-[2rem]">
{#if file.type.startsWith('image/')}
<FilePreview.Item.Leading.Avatar slot="avatar" size="sm" {src} alt={file.name} />
{:else}
<FilePreview.Item.Leading.Icon slot="icon" data={file_document} class="h-5 w-5" />
{/if}
</FilePreview.Item.Leading>
<FilePreview.Item.FileContent slot="file-content">
<FilePreview.Item.FileContent.Title slot="title">
{file.name}
</FilePreview.Item.FileContent.Title>
<FilePreview.Item.FileContent.Description slot="description">
{formatFileSize(file.size)}
</FilePreview.Item.FileContent.Description>
</FilePreview.Item.FileContent>
<FilePreview.Item.UploadContent slot="upload-content">
<FilePreview.Item.UploadContent.Status slot="status">
{#if status === UploadStatus.FAILED}
Upload Failed
{:else if status === UploadStatus.COMPLETE}
Upload Complete
{:else if status === UploadStatus.UPLOADING}
Uploading {#if progress}{progress.toFixed(0)}%{:else}0%{/if}
{:else if status === UploadStatus.REJECTED}
Upload Rejected
{:else if status === UploadStatus.PENDING}
Pending Upload
{/if}
</FilePreview.Item.UploadContent.Status>
<FilePreview.Item.UploadContent.Action slot="action">
{#if status === UploadStatus.FAILED}
Tap to retry
{:else if status === UploadStatus.COMPLETE}
Tap to undo
{:else if status === UploadStatus.UPLOADING}
Tap to cancel
{:else if status === UploadStatus.REJECTED}
Tap to remove
{:else if status === UploadStatus.PENDING}
Tap to cancel
{/if}
</FilePreview.Item.UploadContent.Action>
</FilePreview.Item.UploadContent>
<FilePreview.Item.Extra
slot="extra"
placement="center"
class="justify-center items-center flex"
>
{#if status === UploadStatus.FAILED}
<FilePreview.Item.Extra.Failed />
{:else if status === UploadStatus.COMPLETE}
<FilePreview.Item.Extra.Complete />
{:else if status === UploadStatus.UPLOADING && progress !== undefined}
<FilePreview.Item.Extra.Uploading {progress} />
{:else if status === UploadStatus.REJECTED}
<FilePreview.Item.Extra.Rejected />
{:else if status === UploadStatus.PENDING}
<FilePreview.Item.Extra.Pending />
{/if}
</FilePreview.Item.Extra>
</FilePreview.Item>
</div>
{/each}
</FilePreview>
FilePreview Props
| divided | boolean | true |
| bordered | boolean | false |
| edgeToEdge | boolean | false |
FilePreview Slots
| default | <FilePreview.Item /> |
FilePreview.Item Slots
| leading | <List.Item.Leading slot="leading" /> |
| file-content | <FilePreview.Item.FileContent slot="file-content" /> |
| upload-content | <FilePreview.Item.UploadContent slot="upload-content" /> |
| default | <FilePreview.Item.Extra slot="extra" /> |
FilePreview.Item.Leading Slots
| icon | <FilePreview.Item.Leading.Icon slot="icon" /> |
| avatar | <FilePreview.Item.Leading.Avatar slot="avatar" /> |
| default | |
FilePreview.Item.Leading.Icon Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
FilePreview.Item.Leading.Avatar Props
| src | string | |
| alt | user-avatar | |
| size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | md |
| placeholder | boolean | true |
FilePreview.Item.FileContent Slots
| title | <FilePreview.Item.FileContent.Title slot="title" /> |
| description | <FilePreview.Item.FileContent.Description slot="description" /> |
| default | |
FilePreview.Item.FileContent.Title Slots
FilePreview.Item.FileContent.Description Slots
FilePreview.Item.UploadContent Slots
| status | <FilePreview.Item.UploadContent.Status slot="status" /> |
| action | <FilePreview.Item.UploadContent.Action slot="action" /> |
FilePreview.Item.UploadContent.Status Slots
FilePreview.Item.UploadContent.Action Slots
FilePreview.Item.Extra Props
| placement | 'start' | 'center' | 'end' | start |
FilePreview.Item.Extra Slots
| pending | <FilePreview.Item.Extra.Pending slot="pending" /> |
| complete | <FilePreview.Item.Extra.Complete slot="complete" /> |
| uploading | <FilePreview.Item.Extra.Uploading slot="uploading" /> |
| failed | <FilePreview.Item.Extra.Failed slot="failed" /> |
| rejected | <FilePreview.Item.Extra.Rejected slot="rejected" /> |
| default | |
FilePreview Class Identifiers
| stwui-file-preview |
| stwui-file-preview-item |
| stwui-file-preview-item-leading |
| stwui-file-preview-item-upload-content |
| stwui-file-preview-item-file-content |
| stwui-file-preview-item-extra |
| stwui-file-preview-item-leading-avatar-wrapper |
| stwui-file-preview-item-leading-avatar |
| stwui-file-preview-item-leading-avatar-placeholder |
| stwui-file-preview-item-file-content-title |
| stwui-file-preview-item-file-content-description |
| stwui-file-preview-item-upload-content-status |
| stwui-file-preview-item-upload-content-action |
| stwui-file-preview-item-extra-uploading |
| stwui-file-preview-item-extra-rejected |
| stwui-file-preview-item-extra-pending |
| stwui-file-preview-item-extra-failed |
| stwui-file-preview-item-extra-complete |
