ily.li/src/assets/views/file-uploader.svelte

<script lang="ts">
    import {locals} from "../ts/stores.js";
    import {route} from "../../common/Routing";
    import BaseTemplate from "./templates/BaseTemplate.svelte";
    import Form from "./utils/Form.svelte";
    import Field from "./utils/Field.svelte";
    import CopyableText from "./components/CopyableText.svelte";
    import Pagination from "./components/Pagination.svelte";
    import Message from "./components/Message.svelte";
    import Icon from "./utils/Icon.svelte"
    import FileUpload from "./components/FileUpload.svelte";
    import {Time} from "../../common/Time.js";

    let neverExpire: string;
    let autogenUrl: string;

    let uploadForm: HTMLFormElement;
    let selectedFiles: FileList | undefined;
    let nextFileIndex = 0;
    let uploading: boolean = false;
    let currentFile: File | undefined;

    let finishedFileUploads: { name: string, finalUrl: string }[] = [];

    function uploadFiles(e) {
        e.preventDefault();
        uploadForm = this;

        if (selectedFiles && !uploading) {
            processNextUpload();
        }
    }

    async function processNextUpload() {
        if (nextFileIndex > selectedFiles.length - 1) {
            nextFileIndex = 0;
            selectedFiles = undefined;
            uploading = false;
            return;
        }
        uploading = true;
        currentFile = selectedFiles[nextFileIndex++];
    }

    function onUploadEnd(fileName, finalUrl) {
        if (finalUrl) {
            finishedFileUploads = [...finishedFileUploads, {name: fileName, finalUrl: finalUrl}];
        }
        processNextUpload();
    }
</script>

<style lang="scss">
	.file-upload-table {
		@media (max-width: 550px) {
			> thead > tr > th:nth-child(3),
			> tbody > tr > td:nth-child(3) {
				display: none;
			}
		}

		@media (max-width: 785px) {
			> thead > tr > th:nth-child(4),
			> tbody > tr > td:nth-child(4) {
				display: none;
			}
		}

		td, th {
			padding: 4px;
		}
	}

	.new-files {
		h3 {
			text-align: center;

			:global(.icon) {
				color: var(--success);
			}
		}

		hr {
			margin: 24px;
			border: 0;
			border-top: 1px solid var(--on-subsurface);
			opacity: 0.25;
		}
	}
</style>

<BaseTemplate title="{$locals.app.name} - Upload file" description="File upload web interface." noH1>
    <h1>Upload files</h1>

    <section class="panel">
        <h2>
            <Icon name="upload"/>
            Upload files
        </h2>
        <p>You are responsible for the files that you upload.</p>


        <Form action={route('post-file-frontend')} withFiles
              submitText="Upload" submitIcon="upload" submitDisabled={uploading}
              onSubmit={uploadFiles}>
            <Field type="file" name="upload" placeholder="Choose wisely" icon="file"
                   hint="The maximum upload size is {$locals.max_upload_size} MiB"
                   multiple required
                   bind:fileList={selectedFiles}/>

            <Field type="checkbox" name="never_expire" placeholder="Never delete this file"
                   icon="infinity"
                   bind:value={neverExpire}/>
            {#if !neverExpire}
                <Field type="number" name="expire_after_days" icon="clock"
                       placeholder="How many days to delete this file after"
                       initialValue={30} max="1825"/>
            {/if}

            {#if !selectedFiles || selectedFiles.length <= 1}
                <Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
                       icon="zap"
                       bind:value={autogenUrl} initialValue={true}/>
                {#if !autogenUrl}
                    <Field type="text" name="slug" placeholder="Custom url slug" icon="link"
                           hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
                {/if}
            {:else}
                <Message type="info" discreet sticky
                         content="When upload multiple files, URLs will be generated automatically."/>
            {/if}
        </Form>

        {#if uploading}
            <FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
                        onEnd={onUploadEnd} autostart/>
        {/if}

        {#if finishedFileUploads.length > 0}
            <section class="sub-panel new-files">
                <hr>
                <h3>
                    <Icon name="file-check"/>
                    Newly uploaded files
                </h3>

                {#each finishedFileUploads as fileUpload}
                    <CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
                {/each}
            </section>
        {/if}

        {#if $locals.flash.url}
            <CopyableText title="URL" content={$locals.flash.url}/>
        {/if}
    </section>


    <section class="panel">
        <h2>
            <Icon name="folder"/>
            File list
        </h2>

        <Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>

        <table class="data-table file-upload-table">
            <thead>
            <tr>
                <th>#</th>
                <th class="col-grow">Name</th>
                <th>Size</th>
                <th>Expires in</th>
                <th>Actions</th>
            </tr>
            </thead>

            <tbody>
            {#each $locals.files as file}
                <tr>
                    <td>{file.id}</td>
                    <td class="col-grow-cell"><a href="{file.url}">
                        <pre>{file.real_name}</pre>
                    </a></td>
                    <td>{(file.size / (1024 * 1024)).toFixed(2)}MB</td>
                    <td>
                        {#if file.expires_at}
                            <time datetime="{file.expires_at}" title="{file.expires_at}">
                                {Time.humanizeTimeTo(new Date(file.expires_at))}
                            </time>
                        {:else}
                            Never
                        {/if}
                    </td>
                    <td class="actions">
                        {#if file.shouldBeDeleted}
                            Pending deletion
                        {:else}
                            <CopyableText content="{file.url}" buttonMode/>

                            <Form action={route('delete-file-frontend', file.slug)} button
                                  submitIcon="trash" submitText="delete" submitClass="danger" submitDisabled={uploading}
                                  confirm="Are you sure you want to delete file {file.real_name}?"/>
                        {/if}
                    </td>
                </tr>
            {:else}
                <tr>
                    <td colspan="5" class="center">You haven't uploaded any file yet.</td>
                </tr>
            {/each}
            </tbody>
        </table>

        <Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
    </section>
</BaseTemplate>