aboutsummaryrefslogtreecommitdiffstats
path: root/app/src/routes/truncate/+page.svelte
blob: a0f14528fc35206905ddf9ebf29143e3a19e38b1 (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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<script lang="ts">
  import saveFile from '$lib/ts/download'
  import type { TruncateRequest, TruncateResponse } from '$lib/types/truncate-worker'
  import 'iconify-icon'
  import { FileDropzone, ProgressBar } from '@skeletonlabs/skeleton'
  import { onDestroy, onMount } from 'svelte'

  let disableInput = false
  let files: FileList
  let form: HTMLFormElement
  let worker: Worker
  $: truncateTo = 1
  let originalName: string

  function onUpload() {
    disableInput = true
    originalName = files[0].name
    worker.postMessage({
      file: files[0],
      size: truncateTo,
    } as TruncateRequest)
  }

  onMount(async () => {
    worker = new Worker(new URL('$lib/ts/truncate.worker.ts', import.meta.url), { type: 'module' })
    worker.onmessage = async (e: MessageEvent<TruncateResponse>) => {
      await saveFile(e.data.file, `trunc-${originalName}`).catch((e) => console.error(e))
      disableInput = false
      form.reset()
      truncateTo = 1
    }
  })

  onDestroy(() => {
    worker?.terminate()
  })
</script>

<svelte:head>
  <title>Truncate</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"
      enctype="multipart/form-data"
    >
      <noscript>
        <h3 class="h3">You need JavaScript to use this page, for now ;)</h3>
        <br />
      </noscript>
      <label class="label" for="truncateMe">
        <div class="space-y-4 w-full">
          <FileDropzone
            id="truncateMe"
            name="truncateMe"
            bind:files
            on:change={() => form.requestSubmit()}
            required
            disabled={disableInput}
          >
            <svelte:fragment slot="lead">
              <div class="flex justify-center items-center">
                <iconify-icon icon="carbon:file-storage" width="50" />
              </div>
            </svelte:fragment>
            <svelte:fragment slot="meta">Drop a file here to truncate it.</svelte:fragment>
          </FileDropzone>
        </div>
      </label>
      <br />
      <label class="label">
        <span>Truncate up to... (in bytes)</span>
        <input
          class="input"
          type="number"
          name="truncateTo"
          bind:value={truncateTo}
          min="1"
          required
        />
      </label>
      <br />
      <noscript>
        <br />
        <button type="submit" class="btn variant-filled" disabled>
          After adding a file, click to submit! (Not yet implemented)
        </button>
      </noscript>
      {#if disableInput}
        <h3 class="h3">Truncating the file, this may take time!</h3>
        <br />
        <ProgressBar />
      {/if}
    </form>
  </div>
</div>