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

Reset ISAC icon uploads after additions

Browse Source
This commit is contained in:
JB
2026-07-25 16:29:49 -04:00
parent 0a547af9fe
commit 10ab65e0b5
9 changed files with 59 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/IconUploadField.svelte
+4 -3
View File
@@ -2,13 +2,14 @@
import ImageUploadInput from '$lib/components/ImageUploadInput.svelte';
let {
currentUrl = '',
label = 'ICON'
}: { currentUrl?: string | null; label?: string } = $props();
label = 'ICON',
resetToken = 0
}: { currentUrl?: string | null; label?: string; resetToken?: string | number } = $props();
</script>
<fieldset class="icon-upload-field">
<legend>{label}</legend>
<ImageUploadInput name="icon" accept="image/svg+xml,image/png,image/webp,image/avif" {currentUrl} emptyLabel="NO ICON" browseLabel={currentUrl ? 'REPLACE ICON' : 'CHOOSE ICON'}/>
<ImageUploadInput name="icon" accept="image/svg+xml,image/png,image/webp,image/avif" {currentUrl} {resetToken} 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>
src/lib/components/ImageUploadInput.svelte
+27 -4
View File
@@ -7,7 +7,8 @@
required = false,
currentUrl = '',
emptyLabel = 'NO IMAGE',
browseLabel = 'CHOOSE FILE'
browseLabel = 'CHOOSE FILE',
resetToken = 0
}: {
name: string;
accept: string;
@@ -15,16 +16,38 @@
currentUrl?: string | null;
emptyLabel?: string;
browseLabel?: string;
resetToken?: string | number;
} = $props();
let input: HTMLInputElement;
let input: HTMLInputElement | undefined;
let previewUrl = $state('');
let fileName = $state('');
let dragging = $state(false);
let error = $state('');
let handledResetToken: string | number | null = null;
function resetUpload() {
if (previewUrl) URL.revokeObjectURL(previewUrl);
previewUrl = '';
fileName = '';
dragging = false;
error = '';
if (input) input.value = '';
}
$effect(() => {
if (handledResetToken === null) {
handledResetToken = resetToken;
return;
}
if (resetToken !== handledResetToken) {
handledResetToken = resetToken;
resetUpload();
}
});
function setFile(file: File | undefined) {
if (!file) return;
if (!file || !input) return;
if (!file.type.startsWith('image/')) {
error = 'Clipboard or dropped content must be an image.';
return;
@@ -108,7 +131,7 @@
<span>{fileName || 'OR USE AN UPLOAD METHOD'}</span>
</div>
<div class="image-upload-actions">
<button type="button" class="secondary" onclick={(event) => { event.stopPropagation(); input.click(); }}>{browseLabel}</button>
<button type="button" class="secondary" onclick={(event) => { event.stopPropagation(); input?.click(); }}>{browseLabel}</button>
<button type="button" class="secondary" onclick={(event) => { event.stopPropagation(); pasteFromClipboard(); }}>PASTE IMAGE</button>
</div>
</div>