geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

hotfix(dataset): enhance file upload and update functionality

Browse source 
- Added file upload functionality to the dataset update form.
- Implemented file size validation and aggregated upload limit.
- Added temporary file storage and cleanup to handle large file uploads.
- Added a clear button to the file upload component.
- Added the ability to sort files in the file upload component.
- Fixed an issue where the file upload component was not correctly updating the model value.
- Updated the dataset edit form to use the new file upload component.
- Added the ability to sort files in the file upload component.
- Added a global declaration for the `sort_order` property on the `File` interface.
- Added helper functions for byte size parsing, configuration retrieval, and temporary file path generation.
This commit is contained in:
Kaimbacher 2025-04-01 13:39:02 +02:00
parent 8fbda9fc64
commit 10d159a57a
5 changed files with 177 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

15
resources/js/Components/FileUpload.vue
View file

@ -42,7 +42,8 @@
<span class="font-semibold">Click to upload</span> or drag and drop
</p>
</div>
<input id="dropzone-file" type="file" class="hidden" @click="showSpinner" @change="onChangeFile" @cancel="cancelSpinner" multiple="true" />
<input id="dropzone-file" type="file" class="hidden" @click="showSpinner" @change="onChangeFile"
@cancel="cancelSpinner" multiple="true" />
</label>
</header>
@ -190,7 +191,7 @@
<!-- sticky footer -->
<footer class="flex justify-end px-8 pb-8 pt-4">
<button id="cancel"
<button v-if="showClearButton" id="cancel"
class="ml-3 rounded-sm px-3 py-1 hover:bg-gray-300 focus:shadow-outline focus:outline-none"
@click="clearAllFiles">
Clear
@ -267,6 +268,12 @@ class FileUploadComponent extends Vue {
})
filesToDelete: Array<TethysFile>;
@Prop({
type: Boolean,
default: true,
})
showClearButton: boolean;
// // deletetFiles: Array<TethysFile> = [];
get deletetFiles(): Array<TethysFile> {
return this.filesToDelete;
@ -451,7 +458,9 @@ class FileUploadComponent extends Vue {
public clearAllFiles(event: Event) {
event.preventDefault();
this.items.splice(0);
if (this.showClearButton == true) {
this.items.splice(0);
}
}
public removeFile(key: number) {

6
resources/js/Pages/Submitter/Dataset/Edit.vue
View file

@ -447,7 +447,7 @@
</select> -->
</div>
<FileUploadComponent v-model:files="form.files" v-model:filesToDelete="form.filesToDelete"></FileUploadComponent>
<FileUploadComponent v-model:files="form.files" v-model:filesToDelete="form.filesToDelete" :showClearButton="false"></FileUploadComponent>
<div class="text-red-400 text-sm" v-if="form.errors['file'] && Array.isArray(form.errors['files'])">
{{ form.errors['files'].join(', ') }}
@ -700,14 +700,14 @@ const submit = async (): Promise<void> => {
// const file = new File([obj.blob], `${obj.label}?sortOrder=${obj.sort_order}`, options);
// const metadata = JSON.stringify({ sort_order: obj.sort_order });
// const metadataBlob = new Blob([metadata + '\n'], { type: 'application/json' });
const file = new File([obj.blob], `${obj.label}`, options,);
const file = new File([obj.blob], `${obj.label}?sortorder=${obj.sort_order}`, options,);
// const file = new File([obj.blob], `${obj.label}`, options);
// fileUploads[obj.sort_order] = file;
fileUploads.push(file);
} else {
} else {
// return normal request input
fileInputs.push(obj);
}