MERCI VUE

src/components/FileTable.vue

@@ -59,7 +59,7 @@
         </div>
 
         <!-- Contenu -->
-        <div class="overflow-y-auto" @dragover.prevent @drop="onDrop">
+        <div class="overflow-y-auto" @dragover.prevent @dragenter.prevent @dragleave.prevent @drop.prevent="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)">
@@ -119,6 +119,12 @@ export default {
         NcBreadcrumb,
         Plus
     },
+    props: {
+        file: {
+        type: Object,
+        default: null,
+        },
+    },
     data() {
         return {
             files: [], // Liste des fichiers et dossiers récupérés
@@ -202,13 +208,10 @@ export default {
         async onDrop(event) {
             event.preventDefault();
             try {
-                const fileData = JSON.parse(event.dataTransfer.getData('application/json'));
-                
-                if (Array.isArray(fileData.content)) {
-                    fileData.content = new Uint8Array(fileData.content);
-                }
-                
-                await this.moveFileToTarget(fileData);
+                const file = this.file;
+                console.log('Fichier déposé :', file);
+                file.content = await file.content.arrayBuffer();
+                await this.moveFileToTarget(file);
             } catch (error) {
                 console.error('Erreur lors du drag and drop :', error);
             }

src/components/WebContentViewer.vue

@@ -12,7 +12,7 @@
                     @click="toggleFolder(file)"
                     v-if="file.isDirectory"
                     draggable="true" 
-                    @dragstart="onDragStart(file, $event)"
+                    @dragstart="onDragStart(file)"
                 >
                     <div class="w-4/6 flex items-center py-2 border-r border-gray-300 cursor-pointer">
                         <div class="w-12 h-12 flex items-center justify-center cursor-pointer">
@@ -211,23 +211,10 @@ export default {
             const currentState = this.folderMap[file.fullPath];
             this.$set(this.folderMap, file.fullPath, !currentState);
         },
-        async onDragStart(file, event) {
-            if (!file || !file.content) {
-                event.preventDefault();
-                return;
-            }
-            
-            let fileToTransfer = { ...file }; // Clone l'objet file
-            
-            if (file.content instanceof Blob) {
-                // Convertir le Blob en base64 string
-                const arrayBuffer = await file.content.arrayBuffer();
-                const uint8Array = new Uint8Array(arrayBuffer);
-                fileToTransfer.content = Array.from(uint8Array); // Convertir Uint8Array en array normal
-            }
-            
-            event.dataTransfer.setData('application/json', JSON.stringify(fileToTransfer));
-        },
+        async onDragStart(file) {
+            console.log('Drag start', file);
+            this.$emit('file-upload', file); 
+        }
     },
 };
 </script>