MERCI VUE

js/main.js

@@ -884,6 +884,16 @@ __webpack_require__.r(__webpack_exports__);
   components: {
     FileTable: _components_FileTable_vue__WEBPACK_IMPORTED_MODULE_0__["default"],
     WebContentViewer: _components_WebContentViewer_vue__WEBPACK_IMPORTED_MODULE_1__["default"]
+  },
+  data() {
+    return {
+      sharedFile: null
+    };
+  },
+  methods: {
+    handleFileUpload(file) {
+      this.sharedFile = file;
+    }
   }
 });
 
@@ -916,6 +926,12 @@ __webpack_require__.r(__webpack_exports__);
     NcBreadcrumb: _nextcloud_vue_dist_Components_NcBreadcrumb_js__WEBPACK_IMPORTED_MODULE_2__["default"],
     Plus: vue_material_design_icons_Plus_vue__WEBPACK_IMPORTED_MODULE_3__["default"]
   },
+  props: {
+    file: {
+      type: Object,
+      default: null
+    }
+  },
   data() {
     return {
       files: [],
@@ -1000,11 +1016,10 @@ __webpack_require__.r(__webpack_exports__);
     async onDrop(event) {
       event.preventDefault();
       try {
-        const fileData = JSON.parse(event.dataTransfer.getData('application/json'));
+        const file = this.file;
-        if (Array.isArray(fileData.content)) {
+        console.log('Fichier déposé :', file);
-          fileData.content = new Uint8Array(fileData.content);
+        file.content = await file.content.arrayBuffer();
-        }
+        await this.moveFileToTarget(file);
-        await this.moveFileToTarget(fileData);
       } catch (error) {
         console.error('Erreur lors du drag and drop :', error);
       }
@@ -1173,22 +1188,9 @@ __webpack_require__.r(__webpack_exports__);
       const currentState = this.folderMap[file.fullPath];
       this.$set(this.folderMap, file.fullPath, !currentState);
     },
-    async onDragStart(file, event) {
+    async onDragStart(file) {
-      if (!file || !file.content) {
+      console.log('Drag start', file);
-        event.preventDefault();
+      this.$emit('file-upload', file);
-        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));
     }
   }
 });
@@ -1222,10 +1224,17 @@ var render = function render() {
   }, [_c("WebContentViewer", {
     attrs: {
       zipUrl: "http://localhost:8000/dummyZip.zip"
+    },
+    on: {
+      "file-upload": _vm.handleFileUpload
     }
   })], 1), _vm._v(" "), _c("div", {
     staticClass: "w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 bg-NcBlack rounded-xl"
-  }, [_c("FileTable")], 1)])]);
+  }, [_c("FileTable", {
+    attrs: {
+      file: _vm.sharedFile
+    }
+  })], 1)])]);
 };
 var staticRenderFns = [];
 render._withStripped = true;
