blob: 18cc51530dfb5814c4cfef2b4b23da7e02f16bce (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<script lang="ts">
import { FileDropzone, ProgressBar } from '@skeletonlabs/skeleton';
import { onMount } from 'svelte';
let disableInput = false;
let files: FileList;
let form: HTMLFormElement;
let worker: Worker;
function onUpload() {
disableInput = true;
worker.postMessage(files[0]);
form.reset();
}
onMount(async () => {
worker = new (await import('$lib/ts/crc32.worker?worker')).default();
worker.onmessage = (e: MessageEvent<Number>) => {
disableInput = false;
console.log(e.data);
};
});
</script>
<svelte:head>
<title>CRC32</title>
</svelte:head>
<div class="container h-full mx-auto flex justify-center items-center">
<div class="space-y-10 text-center flex flex-col items-center">
<form bind:this={form} on:submit|preventDefault={onUpload} method="POST" action="?/TODO">
<FileDropzone
name="checksumMe"
bind:files
on:change={() => form.requestSubmit()}
required
disabled={disableInput}
>
<svelte:fragment slot="lead">
<h2 class="h2">Drop a file here to get its CRC32 checksum.</h2>
</svelte:fragment>
</FileDropzone>
<br />
<noscript>
<button type="submit" class="btn variant-filled"
>After adding a file, click to submit! (Not yet implemented)</button
>
</noscript>
{#if disableInput}
<h3 class="h3">Calculating the checksum, this may take time!</h3> <br />
<ProgressBar />
{/if}
</form>
</div>
</div>
|
