Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

Add filename display on file upload

Browse Source 
This update introduces a new feature to the DropFile component; now filenames are displayed when they are uploaded. This provides a user-friendly way to view the file being managed. Additionally, some styling adjustments were made to accommodate this new addition.
This commit is contained in:
Julien Fastré 2024-07-19 13:55:22 +02:00
parent ad5e780936
commit 84069e03dc
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
2 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changes/unreleased/Feature-20240719-135515.yaml Normal file
View File

@ -0,0 +1,5 @@
kind: Feature
body: Display filename on file upload within the UI interface
time: 2024-07-19T13:55:15.16139422+02:00
custom:
Issue: ""

20
src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DropFileWidget/DropFile.vue
View File

@ -16,6 +16,7 @@ const emit = defineEmits<{
const is_dragging: Ref<boolean> = ref(false); const is_dragging: Ref<boolean> = ref(false);
const uploading: Ref<boolean> = ref(false); const uploading: Ref<boolean> = ref(false);
const display_filename: Ref<string|null> = ref(null);
const has_existing_doc = computed<boolean>(() => { const has_existing_doc = computed<boolean>(() => {
return props.existingDoc !== undefined && props.existingDoc !== null; return props.existingDoc !== undefined && props.existingDoc !== null;
@ -79,6 +80,7 @@ const onFileChange = async (event: Event): Promise<void> => {
const handleFile = async (file: File): Promise<void> => { const handleFile = async (file: File): Promise<void> => {
uploading.value = true; uploading.value = true;
display_filename.value = file.name;
const type = file.type; const type = file.type;
const buffer = await file.arrayBuffer(); const buffer = await file.arrayBuffer();
const [encrypted, iv, jsonWebKey] = await encryptFile(buffer); const [encrypted, iv, jsonWebKey] = await encryptFile(buffer);
@ -103,7 +105,7 @@ const handleFile = async (file: File): Promise<void> => {
<template> <template>
<div class="drop-file"> <div class="drop-file">
<div v-if="!uploading" :class="{ area: true, dragging: is_dragging}" @click="onZoneClick" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop"> <div v-if="!uploading" :class="{ area: true, dragging: is_dragging}" @click="onZoneClick" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop">
<p v-if="has_existing_doc"> <p v-if="has_existing_doc" class="file-icon">
<i class="fa fa-file-pdf-o" v-if="props.existingDoc?.type === 'application/pdf'"></i> <i class="fa fa-file-pdf-o" v-if="props.existingDoc?.type === 'application/pdf'"></i>
<i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.oasis.opendocument.text'"></i> <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.oasis.opendocument.text'"></i>
<i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i> <i class="fa fa-file-word-o" v-else-if="props.existingDoc?.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'"></i>
@ -115,6 +117,8 @@ const handleFile = async (file: File): Promise<void> => {
<i class="fa fa-file-archive-o" v-else-if="props.existingDoc?.type === 'application/x-zip-compressed'"></i> <i class="fa fa-file-archive-o" v-else-if="props.existingDoc?.type === 'application/x-zip-compressed'"></i>
<i class="fa fa-file-code-o" v-else ></i> <i class="fa fa-file-code-o" v-else ></i>
</p> </p>
<p v-if="display_filename !== null" class="display-filename">{{ display_filename }}</p>
<!-- todo i18n --> <!-- todo i18n -->
<p v-if="has_existing_doc">Déposez un document ou cliquez ici pour remplacer le document existant</p> <p v-if="has_existing_doc">Déposez un document ou cliquez ici pour remplacer le document existant</p>
<p v-else>Déposez un document ou cliquez ici pour ouvrir le navigateur de fichier</p> <p v-else>Déposez un document ou cliquez ici pour ouvrir le navigateur de fichier</p>
@ -130,9 +134,18 @@ const handleFile = async (file: File): Promise<void> => {
.drop-file { .drop-file {
width: 100%; width: 100%;
.file-icon {
font-size: xx-large;
}
.display-filename {
font-variant: small-caps;
font-weight: 200;
}
& > .area, & > .waiting { & > .area, & > .waiting {
width: 100%; width: 100%;
height: 8rem; height: 10rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -149,7 +162,4 @@ const handleFile = async (file: File): Promise<void> => {
} }
} }
div.chill-collection ul.list-entry li.entry:nth-child(2n) {
}
</style> </style>