From 762a572c40cd9093dd132b3ba5a8e99cb54f4bc8 Mon Sep 17 00:00:00 2001 From: zhengkunwang <31820853+zhengkunwang223@users.noreply.github.com> Date: Fri, 1 Dec 2023 18:02:11 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=90=8C=E6=97=B6?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E4=B8=8A=E4=BC=A0=E6=96=87=E4=BB=B6=E5=92=8C?= =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A4=B9=20(#3135)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Refs https://github.com/1Panel-dev/1Panel/issues/3084 --- frontend/src/lang/modules/en.ts | 2 +- frontend/src/lang/modules/tw.ts | 2 +- frontend/src/lang/modules/zh.ts | 2 +- .../host/file-management/upload/index.vue | 86 +++++++++++++++++-- 4 files changed, 81 insertions(+), 11 deletions(-) diff --git a/frontend/src/lang/modules/en.ts b/frontend/src/lang/modules/en.ts index 157451dbc..3d424eee5 100644 --- a/frontend/src/lang/modules/en.ts +++ b/frontend/src/lang/modules/en.ts @@ -1086,7 +1086,7 @@ const message = { clearList: 'Clear list', deleteRecycleHelper: 'Are you sure you want to permanently delete the following files?', typeErrOrEmpty: '[{0}] file type is wrong or empty folder', - dropHelper: 'Drag [{0}] here, or', + dropHelper: 'Drag the files you want to upload here', }, ssh: { autoStart: 'Auto Start', diff --git a/frontend/src/lang/modules/tw.ts b/frontend/src/lang/modules/tw.ts index b727ce833..f510ec063 100644 --- a/frontend/src/lang/modules/tw.ts +++ b/frontend/src/lang/modules/tw.ts @@ -1035,7 +1035,7 @@ const message = { clearList: '清空列表', deleteRecycleHelper: '確定永久刪除以下文件？', typeErrOrEmpty: '【{0}】 檔案類型錯誤或為空資料夾', - dropHelper: '將【{0}】拖曳到此處，或', + dropHelper: '將需要上傳的文件拖曳到此處', }, ssh: { autoStart: '開機自啟', diff --git a/frontend/src/lang/modules/zh.ts b/frontend/src/lang/modules/zh.ts index 6347b4511..bd67dad2d 100644 --- a/frontend/src/lang/modules/zh.ts +++ b/frontend/src/lang/modules/zh.ts @@ -1036,7 +1036,7 @@ const message = { clearList: '清空列表', deleteRecycleHelper: '确定永久删除以下文件？', typeErrOrEmpty: '【{0}】 文件类型错误或为空文件夹', - dropHelper: '将【{0}】拖拽到此处，或者', + dropHelper: '将需要上传的文件拖曳到此处', }, ssh: { autoStart: '开机自启', diff --git a/frontend/src/views/host/file-management/upload/index.vue b/frontend/src/views/host/file-management/upload/index.vue index bd306fedc..22292f161 100644 --- a/frontend/src/views/host/file-management/upload/index.vue +++ b/frontend/src/views/host/file-management/upload/index.vue @@ -19,9 +19,21 @@ {{ $t('file.clearList') }} +
+
+
+
+ +
+ {{ $t('file.dropHelper') }} +
+
+
+
+
+ - -
- {{ $t('file.dropHelper', [$t('file.' + uploadType)]) }} - {{ $t('database.clickHelper') }} -
+

{ uploaderFiles.value.splice(index, 1); }; +const handleDragover = (event: DragEvent) => { + event.preventDefault(); +}; + +const handleDrop = (event: DragEvent) => { + event.preventDefault(); + const items = event.dataTransfer.items; + + if (items) { + for (let i = 0; i < items.length; i++) { + const entry = items[i].webkitGetAsEntry(); + if (entry) { + traverseFileTree(entry); + } + } + } +}; + +const convertFileToUploadFile = (file: File, path: string): UploadFile => { + const uid = Date.now(); + + const uploadRawFile: UploadRawFile = new File([file], file.name, { + type: file.type, + lastModified: file.lastModified, + }) as UploadRawFile; + uploadRawFile.uid = uid; + + let fileName = file.name; + if (path != '') { + fileName = path + file.name; + } + return { + name: fileName, + size: file.size, + status: 'ready', + uid: uid, + raw: uploadRawFile, + }; +}; + +const traverseFileTree = (item: any, path = '') => { + path = path || ''; + if (item.isFile) { + item.file((file: File) => { + uploaderFiles.value.push(convertFileToUploadFile(file, path)); + }); + } else if (item.isDirectory) { + const dirReader = item.createReader(); + dirReader.readEntries((entries) => { + for (let i = 0; i < entries.length; i++) { + traverseFileTree(entries[i], path + item.name + '/'); + } + }); + } +}; + +const handleDragleave = (event) => { + event.preventDefault(); +}; + const fileOnChange = (_uploadFile: UploadFile, uploadFiles: UploadFiles) => { if (_uploadFile.size == 64 || _uploadFile.size == 0) { uploaderFiles.value = uploadFiles; @@ -172,8 +241,9 @@ const submit = async () => { if (file.raw.webkitRelativePath != '') { formData.append('path', path.value + '/' + getPathWithoutFilename(file.raw.webkitRelativePath)); } else { - formData.append('path', path.value); + formData.append('path', path.value + '/' + getPathWithoutFilename(file.name)); } + uploadPrecent.value = 0; await UploadFileData(formData, { onUploadProgress: (progressEvent) => { const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100); @@ -197,7 +267,7 @@ const submit = async () => { if (file.raw.webkitRelativePath != '') { formData.append('path', path.value + '/' + getPathWithoutFilename(file.raw.webkitRelativePath)); } else { - formData.append('path', path.value); + formData.append('path', path.value + '/' + getPathWithoutFilename(file.name)); } formData.append('chunk', chunk); formData.append('chunkIndex', c.toString());