tomasalias/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Add .file class + Generator user agent

Browse Source
This commit is contained in:
venashial
2022-07-02 22:14:20 -07:00
parent 64ed5fca3b
commit f62723c274
19 changed files with 198 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/FileUpload.svelte
View File

@@ -7,21 +7,35 @@
import Button from './Button.svelte'
import { classCombine } from '../utils/classCombine'
interface RemoteFile {
name: string
remote: true
}
export let multiple = false
export let accept: string
/** Prevents width from expanding due to large file names or images */
export let constrained = false
export let files: File[] = []
export let file: File | undefined
export let files: (File | RemoteFile)[] = []
export let file: File | RemoteFile | undefined
$: if (files) file = files[0] || undefined
let inputElement: HTMLInputElement
function addFiles(fileList: FileList) {
for (const file of Array.from(fileList)) {
// Check for duplicate files
if (!files.map((file) => file.name).includes(file.name)) {
// Check for duplicate files that aren't remote
if (
!files
.filter((it) => it instanceof File)
.map((file) => file.name)
.includes(file.name)
) {
if (files.map((file) => file.name).includes(file.name)) {
// Remove remote file with the same name
files = files.filter((it) => it.name !== file.name)
}
files = [...files, file]
}
}
@@ -53,7 +67,7 @@
{#each files as file (file.name)}
<div class="file">
<div class="file__tab">
{#if file.type.startsWith('image/')}
{#if file instanceof File && file.type.startsWith('image/')}
<IconPhotograph />
{:else}
<IconFile />
@@ -65,7 +79,7 @@
files = files.filter((it) => it.name !== file.name)
}}><IconTrash /> Remove</Button>
</div>
{#if file.type.startsWith('image/')}
{#if file instanceof File && file.type.startsWith('image/')}
<div class="file__preview">
<img
class="file__preview__image"
@@ -99,47 +113,5 @@
cursor: pointer;
color: var(--color-text-light);
}
.file {
border-radius: var(--rounded);
background-color: var(--color-button-bg);
box-shadow: var(--shadow-raised-sm), var(--shadow-inset);
&__tab {
display: flex;
align-items: center;
padding: 0.75rem 1rem;
gap: 1rem;
:global(.icon) {
/* Uses `px` to make icons slightly larger */
min-width: 18px;
height: 18px;
}
&__name {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
margin-right: auto;
}
}
&__preview {
width: 100%;
border-radius: var(--rounded-bottom);
overflow: hidden;
display: flex;
justify-content: center;
background-color: black;
&__image {
height: auto;
max-height: 22rem;
width: 100%;
object-fit: contain;
}
}
}
}
</style>