zip transfer
This commit is contained in:
		| @@ -30,7 +30,7 @@ export default { | |||||||
| 	data() { | 	data() { | ||||||
| 		return { | 		return { | ||||||
| 		sharedFile: null, | 		sharedFile: null, | ||||||
| 		zipUrl: null, | 		zip: null, | ||||||
| 		}; | 		}; | ||||||
| 	}, | 	}, | ||||||
| 	methods: { | 	methods: { | ||||||
|   | |||||||
| @@ -1,4 +1,4 @@ | |||||||
| <template>  | <template> | ||||||
|     <div class="flex flex-col h-full w-full border"> |     <div class="flex flex-col h-full w-full border"> | ||||||
|         <!-- Breadcrumb --> |         <!-- Breadcrumb --> | ||||||
|         <div class="flex flex-row mt-1 ml-3 items-start container"> |         <div class="flex flex-row mt-1 ml-3 items-start container"> | ||||||
| @@ -56,7 +56,8 @@ | |||||||
|         <div :class="[ |         <div :class="[ | ||||||
|             'overflow-y-auto h-full rounded-xl', |             'overflow-y-auto h-full rounded-xl', | ||||||
|             isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : '' |             isDragging ? 'border-green-500 border-4 border-dashed transition-all ease-in-out' : '' | ||||||
|         ]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent @dragleave.prevent="onDragLeave($event)" > |         ]" @drop.prevent="onDrop" @dragover.prevent="onDragOver" @dragenter.prevent | ||||||
|  |             @dragleave.prevent="onDragLeave($event)"> | ||||||
|  |  | ||||||
|             <div v-for="file in files" :key="file.filename" |             <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" |                 class="flex h-16 items-center hover:bg-NcGray rounded-lg border-b last:border-b-0 border-gray-300" | ||||||
| @@ -118,9 +119,11 @@ | |||||||
|             </div> |             </div> | ||||||
|         </div> |         </div> | ||||||
|  |  | ||||||
|         <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory" @update="updateFileName" @close="closeEditDialog"> |         <EditFileName v-if="!editDialogDisabled" :initialFileName="initialFileName" :isDirectory="isDirectory" | ||||||
|  |             @update="updateFileName" @close="closeEditDialog"> | ||||||
|         </EditFileName> |         </EditFileName> | ||||||
|         <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="" @rename="" @cancel="closeFileExistsDialog"> |         <FileExistsDialog v-if="!fileExistDialogDisabled" :fileName="initialFileName" @overwrite="" @rename="" | ||||||
|  |             @cancel="closeFileExistsDialog"> | ||||||
|         </FileExistsDialog> |         </FileExistsDialog> | ||||||
|     </div> |     </div> | ||||||
| </template> | </template> | ||||||
| @@ -128,9 +131,11 @@ | |||||||
|  |  | ||||||
|  |  | ||||||
| <script> | <script> | ||||||
| import { getClient, getRootPath } from '@nextcloud/files/dav'; | // Other imports | ||||||
|  | import JSZip from 'jszip'; | ||||||
|  |  | ||||||
| // NextCloud Components | // NextCloud Components | ||||||
|  | import { getClient, getRootPath } from '@nextcloud/files/dav'; | ||||||
| import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'; | import NcBreadcrumbs from '@nextcloud/vue/dist/Components/NcBreadcrumbs.js'; | ||||||
| import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'; | import NcBreadcrumb from '@nextcloud/vue/dist/Components/NcBreadcrumb.js'; | ||||||
| import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'; | import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'; | ||||||
| @@ -165,6 +170,10 @@ export default { | |||||||
|             type: Object, |             type: Object, | ||||||
|             default: null, |             default: null, | ||||||
|         }, |         }, | ||||||
|  |         zip: { | ||||||
|  |             type: Object, | ||||||
|  |             default: null, | ||||||
|  |         }, | ||||||
|     }, |     }, | ||||||
|     data() { |     data() { | ||||||
|         return { |         return { | ||||||
| @@ -177,11 +186,11 @@ export default { | |||||||
|             isTransfering: false, |             isTransfering: false, | ||||||
|             isDragging: false, |             isDragging: false, | ||||||
|             editDialogDisabled: true, |             editDialogDisabled: true, | ||||||
|             fileExistDialogDisabled:true, |             fileExistDialogDisabled: true, | ||||||
|             initialFileName: '', // Nom originel du fichier/dossier a edite |             initialFileName: '', // Nom originel du fichier/dossier a edite | ||||||
|             isDirectory: false, // Si l'element a edite est un dossier ou non |             isDirectory: false, // Si l'element a edite est un dossier ou non | ||||||
|             transferProgress: 0, |             transferProgress: 0, | ||||||
|             transferStatus: 'bg-blue-500', |             transferStatus: 'bg-blue-500' | ||||||
|         }; |         }; | ||||||
|     }, |     }, | ||||||
|     async mounted() { |     async mounted() { | ||||||
| @@ -241,30 +250,30 @@ export default { | |||||||
|         }, |         }, | ||||||
|         async createNewFile() { |         async createNewFile() { | ||||||
|             if (!this.newFileName) return; |             if (!this.newFileName) return; | ||||||
|              |  | ||||||
|                 try { |             try { | ||||||
|                     const client = getClient(); |                 const client = getClient(); | ||||||
|                     let filePath = ''; |                 let filePath = ''; | ||||||
|                     console.log(this.newFileName) |                 console.log(this.newFileName) | ||||||
|                     if(this.current_dir[this.current_dir.length - 1] === '/') { |                 if (this.current_dir[this.current_dir.length - 1] === '/') { | ||||||
|                         filePath = `${this.root_path}${this.current_dir}${this.newFileName}`; |                     filePath = `${this.root_path}${this.current_dir}${this.newFileName}`; | ||||||
|                     } |  | ||||||
|                     else{ |  | ||||||
|                         filePath = `${this.root_path}${this.current_dir}/${this.newFileName}`; |  | ||||||
|                     } |  | ||||||
|                     const alreadyExists = await this.elemtAlreadyExists(filePath); |  | ||||||
|                     if (!alreadyExists) { |  | ||||||
|                         await client.createDirectory(filePath, ''); |  | ||||||
|                         this.newFileName = ''; |  | ||||||
|                         this.isAddFilePopupVisible = false; |  | ||||||
|                         await this.fetchFiles(); |  | ||||||
|                     } |  | ||||||
|                     else{ |  | ||||||
|                         alert(`Vous ne pouvez pas creer le dossier : ${this.newFileName} car un autre dossier porte deja le meme nom.`); |  | ||||||
|                     } |  | ||||||
|                 } catch (error) { |  | ||||||
|                     console.error('Erreur lors de la création du fichier :', error); |  | ||||||
|                 } |                 } | ||||||
|  |                 else { | ||||||
|  |                     filePath = `${this.root_path}${this.current_dir}/${this.newFileName}`; | ||||||
|  |                 } | ||||||
|  |                 const alreadyExists = await this.elemtAlreadyExists(filePath); | ||||||
|  |                 if (!alreadyExists) { | ||||||
|  |                     await client.createDirectory(filePath, ''); | ||||||
|  |                     this.newFileName = ''; | ||||||
|  |                     this.isAddFilePopupVisible = false; | ||||||
|  |                     await this.fetchFiles(); | ||||||
|  |                 } | ||||||
|  |                 else { | ||||||
|  |                     alert(`Vous ne pouvez pas creer le dossier : ${this.newFileName} car un autre dossier porte deja le meme nom.`); | ||||||
|  |                 } | ||||||
|  |             } catch (error) { | ||||||
|  |                 console.error('Erreur lors de la création du fichier :', error); | ||||||
|  |             } | ||||||
|         }, |         }, | ||||||
|         toggleAddFilePopup() { |         toggleAddFilePopup() { | ||||||
|             this.isAddFilePopupVisible = !this.isAddFilePopupVisible; |             this.isAddFilePopupVisible = !this.isAddFilePopupVisible; | ||||||
| @@ -282,7 +291,7 @@ export default { | |||||||
|             event.preventDefault(); |             event.preventDefault(); | ||||||
|             if (event.target === event.currentTarget) { |             if (event.target === event.currentTarget) { | ||||||
|                 this.isDragging = false; |                 this.isDragging = false; | ||||||
|             }  |             } | ||||||
|         }, |         }, | ||||||
|         async onDrop(event) { |         async onDrop(event) { | ||||||
|             event.preventDefault(); |             event.preventDefault(); | ||||||
| @@ -290,21 +299,38 @@ export default { | |||||||
|                 this.isDragging = false; |                 this.isDragging = false; | ||||||
|                 this.isTransfering = true; |                 this.isTransfering = true; | ||||||
|                 const file = this.file; |                 const file = this.file; | ||||||
|  |                 const zip = this.zip; | ||||||
|                 console.log(file); |                 console.log(file); | ||||||
|                 if (!file) return; |                 console.log(zip); | ||||||
|  |  | ||||||
|                 if (file.isDirectory) { |  | ||||||
|                     await this.moveFilesOfFolder(file,''); |                 if (!file && !zip) return; | ||||||
|                 } else { |  | ||||||
|                     this.transferProgress = 25; |                 if (zip) { | ||||||
|                     if (file.content && typeof file.content.arrayBuffer === 'function') { |                     const response = await fetch(zip.url); | ||||||
|                         file.content = await file.content.arrayBuffer(); |                     if (!response.ok) { | ||||||
|  |                         throw new Error(`Erreur lors du téléchargement : ${response.statusText}`); | ||||||
|                     } |                     } | ||||||
|                     this.transferProgress = 50; |                     const zipFile = await response.arrayBuffer(); | ||||||
|                     await this.moveFileToTarget(file, ''); |  | ||||||
|                     this.transferProgress = 100;       |  | ||||||
|                 } |  | ||||||
|  |  | ||||||
|  |                     await this.moveFileToTarget({ | ||||||
|  |                         name: zip.name, | ||||||
|  |                         content: zipFile | ||||||
|  |                     }, ''); | ||||||
|  |                     this.transferProgress = 100; | ||||||
|  |                 } else { | ||||||
|  |                     if (file.isDirectory) { | ||||||
|  |                         await this.moveFilesOfFolder(file, ''); | ||||||
|  |                     } else { | ||||||
|  |                         this.transferProgress = 25; | ||||||
|  |                         if (file.content && typeof file.content.arrayBuffer === 'function') { | ||||||
|  |                             file.content = await file.content.arrayBuffer(); | ||||||
|  |                         } | ||||||
|  |                         this.transferProgress = 50; | ||||||
|  |                         await this.moveFileToTarget(file, ''); | ||||||
|  |                         this.transferProgress = 100; | ||||||
|  |                     } | ||||||
|  |                 } | ||||||
|                 this.isTransfering = false; |                 this.isTransfering = false; | ||||||
|                 this.transferProgress = 0; |                 this.transferProgress = 0; | ||||||
|  |  | ||||||
| @@ -344,26 +370,26 @@ export default { | |||||||
|             try { |             try { | ||||||
|                 const client = getClient(); |                 const client = getClient(); | ||||||
|                 // Assurez-vous que le chemin parent est correctement formaté |                 // Assurez-vous que le chemin parent est correctement formaté | ||||||
|                  |  | ||||||
|                 let fullPath = ''; |                 let fullPath = ''; | ||||||
|                 fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`; |                 fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`; | ||||||
|  |  | ||||||
|                 if (ArrayBuffer.isView(file.content)) { |                 if (ArrayBuffer.isView(file.content)) { | ||||||
|                     file.content = Buffer.from(file.content); |                     file.content = Buffer.from(file.content); | ||||||
|                 } |                 } | ||||||
|                  |  | ||||||
|                 const alreadyExists = await this.elemtAlreadyExists(fullPath); |                 const alreadyExists = await this.elemtAlreadyExists(fullPath); | ||||||
|                 if(!alreadyExists) { |                 if (!alreadyExists) { | ||||||
|                     // Évitez les chemins incorrects en utilisant `path.normalize` si disponible |                     // Évitez les chemins incorrects en utilisant `path.normalize` si disponible | ||||||
|                     await client.putFileContents(fullPath, file.content); |                     await client.putFileContents(fullPath, file.content); | ||||||
|  |  | ||||||
|                     // Recharge les fichiers après l'opération |                     // Recharge les fichiers après l'opération | ||||||
|                     await this.fetchFiles(); |                     await this.fetchFiles(); | ||||||
|                 } |                 } | ||||||
|                 else{ |                 else { | ||||||
|                     this.initialFileName = file.name; |                     this.initialFileName = file.name; | ||||||
|                     this.fileExistDialogDisabled = false; |                     this.fileExistDialogDisabled = false; | ||||||
|                     while(!this.fileExistDialogDisabled) { |                     while (!this.fileExistDialogDisabled) { | ||||||
|                         await this.sleep(50); |                         await this.sleep(50); | ||||||
|                     } |                     } | ||||||
|                 } |                 } | ||||||
| @@ -378,14 +404,14 @@ export default { | |||||||
|                 fullPath = `${this.root_path}${this.current_dir}${parentPath}${folder.name}`; |                 fullPath = `${this.root_path}${this.current_dir}${parentPath}${folder.name}`; | ||||||
|  |  | ||||||
|                 const alreadyExists = await this.elemtAlreadyExists(fullPath); |                 const alreadyExists = await this.elemtAlreadyExists(fullPath); | ||||||
|                 if(!alreadyExists) { |                 if (!alreadyExists) { | ||||||
|                     await client.createDirectory(fullPath); |                     await client.createDirectory(fullPath); | ||||||
|                     await this.fetchFiles(); |                     await this.fetchFiles(); | ||||||
|                 } |                 } | ||||||
|                 else{ |                 else { | ||||||
|                     this.initialFileName = folder.name; |                     this.initialFileName = folder.name; | ||||||
|                     this.fileExistDialogDisabled = false; |                     this.fileExistDialogDisabled = false; | ||||||
|                     while(!this.fileExistDialogDisabled) { |                     while (!this.fileExistDialogDisabled) { | ||||||
|                         await this.sleep(); |                         await this.sleep(); | ||||||
|                     } |                     } | ||||||
|                 } |                 } | ||||||
| @@ -393,16 +419,16 @@ export default { | |||||||
|                 console.error('Erreur lors de la création du dossier :', error); |                 console.error('Erreur lors de la création du dossier :', error); | ||||||
|             } |             } | ||||||
|         }, |         }, | ||||||
|         async deleteElem(file){ |         async deleteElem(file) { | ||||||
|             const client = getClient() |             const client = getClient() | ||||||
|             try{ |             try { | ||||||
|                 let path = this.root_path + this.current_dir + "/" + file.basename; |                 let path = this.root_path + this.current_dir + "/" + file.basename; | ||||||
|                 await client.deleteFile(path); |                 await client.deleteFile(path); | ||||||
|             } |             } | ||||||
|             catch(error){ |             catch (error) { | ||||||
|                 console.error('Erreur lors de la suppression d\'un element : ', error); |                 console.error('Erreur lors de la suppression d\'un element : ', error); | ||||||
|             } |             } | ||||||
|              |  | ||||||
|             await this.fetchFiles(); |             await this.fetchFiles(); | ||||||
|         }, |         }, | ||||||
|         /** |         /** | ||||||
| @@ -410,10 +436,10 @@ export default { | |||||||
|          * @param file le ficher/dossier dont on veut editer le nom |          * @param file le ficher/dossier dont on veut editer le nom | ||||||
|          */ |          */ | ||||||
|         async editElem(file) { |         async editElem(file) { | ||||||
|             if(file.type === 'file'){ |             if (file.type === 'file') { | ||||||
|                 this.isDirectory = false; |                 this.isDirectory = false; | ||||||
|             } |             } | ||||||
|             else{ |             else { | ||||||
|                 this.isDirectory = true; |                 this.isDirectory = true; | ||||||
|             } |             } | ||||||
|             this.initialFileName = file.basename; |             this.initialFileName = file.basename; | ||||||
| @@ -432,21 +458,21 @@ export default { | |||||||
|          * Change le nom du fichier sur le serveur Cloud via un client WebDAV |          * Change le nom du fichier sur le serveur Cloud via un client WebDAV | ||||||
|          * @param names Contient un initialFileName et un newFileName |          * @param names Contient un initialFileName et un newFileName | ||||||
|          */ |          */ | ||||||
|         async updateFileName(names){ |         async updateFileName(names) { | ||||||
|             if(names.initialFileName !== names.newFileName){ |             if (names.initialFileName !== names.newFileName) { | ||||||
|                 const client = getClient() |                 const client = getClient() | ||||||
|                 try{ |                 try { | ||||||
|                     const oldName = this.root_path + this.current_dir + names.initialFileName; |                     const oldName = this.root_path + this.current_dir + names.initialFileName; | ||||||
|                     const newName = this.root_path + this.current_dir + names.newFileName; |                     const newName = this.root_path + this.current_dir + names.newFileName; | ||||||
|                     let alreadyExists = await this.elemtAlreadyExists(newName); |                     let alreadyExists = await this.elemtAlreadyExists(newName); | ||||||
|                     if(!alreadyExists) { |                     if (!alreadyExists) { | ||||||
|                         await client.moveFile(oldName,newName); |                         await client.moveFile(oldName, newName); | ||||||
|                     } |                     } | ||||||
|                     else{ |                     else { | ||||||
|                         alert(`Vous ne pouvez pas renommez le fichier/dossier : ${names.newFileName} car un autre fichier/dossier porte deja le meme nom.`); |                         alert(`Vous ne pouvez pas renommez le fichier/dossier : ${names.newFileName} car un autre fichier/dossier porte deja le meme nom.`); | ||||||
|                     } |                     } | ||||||
|                 } |                 } | ||||||
|                 catch(error){ |                 catch (error) { | ||||||
|                     console.error('Erreur lors du renommage d\'un element : ', error); |                     console.error('Erreur lors du renommage d\'un element : ', error); | ||||||
|                 } |                 } | ||||||
|                 await this.fetchFiles(); |                 await this.fetchFiles(); | ||||||
| @@ -456,7 +482,7 @@ export default { | |||||||
|          * Check si un fichier ou un dossier existe deja sur le serveur |          * Check si un fichier ou un dossier existe deja sur le serveur | ||||||
|          * @param path le chemin du fichier/dossier |          * @param path le chemin du fichier/dossier | ||||||
|          */ |          */ | ||||||
|         async elemtAlreadyExists(path){ |         async elemtAlreadyExists(path) { | ||||||
|             const client = getClient(); |             const client = getClient(); | ||||||
|             let exists = await client.exists(path); |             let exists = await client.exists(path); | ||||||
|  |  | ||||||
|   | |||||||
| @@ -579,10 +579,6 @@ video { | |||||||
|   } |   } | ||||||
| } | } | ||||||
|  |  | ||||||
| .visible { |  | ||||||
|   visibility: visible; |  | ||||||
| } |  | ||||||
|  |  | ||||||
| .fixed { | .fixed { | ||||||
|   position: fixed; |   position: fixed; | ||||||
| } | } | ||||||
| @@ -741,10 +737,6 @@ video { | |||||||
|   flex-direction: column; |   flex-direction: column; | ||||||
| } | } | ||||||
|  |  | ||||||
| .content-center { |  | ||||||
|   align-content: center; |  | ||||||
| } |  | ||||||
|  |  | ||||||
| .content-evenly { | .content-evenly { | ||||||
|   align-content: space-evenly; |   align-content: space-evenly; | ||||||
| } | } | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user