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

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

@ -87,13 +87,6 @@
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,9 +100,8 @@
<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" submitText="Upload" submitIcon="upload" submitDisabled={uploading}
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"
@ -138,7 +130,6 @@
content="When upload multiple files, URLs will be generated automatically."/> content="When upload multiple files, URLs will be generated automatically."/>
{/if} {/if}
</Form> </Form>
</div>
{#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>