sanifae/src/lib/components/FileUpload.svelte
Xodrium 2b8158f666 Overhauled post creation
Made the menu significantly better and made it possible to upload files directly from the post page
2023-02-10 18:17:40 -05:00

55 lines
No EOL
1.3 KiB
Svelte

<script>
import Button from '$lib/components/Button.svelte';
export let form;
let fileInput;
let files;
let preview;
function getBase64(image) {
const reader = new FileReader();
reader.readAsDataURL(image);
reader.onload = e => {
preview = e.target.result;
uploadFunction(e.target.result);
};
};
async function uploadFunction(imgBase64) {
const imgData = imgBase64.split(',').pop();
var fData = (new FormData());
fData.append('img',imgData);
fData.append('extension',fileInput.value.split('.').pop());
form = await fetch(`/api/fileCreate`, {
method: 'POST',
body: fData
}).then(x => x.json());
};
</script>
<style>
.hidden {
display: none;
}
img {
max-width: 250px;
}
</style>
<form action='/api/postCreate' method='POST' >
{#if preview}
<img src={preview} alt="Image preview"/>
{:else}
<img src='/icon_sanifae.svg' alt="Image preview"/>
{/if}
<input class="hidden" id="file-to-upload" type="file" bind:files bind:this={fileInput} on:change={() => getBase64(files[0])}/>
<p>
<Button class="upload-btn" clickFunc={ () => fileInput.click() }>Upload</Button>
</p>
</form>