transfer folder content
This commit is contained in:
		@@ -133,6 +133,7 @@ export default {
 | 
			
		||||
            breadcrumbParts: [],
 | 
			
		||||
            isAddFilePopupVisible: false,
 | 
			
		||||
            newFileName: '',
 | 
			
		||||
            isTransfering: false,
 | 
			
		||||
        };
 | 
			
		||||
    },
 | 
			
		||||
    async mounted() {
 | 
			
		||||
@@ -171,6 +172,7 @@ export default {
 | 
			
		||||
            return this.current_dir.split('/').filter(part => part);
 | 
			
		||||
        },
 | 
			
		||||
        async handleClickElem(file) {
 | 
			
		||||
            if (this.isTransfering) return;
 | 
			
		||||
            if (file.type === 'directory') {
 | 
			
		||||
                this.current_dir = this.current_dir === '/' ? '/' + file.basename : this.current_dir + '/' + file.basename;
 | 
			
		||||
                this.breadcrumbParts = this.getBreadcrumbParts()
 | 
			
		||||
@@ -180,6 +182,7 @@ export default {
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        async handleClickBreadcrumb(index) {
 | 
			
		||||
            if (this.isTransfering) return;
 | 
			
		||||
            let dir = '/';
 | 
			
		||||
            if (index >= -1) {
 | 
			
		||||
                dir = this.generateCrumbHref(index);
 | 
			
		||||
@@ -207,31 +210,78 @@ export default {
 | 
			
		||||
        },
 | 
			
		||||
        async onDrop(event) {
 | 
			
		||||
            event.preventDefault();
 | 
			
		||||
            
 | 
			
		||||
            try {
 | 
			
		||||
                const moveFilesOfFolder = async (folder) => {
 | 
			
		||||
 | 
			
		||||
                    await this.createFolder(folder);
 | 
			
		||||
 | 
			
		||||
                    for (const child of folder.children) {
 | 
			
		||||
                        if (child.isDirectory) {
 | 
			
		||||
                            await moveFilesOfFolder(child);
 | 
			
		||||
                        } else {
 | 
			
		||||
                            if (child.content && typeof child.content.arrayBuffer === 'function') {
 | 
			
		||||
                                child.content = await child.content.arrayBuffer();
 | 
			
		||||
                            }
 | 
			
		||||
                            await this.moveFileToTarget(child);
 | 
			
		||||
                        }
 | 
			
		||||
                    }
 | 
			
		||||
                };
 | 
			
		||||
 | 
			
		||||
                this.isTransfering = true;
 | 
			
		||||
                const file = this.file;
 | 
			
		||||
                if (!file) return;
 | 
			
		||||
                console.log('Fichier déposé :', file);
 | 
			
		||||
                file.content = await file.content.arrayBuffer();
 | 
			
		||||
                await this.moveFileToTarget(file);
 | 
			
		||||
 | 
			
		||||
                if (file.isDirectory) {
 | 
			
		||||
                    await moveFilesOfFolder(file);
 | 
			
		||||
                } else {
 | 
			
		||||
                    if (file.content && typeof file.content.arrayBuffer === 'function') {
 | 
			
		||||
                        file.content = await file.content.arrayBuffer();
 | 
			
		||||
                    }
 | 
			
		||||
                    await this.moveFileToTarget(file);
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                this.isTransfering = false;
 | 
			
		||||
 | 
			
		||||
            } catch (error) {
 | 
			
		||||
                console.error('Erreur lors du drag and drop :', error);
 | 
			
		||||
                console.error('Erreur lors du drop :', error);
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        async moveFileToTarget(file) {
 | 
			
		||||
            try {
 | 
			
		||||
                const client = getClient();
 | 
			
		||||
                const path = this.root_path + this.current_dir + file.name;
 | 
			
		||||
                
 | 
			
		||||
 | 
			
		||||
                // Assurez-vous que le chemin parent est correctement formaté
 | 
			
		||||
                const parentPath = file.parentPath ? `${file.parentPath}/` : '';
 | 
			
		||||
                const fullPath = `${this.root_path}${this.current_dir}${parentPath}${file.name}`;
 | 
			
		||||
 | 
			
		||||
                if (ArrayBuffer.isView(file.content)) {
 | 
			
		||||
                    file.content = Buffer.from(file.content);
 | 
			
		||||
                }
 | 
			
		||||
 | 
			
		||||
                await client.putFileContents(path, file.content);
 | 
			
		||||
                // Évitez les chemins incorrects en utilisant `path.normalize` si disponible
 | 
			
		||||
                await client.putFileContents(fullPath, file.content);
 | 
			
		||||
 | 
			
		||||
                // Recharge les fichiers après l'opération
 | 
			
		||||
                await this.fetchFiles();
 | 
			
		||||
            } catch (error) {
 | 
			
		||||
                console.error('Erreur lors du déplacement du fichier:', error);
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
        async createFolder(folder) {
 | 
			
		||||
            try {
 | 
			
		||||
                const client = getClient();
 | 
			
		||||
 | 
			
		||||
                // Assurez-vous que le chemin parent est correctement formaté
 | 
			
		||||
                const parentPath = folder.parentPath ? `${folder.parentPath}/` : '';
 | 
			
		||||
                const fullPath = `${this.root_path}${this.current_dir}${parentPath}${folder.name}/`;
 | 
			
		||||
 | 
			
		||||
                await client.createDirectory(fullPath);
 | 
			
		||||
                await this.fetchFiles();
 | 
			
		||||
            } catch (error) {
 | 
			
		||||
                console.error('Erreur lors de la création du dossier :', error);
 | 
			
		||||
            }
 | 
			
		||||
        }
 | 
			
		||||
    }
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
@@ -32,7 +32,7 @@
 | 
			
		||||
                                    class="text-NcBlue w-6 h-6"
 | 
			
		||||
                                />
 | 
			
		||||
                            </div>
 | 
			
		||||
                            <span class="ml-2 truncate cursor-pointer">{{ file.fullPath }}</span>
 | 
			
		||||
                            <span class="ml-2 truncate cursor-pointer">{{ file.name }}</span>
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="w-1/6 px-4 py-2 cursor-pointer">-</div>
 | 
			
		||||
@@ -56,7 +56,7 @@
 | 
			
		||||
                        </div>
 | 
			
		||||
                    </template>
 | 
			
		||||
                    <div class="w-4/6 flex items-center px-4 py-2 truncate cursor-pointer">
 | 
			
		||||
                        {{ file.fullPath }}
 | 
			
		||||
                        {{ file.name }}
 | 
			
		||||
                    </div>
 | 
			
		||||
                    <div class="w-2/6 py-2 cursor-pointer">
 | 
			
		||||
                        {{ formatFileSize(file.size) }}
 | 
			
		||||
@@ -69,9 +69,10 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
import JSZip from 'jszip';
 | 
			
		||||
import JSZip, { files } from 'jszip';
 | 
			
		||||
import ChevronRightIcon from 'vue-material-design-icons/ChevronRight.vue';
 | 
			
		||||
import ChevronDownIcon from 'vue-material-design-icons/ChevronDown.vue';
 | 
			
		||||
import path from 'path';
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
    name: 'WebContentViewer',
 | 
			
		||||
@@ -156,11 +157,13 @@ export default {
 | 
			
		||||
 | 
			
		||||
                        if (!existing) {
 | 
			
		||||
                            existing = {
 | 
			
		||||
                                name: partName,
 | 
			
		||||
                                name: pathParts[i],
 | 
			
		||||
                                isDirectory,
 | 
			
		||||
                                size: isDirectory ? 0 : file._data.uncompressedSize,
 | 
			
		||||
                                content: isDirectory ? null : '',  // Initialiser 'content' pour les fichiers
 | 
			
		||||
                                children: isDirectory ? [] : null,
 | 
			
		||||
                                //remove the name of the file from the path
 | 
			
		||||
                                parentPath: pathParts.slice(0, i).join('/'),
 | 
			
		||||
                                unzip: promise
 | 
			
		||||
                            };
 | 
			
		||||
                            currentLevel.push(existing);
 | 
			
		||||
@@ -206,9 +209,35 @@ export default {
 | 
			
		||||
        },
 | 
			
		||||
        async onDragStart(file) {
 | 
			
		||||
            console.log('Drag start', file);
 | 
			
		||||
            await file.unzip;
 | 
			
		||||
            this.$emit('file-upload', file); 
 | 
			
		||||
        }
 | 
			
		||||
 | 
			
		||||
            const getFilesFromFolder = (folder) => {
 | 
			
		||||
                const files = [];
 | 
			
		||||
                if (!folder.children || folder.children.length === 0) return files;
 | 
			
		||||
 | 
			
		||||
                for (let i = 0; i < folder.children.length; i++) {
 | 
			
		||||
                    const child = folder.children[i];
 | 
			
		||||
                    if (child.isDirectory) {
 | 
			
		||||
                        files.push(...getFilesFromFolder(child));
 | 
			
		||||
                    } else {
 | 
			
		||||
                        files.push(child);
 | 
			
		||||
                    }
 | 
			
		||||
                }
 | 
			
		||||
                return files;
 | 
			
		||||
            };
 | 
			
		||||
 | 
			
		||||
            try {
 | 
			
		||||
                if (file.isDirectory) {
 | 
			
		||||
                    const files = getFilesFromFolder(file);
 | 
			
		||||
                    const filesToUnzip = files.map(file => file.unzip);
 | 
			
		||||
                    await Promise.all(filesToUnzip);
 | 
			
		||||
                } else {
 | 
			
		||||
                    await file.unzip;
 | 
			
		||||
                }
 | 
			
		||||
                this.$emit('file-upload', file);
 | 
			
		||||
            } catch (error) {
 | 
			
		||||
                console.error('Erreur lors du drag start :', error);
 | 
			
		||||
            }
 | 
			
		||||
        },
 | 
			
		||||
    },
 | 
			
		||||
};
 | 
			
		||||
</script>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user