feat(isac): add game data icon management
This commit is contained in:
@@ -0,0 +1,26 @@
|
||||
<script lang="ts">
|
||||
import { onDestroy } from '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>
|
||||
{#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>
|
||||
Reference in New Issue
Block a user