zip file (errors)

src/components/FileTable.vue

@@ -59,7 +59,7 @@
         </div>
 
         <!-- Contenu -->
-        <div class="overflow-y-auto">
+        <div class="overflow-y-auto" @dragover.prevent @drop="onDrop">
             <div v-for="file in files" :key="file.filename"
                 class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300"
                 @click="handleClickElem(file)">
@@ -198,6 +198,39 @@ export default {
         toggleAddFilePopup() {
             this.isAddFilePopupVisible = !this.isAddFilePopupVisible;
             if (!this.isAddFilePopupVisible) this.newFileName = '';
+        },
+        async onDrop(event) {
+            // Récupérer les données transférées (fichier JSON)
+            const file = JSON.parse(event.dataTransfer.getData('file'));
+            // Gérer le déplacement du fichier ici
+            await this.moveFileToTarget(file);
+        },
+        async moveFileToTarget(file) {
+            console.log(file);
+            const fileData = JSON.parse(event.dataTransfer.getData('file'));
+            console.log(fileData);
+            
+            const client = getClient();  // Votre client WebDAV (assurez-vous que c'est bien un client qui prend en charge les uploads)
+            // Exemple d'upload de fichier via un Blob
+            const path = this.current_dir + "/" + fileData.name;  // Chemin complet de destination sur le serveur WebDAV
+
+            // Créer un Blob à partir du fichier (si `file` est un objet `File` ou `Blob`)
+            // Exemple de conversion du fichier en Blob si nécessaire
+            const fileBlob = new Blob([fileData._data.compressedContent], { type: 'application/octet-stream' });
+            console.log(fileBlob)
+
+            try {
+                // Utilisation de PUT pour télécharger le fichier sur WebDAV
+                await client.putFileContents(path, fileBlob);
+
+                // Logique pour déplacer le fichier dans la liste, si nécessaire
+                await this.fetchFiles();  // Met à jour la liste des fichiers après l'upload
+                // Vous pouvez aussi retirer ce fichier du premier template, si nécessaire
+                // this.$emit('removeFile', file);
+
+            } catch (error) {
+                console.error('Erreur lors du déplacement du fichier:', error);
+            }
         }
     }
 };

src/components/WebContentViewer.vue

@@ -1,15 +1,14 @@
 <template>
     <div class="flex flex-col h-full w-full border">
-        <div class="flex h-12 items-center border-b border-gray-300">
-            <div class="w-5/6 px-4 py-2 text-gray-500 font-semibold border-r border-gray-300">Nom</div>
-            <div class="w-1/6 px-4 py-2 text-gray-500 font-semibold">Taille</div>
-        </div>
+        <!-- ... -->
         <div class="overflow-y-auto">
             <div v-for="(file, index) in sortedFiles" :key="file.fullPath" class="flex flex-col">
                 <div
                     class="flex items-center pl-4 cursor-pointer"
                     @click="toggleFolder(file)"
                     v-if="file.isDirectory"
+                    draggable="true" 
+                    @dragstart="onDragStart(file, $event)"
                 >
                     <div class="w-5/6 flex items-center px-4 py-2 truncate">
                         <span class="mr-2">{{ folderMap[file.fullPath] ? '-' : '+' }}</span>
@@ -20,6 +19,8 @@
                 <div
                     class="flex items-center pl-4"
                     v-else
+                    draggable="true"
+                    @dragstart="onDragStart(file, $event)"
                 >
                     <div class="w-5/6 flex items-center px-4 py-2 truncate">
                         {{ file.fullPath }}
@@ -41,6 +42,7 @@ export default {
     data() {
         return {
             zipContent: [],
+            pathTable: [],
             folderMap: {}, // Map to track folder open/close state
         };
     },
@@ -110,6 +112,7 @@ export default {
                                 isDirectory,
                                 size: isDirectory ? 0 : file._data.uncompressedSize,
                                 children: isDirectory ? [] : null,
+                                file: file,
                             };
                             currentLevel.push(existing);
                         }
@@ -149,6 +152,10 @@ export default {
             const currentState = this.folderMap[file.fullPath];
             this.$set(this.folderMap, file.fullPath, !currentState);
         },
+        onDragStart(file, event) {
+            // Sauvegarder l'objet du fichier dans l'événement
+            event.dataTransfer.setData('file', JSON.stringify(file.file));
+        },
     },
 };
 </script>