ashpie/ily.li
ashpie/ily.li
1
0
Fork 0
Code Issues 3 Pull Requests 1 Releases 2 Wiki Activity

fix(front/file-uploader): properly disable forms when uploading files to avoid interrupting a file upload

Browse Source 
fixes #9
This commit is contained in:
Alice Gaudon 2022-03-07 17:24:15 +01:00
parent f54438e9dd
commit 3062960a4b
1 changed files with 41 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
src/assets/views/file-uploader.svelte
View File

@ -66,34 +66,27 @@
} }
} }
td, th { td, th {
padding: 4px; padding: 4px;
} }
} }
.new-files { .new-files {
h3 { h3 {
text-align: center; text-align: center;
:global(.icon) { :global(.icon) {
color: var(--success); color: var(--success);
} }
} }
hr { hr {
margin: 24px; margin: 24px;
border: 0; border: 0;
border-top: 1px solid var(--on-subsurface); border-top: 1px solid var(--on-subsurface);
opacity: 0.25; opacity: 0.25;
} }
} }
.upload-form-container.disabled {
:global(button) {
cursor: not-allowed;
opacity: 0.1;
}
}
</style> </style>
<BaseTemplate title="{$locals.app.name} - Upload file" description="File upload web interface." noH1> <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> <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
<Form action={route('post-file-frontend')} withFiles submitText="Upload" submitIcon="upload" submitDisabled={uploading}
submitText="Upload" submitIcon="upload" onSubmit={uploadFiles}>
onSubmit={uploadFiles}> <Field type="file" name="upload" placeholder="Choose wisely" icon="file"
<Field type="file" name="upload" placeholder="Choose wisely" icon="file" hint="The maximum upload size is {$locals.max_upload_size} MiB"
hint="The maximum upload size is {$locals.max_upload_size} MiB" multiple required
multiple required bind:fileList={selectedFiles}/>
bind:fileList={selectedFiles}/>
<Field type="checkbox" name="never_expire" placeholder="Never delete this file" <Field type="checkbox" name="never_expire" placeholder="Never delete this file"
icon="infinity" icon="infinity"
bind:value={neverExpire}/> bind:value={neverExpire}/>
{#if !neverExpire} {#if !neverExpire}
<Field type="number" name="expire_after_days" icon="clock" <Field type="number" name="expire_after_days" icon="clock"
placeholder="How many days to delete this file after" placeholder="How many days to delete this file after"
initialValue={30} max="1825"/> initialValue={30} max="1825"/>
{/if} {/if}
{#if !selectedFiles || selectedFiles.length <= 1} {#if !selectedFiles || selectedFiles.length <= 1}
<Field type="checkbox" name="autogen_url" placeholder="Generate url automatically" <Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
icon="zap" icon="zap"
bind:value={autogenUrl} initialValue={true}/> bind:value={autogenUrl} initialValue={true}/>
{#if !autogenUrl} {#if !autogenUrl}
<Field type="text" name="slug" placeholder="Custom url slug" icon="link" <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"/> 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} {/if}
</Form> {:else}
</div> <Message type="info" discreet sticky
content="When upload multiple files, URLs will be generated automatically."/>
{/if}
</Form>
{#if uploading} {#if uploading}
<FileUpload file={currentFile} form={uploadForm} fileFieldName="upload" <FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
@ -208,7 +199,7 @@
<CopyableText content="{file.url}" buttonMode/> <CopyableText content="{file.url}" buttonMode/>
<Form action={route('delete-file-frontend', file.slug)} button <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}?"/> confirm="Are you sure you want to delete file {file.real_name}?"/>
{/if} {/if}
</td> </td>