jb/shd.build
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): add drop and paste image uploads

Browse Source
This commit is contained in:
JB
2026-07-25 12:51:13 -04:00
parent 7a12b1d740
commit 6c982f7ed5
5 changed files with 129 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/IconUploadField.svelte
+2 -14
View File
@@ -1,26 +1,14 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import ImageUploadInput from '$lib/components/ImageUploadInput.svelte';
let {
currentUrl = '',
label = 'ICON'
}: { currentUrl?: string | null; label?: string } = $props();
let previewUrl = $state('');
let fileName = $state('');
const choose = (event: Event) => {
const file = (event.currentTarget as HTMLInputElement).files?.[0];
if (previewUrl) URL.revokeObjectURL(previewUrl);
previewUrl = file && file.type !== 'image/svg+xml' ? URL.createObjectURL(file) : '';
fileName = file?.name ?? '';
};
onDestroy(() => { if (previewUrl) URL.revokeObjectURL(previewUrl); });
</script>
<fieldset class="icon-upload-field">
<legend>{label}</legend>
<div class="icon-upload-preview">
{#if previewUrl || currentUrl}<img src={previewUrl || currentUrl || ''} alt="Current icon preview"/>{:else}<span>NO ICON</span>{/if}
</div>
<label><input name="icon" type="file" accept="image/svg+xml,image/png,image/webp,image/avif" onchange={choose}/><span>{fileName || (currentUrl ? 'REPLACE ICON' : 'UPLOAD ICON')}</span></label>
<ImageUploadInput name="icon" accept="image/svg+xml,image/png,image/webp,image/avif" {currentUrl} emptyLabel="NO ICON" browseLabel={currentUrl ? 'REPLACE ICON' : 'CHOOSE ICON'}/>
{#if currentUrl}<label class="icon-remove"><input name="removeIcon" type="checkbox" value="1"/><span>REMOVE CURRENT ICON</span></label>{/if}
<small>TRANSPARENT SVG, PNG, WEBP, OR AVIF · 2 MiB MAX</small>
</fieldset>