From 3062960a4b512435cbdd0a92a8e582de094289e7 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Mon, 7 Mar 2022 17:24:15 +0100
Subject: [PATCH] fix(front/file-uploader): properly disable forms when
 uploading files to avoid interrupting a file upload

fixes #9
---
 src/assets/views/file-uploader.svelte | 91 ++++++++++++---------------
 1 file changed, 41 insertions(+), 50 deletions(-)

diff --git a/src/assets/views/file-uploader.svelte b/src/assets/views/file-uploader.svelte
index ca1c34e..a112e81 100644
--- a/src/assets/views/file-uploader.svelte
+++ b/src/assets/views/file-uploader.svelte
@@ -66,34 +66,27 @@
 			}
 		}
 
-        td, th {
-            padding: 4px;
-        }
+		td, th {
+			padding: 4px;
+		}
 	}
 
-    .new-files {
-        h3 {
+	.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;
-        }
-    }
-
-    .upload-form-container.disabled {
-        :global(button) {
-            cursor: not-allowed;
-            opacity: 0.1;
-        }
-    }
+		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>
@@ -107,38 +100,36 @@
         <p>You are responsible for the files that you upload.</p>
 
 
-        <div class="upload-form-container" class:disabled={uploading}>
-            <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}/>
+        <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}
+            <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 !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}
-            </Form>
-        </div>
+            {: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"
@@ -208,7 +199,7 @@
                             <CopyableText content="{file.url}" buttonMode/>
 
                             <Form action={route('delete-file-frontend', file.slug)} button
-                                  submitIcon="trash" submitText="delete" submitClass="danger"
+                                  submitIcon="trash" submitText="delete" submitClass="danger" submitDisabled={uploading}
                                   confirm="Are you sure you want to delete file {file.real_name}?"/>
                         {/if}
                     </td>