From 79fb4e28c894b3a528341f073aa59da96d896212 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Wed, 2 Mar 2022 10:26:48 +0100
Subject: [PATCH] chore(front/file-uploader): convert file-uploader view to
 svelte

---
 assets/sass/fm.scss                           |  11 -
 assets/ts/fm.ts                               | 193 ------------------
 src/assets/views/components/FileUpload.svelte | 192 +++++++++++++++++
 src/assets/views/file-uploader.njk            | 104 ----------
 src/assets/views/file-uploader.svelte         | 193 ++++++++++++++++++
 src/controllers/FileController.ts             |   9 +-
 src/models/FileModel.ts                       |   3 +-
 7 files changed, 395 insertions(+), 310 deletions(-)
 delete mode 100644 assets/sass/fm.scss
 delete mode 100644 assets/ts/fm.ts
 create mode 100644 src/assets/views/components/FileUpload.svelte
 delete mode 100644 src/assets/views/file-uploader.njk
 create mode 100644 src/assets/views/file-uploader.svelte

diff --git a/assets/sass/fm.scss b/assets/sass/fm.scss
deleted file mode 100644
index 6f5df35..0000000
--- a/assets/sass/fm.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import "vars";
-
-#file-upload {
-	padding: 8px;
-	background: $infoColor;
-	border-radius: 5px;
-
-	.name, .status {
-		text-align: center;
-	}
-}
\ No newline at end of file
diff --git a/assets/ts/fm.ts b/assets/ts/fm.ts
deleted file mode 100644
index 4884a1c..0000000
--- a/assets/ts/fm.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-import {applyFormMessages} from "./forms";
-
-document.addEventListener('DOMContentLoaded', () => {
-    const form = document.querySelector<HTMLFormElement>('#upload-form');
-    if (!form) return;
-    const upload = document.getElementById('file-upload');
-    const uploadLink = document.querySelector<HTMLLinkElement>('#file-upload-link');
-
-    const uploadField = document.querySelector<HTMLInputElement>('#field-upload');
-
-    const neverExpireCheckbox = document.querySelector<HTMLInputElement>('#field-never_expire');
-    const expireAfterDaysField = document.querySelector<HTMLInputElement>('#field-expire_after_days');
-
-    const autogenUrlCheckbox = document.querySelector<HTMLInputElement>('#field-autogen_url');
-    const slugField = document.querySelector<HTMLInputElement>('#field-slug');
-
-    if (expireAfterDaysField && neverExpireCheckbox) {
-        const updateExpireAfterDaysField = () => {
-            expireAfterDaysField.disabled = neverExpireCheckbox.checked;
-
-            const parent = expireAfterDaysField.parentElement?.parentElement;
-            if (parent) {
-                if (neverExpireCheckbox.checked) {
-                    parent.classList.add('hidden');
-                } else {
-                    parent.classList.remove('hidden');
-                }
-            }
-        };
-        neverExpireCheckbox.addEventListener('change', updateExpireAfterDaysField);
-        updateExpireAfterDaysField();
-    }
-
-    if (slugField && autogenUrlCheckbox) {
-        const updateSlugField = () => {
-            slugField.disabled = autogenUrlCheckbox.checked;
-
-            const parent = slugField.parentElement?.parentElement;
-            if (parent) {
-                if (autogenUrlCheckbox.checked) {
-                    parent.classList.add('hidden');
-                } else {
-                    parent.classList.remove('hidden');
-                }
-            }
-        };
-        autogenUrlCheckbox.addEventListener('change', updateSlugField);
-        updateSlugField();
-    }
-
-    let uploadForm: UploadForm | undefined;
-
-    form.addEventListener('submit', e => {
-        e.preventDefault();
-        if (upload && uploadLink && uploadField && uploadField.files && (!uploadForm || uploadForm.isFinished())) {
-            uploadForm = new UploadForm(form, upload, uploadLink, uploadField.files[0].name);
-            uploadForm.updateView();
-            uploadForm.start();
-        }
-    });
-});
-
-
-const units = ['K', 'M', 'G', 'T'];
-
-class UploadForm {
-    private finished: boolean = false;
-    private readonly progressBar: HTMLElement | null;
-    private readonly progressBarContent: HTMLElement | null;
-    private readonly status: HTMLElement | null;
-    private speed: HTMLElement | null;
-    private xferSpeed: number[] = [];
-    private lastTransferTime: number | null = null;
-    private lastLoaded: number = 0;
-
-    private xhr: XMLHttpRequest;
-
-    public constructor(
-        private form: HTMLFormElement,
-        private upload: HTMLElement,
-        private uploadLink: HTMLLinkElement,
-        private fileName: string,
-    ) {
-        this.progressBar = this.upload.querySelector('.progress-bar');
-        this.progressBarContent = this.progressBar?.querySelector('.content') || null;
-        this.status = this.upload.querySelector('.status');
-        this.speed = this.status?.querySelector('.speed') || null;
-
-        if (!this.progressBar)
-            throw new Error('Invalid html');
-
-        this.xhr = new XMLHttpRequest();
-        this.xhr.responseType = 'json';
-        this.xhr.upload.addEventListener('progress', e => {
-            if (this.progressBar && this.progressBarContent) {
-                if (e.lengthComputable) {
-                    this.progressBar.classList.remove('undefined');
-                    const percent = (e.loaded / e.total * 100).toFixed(2) + '%';
-                    this.progressBar.style.setProperty('--progress', `${percent}`);
-                    this.progressBarContent.innerText = percent;
-                    this.updateSpeed(e.loaded);
-                } else {
-                    this.progressBar.classList.add('undefined');
-                }
-            }
-        });
-        this.xhr.upload.addEventListener('loadstart', () => {
-            this.status?.classList.remove('hidden');
-        });
-        this.xhr.addEventListener('load', () => {
-            this.finished = true;
-            const response = this.xhr.response;
-            console.log('done', response);
-            if (response.status === 'error') {
-                if (response.messages) {
-                    this.restoreView();
-                    applyFormMessages(this.form, response.messages);
-                }
-            } else if (response.url) {
-                if (this.status) {
-                    this.status.innerHTML = 'Done!';
-                }
-                const uploadLinkContent = this.uploadLink.querySelector<HTMLElement>('.content');
-                if (uploadLinkContent) {
-                    uploadLinkContent.innerText = response.url;
-                }
-                this.uploadLink.classList.remove('hidden');
-            } else {
-                window.location.reload();
-            }
-        });
-        this.xhr.addEventListener('error', (e) => {
-            this.finished = true;
-            console.error('error', e);
-            if (this.status) {
-                this.status.innerHTML = 'Error; upload was interrupted.';
-            }
-        });
-    }
-
-    public isFinished(): boolean {
-        return this.finished;
-    }
-
-    public updateView(): void {
-        const uploadName = this.upload.querySelector<HTMLElement>('.name');
-        if (uploadName) {
-            uploadName.innerText = this.fileName;
-        }
-        this.form.classList.add('hidden');
-        this.upload.classList.remove('hidden');
-        if (this.status) {
-            this.status.innerHTML = `Uploading @ <span class="speed">--</span>`;
-            this.speed = this.status.querySelector('.speed');
-        }
-    }
-
-    public restoreView(): void {
-        if (this.status) {
-            this.status.classList.add('hidden');
-        }
-        this.upload.classList.add('hidden');
-        this.form.classList.remove('hidden');
-    }
-
-    public start(): void {
-        const formData = new FormData(this.form);
-        this.xhr.open('POST', this.form.action);
-        this.xhr.send(formData);
-    }
-
-    public updateSpeed(loaded: number): void {
-        const time = new Date().getTime();
-        if (this.lastTransferTime) {
-            this.xferSpeed.push((loaded - this.lastLoaded) / (time - this.lastTransferTime));
-
-            if (this.xferSpeed.length > 100) this.xferSpeed = this.xferSpeed.slice(1);
-
-            let speed = this.xferSpeed.reduce((v, c) => v + c) / this.xferSpeed.length;
-            let unit = 0;
-            while (speed >= 1000 && unit < units.length - 1) {
-                speed /= 1000;
-                unit++;
-            }
-
-            if (this.speed) {
-                this.speed.innerText = speed.toFixed(2) + units[unit] + 'Bps';
-            }
-        }
-        this.lastTransferTime = time;
-        this.lastLoaded = loaded;
-    }
-}
diff --git a/src/assets/views/components/FileUpload.svelte b/src/assets/views/components/FileUpload.svelte
new file mode 100644
index 0000000..499e3dc
--- /dev/null
+++ b/src/assets/views/components/FileUpload.svelte
@@ -0,0 +1,192 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+
+    export let file: File;
+    export let form: HTMLFormElement;
+    export let fileFieldName: string = 'file';
+    export let autostart: boolean = false;
+
+    export let inProgress: boolean = false;
+    let xhr: XMLHttpRequest | undefined;
+    let xferSpeed: number[] = [];
+    let lastTransferTime: number | null = null;
+    let lastLoaded: number = 0;
+    let speed: string | undefined;
+
+    export let progress: string = '';
+    export let error: string | undefined = undefined;
+    export let finalUrl: string | undefined = undefined;
+
+    $: file && autoStart();
+
+    const units = ['K', 'M', 'G', 'T'];
+
+    export async function run(): Promise<void> {
+        inProgress = true;
+        try {
+            await new Promise<void>((resolve, reject) => {
+                initTrackers();
+                prepareXhrRequest(resolve, reject);
+                if (!xhr) throw new Error('Failed to initialize xhr');
+                sendXhrRequest(xhr);
+            });
+        } catch (e) {
+            onError(e);
+        } finally {
+            inProgress = false;
+        }
+
+        onEnd(file.name, finalUrl);
+    }
+
+    function initTrackers() {
+        initSpeedTracker();
+        initProgressTracker();
+        initErrorTracker();
+    }
+
+    function initSpeedTracker() {
+        xferSpeed = [];
+        lastTransferTime = null;
+        lastLoaded = 0;
+        speed = '--';
+    }
+
+    function initProgressTracker() {
+        progress = '';
+    }
+
+    function initErrorTracker() {
+        error = undefined;
+    }
+
+    function prepareXhrRequest(
+        resolve: (value?: PromiseLike<void>) => void,
+        reject: (err: string | ProgressEvent<XMLHttpRequestEventTarget> | undefined) => void,
+    ) {
+        xhr = new XMLHttpRequest();
+
+        xhr.responseType = 'json';
+        xhr.upload.addEventListener('progress', e => {
+            if (e.lengthComputable) {
+                progress = (e.loaded / e.total * 100).toFixed(2) + '%';
+                updateSpeed(e.loaded);
+            } else {
+                progress = '';
+            }
+        });
+        xhr.addEventListener('load', () => {
+            const response = xhr.response;
+            if (response) {
+                console.log('done', response);
+
+                if (response.status === 'error') {
+                    if (response.messages) {
+                        // TODO: display errors // applyFormMessages(this.form, response.messages);
+                        return reject(response.messages);
+                    }
+                } else if (response.url) {
+                    finalUrl = response.url;
+                    return resolve();
+                }
+
+                reject('Malformed response from server.');
+            }
+        });
+        xhr.addEventListener('error', (e) => {
+            reject(e);
+        });
+    }
+
+    function sendXhrRequest(xhr: XMLHttpRequest) {
+        const formData = new FormData(form);
+        formData.set(fileFieldName, file);
+        xhr.open('POST', form.action);
+        xhr.send(formData);
+    }
+
+    function updateSpeed(loaded: number): void {
+        const time = new Date().getTime();
+        if (lastTransferTime) {
+            xferSpeed.push((loaded - lastLoaded) / (time - lastTransferTime));
+
+            if (xferSpeed.length > 100) xferSpeed = xferSpeed.slice(1);
+
+            let rawSpeed = xferSpeed.reduce((v, c) => v + c) / xferSpeed.length;
+            let unit = 0;
+            while (rawSpeed >= 1000 && unit < units.length - 1) {
+                rawSpeed /= 1000;
+                unit++;
+            }
+
+            speed = rawSpeed.toFixed(2) + units[unit] + 'Bps';
+        }
+        lastTransferTime = time;
+        lastLoaded = loaded;
+    }
+
+    onMount(() => {
+        autoStart();
+    });
+
+    function autoStart() {
+        if (autostart && !inProgress) {
+            run().catch(onError);
+        }
+    }
+
+    export let onEnd = function (name: string, finalUrl: string) {
+    }
+
+    export let onError = function (err) {
+    }
+</script>
+
+<style lang="scss">
+	@import "../../scss/vars";
+
+	.file-upload {
+		padding: 8px;
+        color: var(--on-subsurface);
+		background: var(--subsurface);
+		border-radius: 5px;
+
+		.name, .status {
+			text-align: center;
+		}
+	}
+
+	.progress-bar {
+		position: relative;
+		display: block;
+		margin: 8px;
+		padding: 4px;
+		background: #fff1;
+		border-radius: 5px;
+		overflow: hidden;
+		text-align: center;
+
+		.content {
+			position: relative;
+		}
+
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: var(--progress);
+			height: 100%;
+			transition: width ease-out 150ms;
+
+			background: var(--primary);
+		}
+	}
+</style>
+
+<div class="file-upload">
+    <div class="name">{file?.name}</div>
+    <div class="progress-bar" style="--progress: {progress};"><span class="content">{progress}</span></div>
+    <div class="status">Uploading @ {speed}</div>
+</div>
diff --git a/src/assets/views/file-uploader.njk b/src/assets/views/file-uploader.njk
deleted file mode 100644
index bac4753..0000000
--- a/src/assets/views/file-uploader.njk
+++ /dev/null
@@ -1,104 +0,0 @@
-{% extends 'layouts' %}
-
-{% set title = app.name + ' - Upload file' %}
-
-{% block scripts %}
-    <script src="/js/fm.js"></script>
-{% endblock %}
-
-{% block body %}
-    <h1>Upload files</h1>
-    <p>You are responsible for the files that you upload.</p>
-
-    <div class="container">
-        <section class="panel">
-            <h2><i data-feather="upload"></i> Upload a file</h2>
-
-            <form action="{{ route('post-file-frontend') }}" method="POST" enctype="multipart/form-data"
-                  id="upload-form">
-                {{ macros.field(_locals, 'file', 'upload', '', 'Choose wisely', 'The maximum upload size is ' + max_upload_size + 'MiB', validation_attributes='required') }}
-
-                {{ macros.field(_locals, 'checkbox', 'never_expire', '', 'Never delete this file') }}
-                {{ macros.field(_locals, 'number', 'expire_after_days', '30', 'How many days to delete this file after', null, validation_attributes='max="1825"') }}
-
-                {{ macros.field(_locals, 'checkbox', 'autogen_url', '', 'Generate url automatically', null, validation_attributes='checked') }}
-                {{ macros.field(_locals, 'text', 'slug', '', 'Custom url slug', 'Example: beautiful_image.jpg sets url to https://'+default_domain+'/beautiful_image.jpg', validation_attributes='disabled') }}
-
-                {{ macros.csrf(getCsrfToken) }}
-
-                <button type="submit"><i data-feather="upload"></i> Upload</button>
-            </form>
-
-            <div id="file-upload" class="hidden">
-                <div class="name">photo.jpg</div>
-                <div class="progress-bar" style="--progress: 50%;"><span class="content">50%</span></div>
-                <div class="status hidden"></div>
-            </div>
-
-            <div id="file-upload-link" class="hidden copyable-text">
-                <div class="title">URL</div>
-                <div class="content"></div>
-                <button class="copy-button"><i data-feather="copy"></i></button>
-            </div>
-
-            {% set url = flash('url') %}
-            {% if url | length %}
-                <div class="copyable-text">
-                    <div class="title">URL</div>
-                    <div class="content">{{ url }}</div>
-                    <button class="copy-button"><i data-feather="copy"></i></button>
-                </div>
-            {% endif %}
-        </section>
-
-
-        <section class="panel">
-            <h2><i data-feather="folder"></i> File list</h2>
-
-            {{ macros.paginate(files.pagination, 'file-uploader', 3) }}
-
-            <table class="data-table file-upload-table">
-                <thead>
-                <tr>
-                    <th>#</th>
-                    <th class="table-col-grow">Name</th>
-                    <th>Size</th>
-                    <th>Expires at</th>
-                    <th>Actions</th>
-                </tr>
-                </thead>
-
-                <tbody>
-                {% for file in files %}
-                    <tr>
-                        <td>{{ file.id }}</td>
-                        <td class="table-col-grow-cell"><a href="{{ file.getURL() }}"><pre>{{ file.real_name }}</pre></a></td>
-                        <td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
-                        <td>{% if file.expires_at %}{{ file.expires_at.toISOString() }}{% else %}Never{% endif %}</td>
-                        <td class="actions">
-                            <div>
-                                {% if file.shouldBeDeleted() %}
-                                    Pending deletion
-                                {% else %}
-                                    <button class="copy-button" data-content="{{ file.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>
-
-                                    <form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
-                                        {{ macros.csrf(getCsrfToken) }}
-                                        <button class="button danger" onclick="return confirm('Are you sure you want to delete file {{ file.real_name }}?');"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
-                                    </form>
-                                {% endif %}
-                            </div>
-                        </td>
-                    </tr>
-                {% else %}
-                    <tr>
-                        <td colspan="5" class="center">You haven't uploaded any file yet.</td>
-                    </tr>
-                {% endfor %}
-                </tbody>
-            </table>
-
-            {{ macros.paginate(files.pagination, 'file-uploader', 3) }}
-        </section>
-    </div>
-{% endblock %}
diff --git a/src/assets/views/file-uploader.svelte b/src/assets/views/file-uploader.svelte
new file mode 100644
index 0000000..5439f90
--- /dev/null
+++ b/src/assets/views/file-uploader.svelte
@@ -0,0 +1,193 @@
+<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";
+
+    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;
+
+        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) {
+        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;
+			}
+		}
+	}
+
+	.actions {
+		display: flex;
+		flex-direction: row;
+
+		:global(button .icon) {
+			margin: 0 !important;
+		}
+
+		:global(button .tip) {
+			display: none;
+		}
+	}
+</style>
+
+<BaseTemplate title="{$locals.app.name} - Upload file" description="File upload web interface." noH1>
+    <h1>Upload files</h1>
+
+    <div class="container">
+        <section class="panel">
+            <h2>
+                <Icon name="upload"/>
+                Upload files
+            </h2>
+            <p>You are responsible for the files that you upload.</p>
+
+            {#each finishedFileUploads as fileUpload}
+                <CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
+            {/each}
+
+            {#if uploading}
+                <FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
+                            onEnd={onUploadEnd} autostart/>
+            {:else}
+                <Form action={route('post-file-frontend')} withFiles
+                      submitText="Upload" submitIcon="upload"
+                      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}
+
+            {#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}/>
+
+            <div class="data-table-container">
+                <table class="data-table file-upload-table">
+                    <thead>
+                    <tr>
+                        <th>#</th>
+                        <th class="table-col-grow">Name</th>
+                        <th>Size</th>
+                        <th>Expires at</th>
+                        <th>Actions</th>
+                    </tr>
+                    </thead>
+
+                    <tbody>
+                    {#each $locals.files as file}
+                        <tr>
+                            <td>{file.id}</td>
+                            <td class="table-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}{file.expires_at}{:else}Never{/if}
+                            </td><!-- todo: convert that to relative, human readable time -->
+                            <td class="actions">
+                                {#if file.shouldBeDeleted}
+                                    Pending deletion
+                                {:else}
+                                    <button class="copy-button" data-content="{file.url}">
+                                        <Icon name="copy"/>
+                                        <span class="tip">Copy URL</span></button><!-- todo -->
+
+                                    <Form action={route('delete-file-frontend', file.slug)} button
+                                          submitIcon="trash" submitText="delete" submitClass="danger"
+                                          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>
+            </div>
+
+            <Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
+        </section>
+    </div>
+</BaseTemplate>
diff --git a/src/controllers/FileController.ts b/src/controllers/FileController.ts
index 2c4dd45..ce1cb77 100644
--- a/src/controllers/FileController.ts
+++ b/src/controllers/FileController.ts
@@ -27,11 +27,18 @@ export default class FileController extends Controller {
     protected async getFileUploader(req: Request, res: Response): Promise<void> {
         const allowedDomains = config.get<string[]>('allowed_url_domains');
         const user = req.as(RequireAuthMiddleware).getUser();
+        const files = await FileModel.paginateForUser(req, 25, user.getOrFail('id'));
         res.render('file-uploader', {
             max_upload_size: config.get<string>('max_upload_size'),
             allowed_domains: allowedDomains,
             default_domain: allowedDomains[config.get<number>('default_url_domain_for_files')],
-            files: await FileModel.paginateForUser(req, 25, user.getOrFail('id')),
+            files: files.map(file => ({
+                ...file,
+                shouldBeDeleted: file.shouldBeDeleted(),
+                url: file.getURL(),
+                expires_at: file.expires_at?.toISOString(),
+            })),
+            pagination: files.pagination?.serialize(),
         });
     }
 
diff --git a/src/models/FileModel.ts b/src/models/FileModel.ts
index db3c2e5..c283f78 100644
--- a/src/models/FileModel.ts
+++ b/src/models/FileModel.ts
@@ -3,6 +3,7 @@ import {Request} from "express";
 import User from "swaf/auth/models/User";
 import {route} from "swaf/common/Routing";
 import Model from "swaf/db/Model";
+import {ModelQueryResult} from "swaf/db/ModelQuery";
 
 import URLRedirect from "./URLRedirect.js";
 
@@ -15,7 +16,7 @@ export default class FileModel extends Model {
         return await this.select().where('slug', slug).first();
     }
 
-    public static async paginateForUser(req: Request, perPage: number, user_id: number): Promise<FileModel[]> {
+    public static async paginateForUser(req: Request, perPage: number, user_id: number): Promise<ModelQueryResult<FileModel>> {
         req.params.sortBy = 'created_at';
         req.params.sortDirection = 'DESC';
         return await this.paginate(req, perPage, this.select().where('user_id', user_id));