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 {
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>