@@ -1339,7 +1348,16 @@ var render = function render() {
       dragover: function ($event) {
         $event.preventDefault();
       },
-      drop: _vm.onDrop
+      dragenter: function ($event) {
+        $event.preventDefault();
+      },
+      dragleave: function ($event) {
+        $event.preventDefault();
+      },
+      drop: function ($event) {
+        $event.preventDefault();
+        return _vm.onDrop.apply(null, arguments);
+      }
     }
   }, _vm._l(_vm.files, function (file) {
     return _c("div", {
@@ -1448,7 +1466,7 @@ var render = function render() {
           return _vm.toggleFolder(file);
         },
         dragstart: function ($event) {
-          return _vm.onDragStart(file, $event);
+          return _vm.onDragStart(file);
         }
       }
     }, [_c("div", {
@@ -5774,10 +5792,6 @@ video {
   }
 }
 
-.visible {
-  visibility: visible;
-}
-
 .fixed {
   position: fixed;
 }
@@ -5814,22 +5828,10 @@ video {
   margin-top: 1rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .flex {
   display: flex;
 }
 
-.contents {
-  display: contents;
-}
-
-.hidden {
-  display: none;
-}
-
 .h-10 {
   height: 2.5rem;
 }
@@ -5842,18 +5844,14 @@ video {
   height: 4rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-5 {
-  height: 1.25rem;
-}
-
 .h-6 {
   height: 1.5rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .max-h-8 {
   max-height: 2rem;
 }
@@ -5870,10 +5868,18 @@ video {
   width: 3rem;
 }
 
+.w-2\\/6 {
+  width: 33.333333%;
+}
+
 .w-4\\/6 {
   width: 66.666667%;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-96 {
   width: 24rem;
 }
@@ -5882,35 +5888,6 @@ video {
   width: 100%;
 }
 
-.w-5 {
-  width: 1.25rem;
-}
-
-.w-5\\/6 {
-  width: 83.333333%;
-}
-
-.w-2\\/6 {
-  width: 33.333333%;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
-.w-3 {
-  width: 0.75rem;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.rotate-90 {
-  --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -5983,10 +5960,6 @@ video {
   border-right-width: 1px;
 }
 
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@@ -6025,16 +5998,6 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-
-.bg-NcGray {
-  --tw-bg-opacity: 1;
-  background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
-}
-
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -6057,15 +6020,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.pl-8 {
-  padding-left: 2rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
@@ -6108,11 +6062,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -6131,12 +6080,6 @@ video {
   transition-duration: 150ms;
 }
 
-.transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .last\\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
@@ -6161,11 +6104,6 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
 
-.hover\\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
-
 .focus\\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;

src/App.vue

@@ -5,12 +5,12 @@
 			<!-- Première section -->
 			<div 
 				class="w-full sm:w-1/3 max-sm:h-2/5 p-4 sm:m-6 rounded-xl bg-NcBlack/40">
-				<WebContentViewer zipUrl="http://localhost:8000/dummyZip.zip"/>
+				<WebContentViewer @file-upload="handleFileUpload" zipUrl="http://localhost:8000/dummyZip.zip"/>
 			</div>
 			<!-- Deuxième section -->
 			<div 
 				class="w-full sm:w-2/3 max-sm:h-3/5 p-4 sm:m-6 bg-NcBlack rounded-xl">
-				<FileTable/>
+				<FileTable :file="sharedFile"/>
 			</div>
 		</div>
 	</div>
@@ -26,7 +26,17 @@ export default {
 	components: {
 		FileTable,
 		WebContentViewer  
-	}
+	},
+	data() {
+		return {
+		sharedFile: null,
+		};
+	},
+	methods: {
+		handleFileUpload(file) {
+		this.sharedFile = file;
+		},
+	},
 }
 </script>
 

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'));
+                const file = this.file;
-                
+                console.log('Fichier déposé :', file);
-                if (Array.isArray(fileData.content)) {
+                file.content = await file.content.arrayBuffer();
-                    fileData.content = new Uint8Array(fileData.content);
+                await this.moveFileToTarget(file);
-                }
-                
-                await this.moveFileToTarget(fileData);
             } 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) {
+        async onDragStart(file) {
-            if (!file || !file.content) {
+            console.log('Drag start', file);
-                event.preventDefault();
+            this.$emit('file-upload', file); 
-                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));
-        },
     },
 };
 </script>

src/output.css

@@ -579,10 +579,6 @@ video {
   }
 }
 
-.visible {
-  visibility: visible;
-}
-
 .fixed {
   position: fixed;
 }
@@ -619,22 +615,10 @@ video {
   margin-top: 1rem;
 }
 
-.mr-2 {
-  margin-right: 0.5rem;
-}
-
 .flex {
   display: flex;
 }
 
-.contents {
-  display: contents;
-}
-
-.hidden {
-  display: none;
-}
-
 .h-10 {
   height: 2.5rem;
 }
@@ -647,18 +631,14 @@ video {
   height: 4rem;
 }
 
-.h-full {
-  height: 100%;
-}
-
-.h-5 {
-  height: 1.25rem;
-}
-
 .h-6 {
   height: 1.5rem;
 }
 
+.h-full {
+  height: 100%;
+}
+
 .max-h-8 {
   max-height: 2rem;
 }
@@ -675,10 +655,18 @@ video {
   width: 3rem;
 }
 
+.w-2\/6 {
+  width: 33.333333%;
+}
+
 .w-4\/6 {
   width: 66.666667%;
 }
 
+.w-6 {
+  width: 1.5rem;
+}
+
 .w-96 {
   width: 24rem;
 }
@@ -687,35 +675,6 @@ video {
   width: 100%;
 }
 
-.w-5 {
-  width: 1.25rem;
-}
-
-.w-5\/6 {
-  width: 83.333333%;
-}
-
-.w-2\/6 {
-  width: 33.333333%;
-}
-
-.w-6 {
-  width: 1.5rem;
-}
-
-.w-3 {
-  width: 0.75rem;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.rotate-90 {
-  --tw-rotate: 90deg;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -788,10 +747,6 @@ video {
   border-right-width: 1px;
 }
 
-.border-t {
-  border-top-width: 1px;
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
@@ -830,16 +785,6 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
-.bg-gray-50 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
-}
-
-.bg-NcGray {
-  --tw-bg-opacity: 1;
-  background-color: rgb(33 33 33 / var(--tw-bg-opacity, 1));
-}
-
 .bg-opacity-50 {
   --tw-bg-opacity: 0.5;
 }
@@ -862,15 +807,6 @@ video {
   padding-bottom: 0.5rem;
 }
 
-.px-2 {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.pl-8 {
-  padding-left: 2rem;
-}
-
 .pl-4 {
   padding-left: 1rem;
 }
@@ -913,11 +849,6 @@ video {
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
 }
 
-.text-red-500 {
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
-}
-
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -936,12 +867,6 @@ video {
   transition-duration: 150ms;
 }
 
-.transition-transform {
-  transition-property: transform;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .last\:border-b-0:last-child {
   border-bottom-width: 0px;
 }
@@ -966,11 +891,6 @@ video {
   background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
 }
 
-.hover\:bg-gray-100:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
-}
-
 .focus\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;