45 lines
1.3 KiB
Svelte
45 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
let {
|
|
image = $bindable(''),
|
|
edit = $bindable(true)
|
|
} = $props()
|
|
|
|
let fileinput: HTMLInputElement
|
|
|
|
const onFileSelected =(e)=>{
|
|
let img = e.target.files[0];
|
|
let reader = new FileReader();
|
|
reader.readAsDataURL(img);
|
|
reader.onload = e => {
|
|
image = e.target.result as string
|
|
};
|
|
}
|
|
|
|
</script>
|
|
|
|
<div class="mb-4 w-full">
|
|
{#if edit && image}
|
|
<button id="img-upload-button" onclick={() => fileinput.click()}>
|
|
<img class="rounded-2xl hover:brightness-50 transition-opacity w-full h-full object-cover" src={image} alt="" />
|
|
</button>
|
|
{:else if edit}
|
|
<button id="img-upload-button" onclick={() => fileinput.click()}>
|
|
Select Image
|
|
</button>
|
|
{:else if image}
|
|
<img class="rounded-2xl w-full h-full object-cover" src={image} alt="" />
|
|
{:else}
|
|
<div class="rounded-2xl h-50 bg-white/10 text-center">No Image</div>
|
|
{/if}
|
|
|
|
<input style="display:none" type="file" accept=".jpg, .jpeg, .png" onchange={(e)=>onFileSelected(e)} bind:this={fileinput} >
|
|
|
|
</div>
|
|
|
|
<style>
|
|
@import 'tailwindcss';
|
|
|
|
#img-upload-button {
|
|
@apply text-center bg-white/30 h-60 w-full rounded-2xl block hover:text-white/30 transition-all;
|
|
}
|
|
</style> |