feat: ssl push multiple directories

agent/app/service/website_ca.go

@@ -212,10 +212,17 @@ func (w WebsiteCAService) ObtainSSL(req request.WebsiteCAObtain) (*model.Website
 			websiteSSL.Shell = req.Shell
 		}
 		if req.PushDir {
-			if !files.NewFileOp().Stat(req.Dir) {
+			dirs := certificateDirectories(req.Dir)
+			if len(dirs) == 0 {
 				return nil, buserr.New("ErrLinkPathNotFound")
 			}
-			websiteSSL.Dir = req.Dir
+			for _, dir := range dirs {
+				info, err := os.Stat(dir)
+				if err != nil || !info.IsDir() {
+					return nil, buserr.New("ErrLinkPathNotFound")
+				}
+			}
+			websiteSSL.Dir = strings.Join(dirs, "\n")
 		}
 		if req.Domains != "" {
 			domainArray := strings.Split(req.Domains, "\n")
@@ -348,7 +355,9 @@ func (w WebsiteCAService) ObtainSSL(req request.WebsiteCAObtain) (*model.Website
 	if websiteSSL.ExecShell {
 		workDir := global.Dir.DataDir
 		if websiteSSL.PushDir {
-			workDir = websiteSSL.Dir
+			if dirs := certificateDirectories(websiteSSL.Dir); len(dirs) > 0 {
+				workDir = dirs[0]
+			}
 		}
 		logger.Println(i18n.GetMsgByKey("ExecShellStart"))
 		if err = runShellScriptFile(workDir, websiteSSL.Shell, logger); err != nil {

agent/app/service/website_ssl.go

@@ -209,11 +209,17 @@ func (w WebsiteSSLService) Create(create request.WebsiteSSLCreate) (request.Webs
 		websiteSSL.Shell = create.Shell
 	}
 	if create.PushDir {
-		fileOP := files.NewFileOp()
-		if !fileOP.Stat(create.Dir) {
+		dirs := certificateDirectories(create.Dir)
+		if len(dirs) == 0 {
 			return res, buserr.New("ErrLinkPathNotFound")
 		}
-		websiteSSL.Dir = create.Dir
+		for _, dir := range dirs {
+			info, err := os.Stat(dir)
+			if err != nil || !info.IsDir() {
+				return res, buserr.New("ErrLinkPathNotFound")
+			}
+		}
+		websiteSSL.Dir = strings.Join(dirs, "\n")
 	}
 	setSSLPushConfig(&websiteSSL, create.PushNode, create.Nodes)
 
@@ -573,7 +579,9 @@ func (w WebsiteSSLService) obtainSSL(id uint, autoRenew bool) error {
 		if websiteSSL.ExecShell {
 			workDir := global.Dir.DataDir
 			if websiteSSL.PushDir {
-				workDir = websiteSSL.Dir
+				if dirs := certificateDirectories(websiteSSL.Dir); len(dirs) > 0 {
+					workDir = dirs[0]
+				}
 			}
 			printSSLLog(logger, "ExecShellStart", nil)
 			if err = runShellScriptFile(workDir, websiteSSL.Shell, logger); err != nil {
@@ -793,11 +801,16 @@ func (w WebsiteSSLService) Update(update request.WebsiteSSLUpdate) error {
 	}
 
 	if update.PushDir {
-		fileOP := files.NewFileOp()
-		if !fileOP.Stat(update.Dir) {
-			_ = fileOP.CreateDir(update.Dir, constant.DirPerm)
+		dirs := certificateDirectories(update.Dir)
+		if len(dirs) == 0 {
+			return buserr.New("ErrLinkPathNotFound")
 		}
-		updateParams["dir"] = update.Dir
+		for _, dir := range dirs {
+			if err := os.MkdirAll(dir, constant.DirPerm); err != nil {
+				return err
+			}
+		}
+		updateParams["dir"] = strings.Join(dirs, "\n")
 	}
 	var domains []string
 	if update.OtherDomains != "" {

agent/app/service/website_utils.go

@@ -1529,26 +1529,41 @@ func checkWebsitePort(defaultHTTPsPort, port int, websiteType string) error {
 	return nil
 }
 
+// certificateDirectories accepts both legacy single paths and newline-separated paths.
+func certificateDirectories(value string) []string {
+	var dirs []string
+	seen := make(map[string]bool)
+	for _, dir := range strings.Split(value, "\n") {
+		dir = strings.TrimSpace(dir)
+		if dir == "" {
+			continue
+		}
+		dir = filepath.Clean(dir)
+		if !seen[dir] {
+			seen[dir] = true
+			dirs = append(dirs, dir)
+		}
+	}
+	return dirs
+}
+
 func saveCertificateFile(websiteSSL *model.WebsiteSSL, logger *log.Logger) {
-	if websiteSSL.PushDir {
-		fileOp := files.NewFileOp()
-		var (
-			pushErr error
-			MsgMap  = map[string]interface{}{"path": websiteSSL.Dir, "status": i18n.GetMsgByKey("Success")}
-		)
-		if pushErr = fileOp.SaveFile(path.Join(websiteSSL.Dir, "privkey.pem"), websiteSSL.PrivateKey, constant.FilePerm); pushErr != nil {
-			MsgMap["status"] = i18n.GetMsgByKey("Failed")
-			logger.Println(i18n.GetMsgWithMap("PushDirLog", MsgMap))
-			logger.Println("Push dir failed:" + pushErr.Error())
-		}
-		if pushErr = fileOp.SaveFile(path.Join(websiteSSL.Dir, "fullchain.pem"), websiteSSL.Pem, constant.FilePerm); pushErr != nil {
-			MsgMap["status"] = i18n.GetMsgByKey("Failed")
-			logger.Println(i18n.GetMsgWithMap("PushDirLog", MsgMap))
-			logger.Println("Push dir failed:" + pushErr.Error())
-		}
-		if pushErr == nil {
-			logger.Println(i18n.GetMsgWithMap("PushDirLog", MsgMap))
+	if !websiteSSL.PushDir {
+		return
+	}
+	fileOp := files.NewFileOp()
+	for _, dir := range certificateDirectories(websiteSSL.Dir) {
+		status := i18n.GetMsgByKey("Success")
+		for _, file := range []struct{ name, content string }{
+			{"privkey.pem", websiteSSL.PrivateKey},
+			{"fullchain.pem", websiteSSL.Pem},
+		} {
+			if err := fileOp.SaveFile(path.Join(dir, file.name), file.content, constant.FilePerm); err != nil {
+				status = i18n.GetMsgByKey("Failed")
+				logger.Printf("Push dir %s failed: %s", dir, err)
+			}
 		}
+		logger.Println(i18n.GetMsgWithMap("PushDirLog", map[string]interface{}{"path": dir, "status": status}))
 	}
 }
 

frontend/src/api/modules/container.ts

@@ -1,5 +1,4 @@
 import http from '@/api';
-import type { AxiosRequestConfig } from 'axios';
 import { ResPage, SearchWithPage } from '../interface';
 import { Container } from '../interface/container';
 import { TimeoutEnum } from '@/enums/http-enum';
@@ -24,11 +23,10 @@ export const loadContainerUsers = (name: string) => {
 export const listContainerFiles = (params: Container.ContainerFileReq) => {
     return http.post<Array<Container.ContainerFileInfo>>(`/containers/files/search`, params, TimeoutEnum.T_40S);
 };
-export const uploadContainerFile = (params: FormData, config?: AxiosRequestConfig & { skipErrorMessage?: boolean }) => {
+export const uploadContainerFile = (params: FormData) => {
     return http.upload(`/containers/files/upload`, params, {
+        headers: { 'Content-Type': 'multipart/form-data' },
         timeout: TimeoutEnum.T_5M,
-        ...config,
-        headers: { 'Content-Type': 'multipart/form-data', ...config?.headers },
     });
 };
 export const getContainerFileContent = (params: Container.ContainerFileReq) => {

frontend/src/components/file-list/index.vue

@@ -79,6 +79,16 @@
                 @row-click="handleRowClick"
                 class="cursor-pointer dialog-file-list"
             >
+                <el-table-column v-if="isMultiple && form.dir" width="48">
+                    <template #default="{ row }">
+                        <el-checkbox
+                            v-if="row.isDir && !row.isCreate"
+                            :model-value="selectedPathSet.has(row.path)"
+                            @click.stop
+                            @change="toggleDirectory(row.path)"
+                        />
+                    </template>
+                </el-table-column>
                 <el-table-column prop="name" show-overflow-tooltip fix>
                     <template #default="{ row }">
                         <svg-icon
@@ -131,6 +141,13 @@
             </el-table>
         </div>
         <div class="file-list-bottom">
+            <el-checkbox
+                v-if="isMultiple && form.dir"
+                :model-value="selectedPathSet.has(req.path)"
+                @change="toggleDirectory(req.path)"
+            >
+                {{ req.path }}
+            </el-checkbox>
             <div v-if="!isMultiple && selectRow?.path">
                 {{ $t('file.currentSelect') }}
                 <el-tooltip :content="selectRow.path" placement="top">
@@ -163,7 +180,11 @@
         <template #footer>
             <span class="dialog-footer">
                 <el-button @click="handleClose">{{ $t('commons.button.cancel') }}</el-button>
-                <el-button type="primary" @click="selectFile" :disabled="disBtn">
+                <el-button
+                    type="primary"
+                    @click="selectFile"
+                    :disabled="disBtn || (isMultiple && selectRows.length === 0)"
+                >
                     {{ $t('commons.button.confirm') }}
                 </el-button>
             </span>
@@ -174,7 +195,7 @@
 <script lang="ts" setup>
 import { File } from '@/api/interface/file';
 import { computeDirSize, createFile, getFileContent, getFilesList, searchFavorite } from '@/api/modules/files';
-import { nextTick, onUpdated, reactive, ref } from 'vue';
+import { computed, nextTick, reactive, ref } from 'vue';
 import i18n from '@/lang';
 import { MsgSuccess, MsgWarning } from '@/utils/message';
 import { useSearchableForSelect } from '@/views/host/file-management/hooks/searchable';
@@ -186,6 +207,7 @@ const paths = ref<string[]>([]);
 const req = reactive({ path: '/', expand: true, page: 1, pageSize: 300, showHidden: true });
 const selectRow = ref({ path: '', name: '' });
 const selectRows = ref<Array<{ path: string; name: string }>>([]);
+const selectedPathSet = computed(() => new Set(selectRows.value.map((item) => item.path)));
 const isMultiple = ref(false);
 const rowRefs = ref();
 const open = ref(false);
@@ -211,6 +233,7 @@ interface DialogProps {
     isAll?: boolean;
     disabled?: boolean;
     multiple?: boolean;
+    selectedPaths?: string[];
 }
 const acceptParams = (props: DialogProps): void => {
     form.path = props.path || '/';
@@ -218,7 +241,8 @@ const acceptParams = (props: DialogProps): void => {
     form.isAll = props.isAll || false;
     form.disabled = props.disabled || false;
     isMultiple.value = props.multiple || false;
-    selectRows.value = [];
+    disBtn.value = false;
+    selectRows.value = [...new Set(props.selectedPaths || [])].map((path) => ({ path, name: path }));
     selectRow.value = { path: '', name: '' };
     openPage();
     req.path = form.path;
@@ -281,7 +305,7 @@ const openDir = async (row: File.File, column: any, event: any) => {
     }
     // Handle file click
     const fullPath = (req.path === '/' ? req.path : req.path + '/') + row.name;
-    if (isMultiple.value) {
+    if (isMultiple.value && (form.isAll || !form.dir)) {
         // Multiple mode: toggle selection
         const index = selectRows.value.findIndex((r) => r.path === fullPath);
         if (index > -1) {
@@ -473,22 +497,25 @@ const createFolder = async (row: any) => {
     Object.assign(addItem, addForm);
     loading.value = true;
     createFile(addItem as File.FileCreate)
-        .then(() => {
+        .then(async () => {
             row.isCreate = false;
             disBtn.value = false;
             MsgSuccess(i18n.global.t('commons.msg.createSuccess'));
+            await search(req);
         })
         .finally(() => {
             loading.value = false;
         });
 };
 
-onUpdated(() => {
-    if (form.path != '') {
-        req.path = form.path;
+const toggleDirectory = (path: string) => {
+    const index = selectRows.value.findIndex((item) => item.path === path);
+    if (index >= 0) {
+        selectRows.value.splice(index, 1);
+    } else {
+        selectRows.value.push({ path, name: path });
     }
-    search(req);
-});
+};
 
 const removeSelected = (index: number) => {
     selectRows.value.splice(index, 1);

frontend/src/lang/modules/en.ts

@@ -4252,7 +4252,7 @@ const message = {
         pushDir: 'Push the certificate to the local directory',
         dir: 'Directory',
         pushDirHelper:
-            'Certificate file "fullchain.pem" and key file "privkey.pem" will be generated in this directory.',
+            'Select multiple directories or enter one directory per line. Each directory will receive "fullchain.pem" and "privkey.pem".',
         organizationDetail: 'Organization details',
         fromWebsite: 'From website',
         dnsMauanlHelper:

frontend/src/lang/modules/es-es.ts

@@ -4301,7 +4301,8 @@ const message = {
         domainHelper: 'Un dominio por línea, admite * y dirección IP',
         pushDir: 'Guardar certificado en el directorio local',
         dir: 'Directorio',
-        pushDirHelper: 'Se generarán los archivos "fullchain.pem" y "privkey.pem" en este directorio.',
+        pushDirHelper:
+            'Seleccione varios directorios o introduzca un directorio por línea. En cada directorio se generarán los archivos "fullchain.pem" y "privkey.pem".',
         organizationDetail: 'Detalles de la organización',
         fromWebsite: 'Desde el sitio web',
         dnsMauanlHelper: 'En modo manual, haz clic en solicitar tras la creación para obtener el valor DNS',

frontend/src/lang/modules/fa.ts

@@ -4214,7 +4214,8 @@ const message = {
         domainHelper: 'هر خط یک نام دامنه، پشتیبانی از * و آدرس IP',
         pushDir: 'ارسال گواهی به دایرکتوری محلی',
         dir: 'دایرکتوری',
-        pushDirHelper: 'فایل گواهی "fullchain.pem" و فایل کلید "privkey.pem" در این دایرکتوری تولید می‌شوند.',
+        pushDirHelper:
+            'چند دایرکتوری انتخاب کنید یا در هر خط یک دایرکتوری وارد کنید. فایل‌های "fullchain.pem" و "privkey.pem" در هر دایرکتوری ایجاد می‌شوند.',
         organizationDetail: 'جزئیات سازمان',
         fromWebsite: 'از وب‌سایت',
         dnsMauanlHelper:

frontend/src/lang/modules/ja.ts

@@ -4237,7 +4237,8 @@ const message = {
         domainHelper: '1行ごとに1つのドメイン名、 *およびIPアドレスをサポートします',
         pushDir: '証明書をローカルディレクトリにプッシュします',
         dir: 'ディレクトリ',
-        pushDirHelper: '証明書ファイル「FullChain.PEM」とキーファイル「Privkey.Pem」がこのディレクトリで生成されます。',
+        pushDirHelper:
+            '複数のディレクトリを選択するか、1行に1つずつディレクトリを入力してください。各ディレクトリに「fullchain.pem」と「privkey.pem」が生成されます。',
         organizationDetail: '組織の詳細',
         fromWebsite: 'ウェブサイトから',
         dnsMauanlHelper: '手動解像度モードでは、作成後に適用ボタンをクリックしてDNS解像度値を取得する必要があります',

frontend/src/lang/modules/ko.ts

@@ -4159,7 +4159,8 @@ const message = {
         domainHelper: '줄당 하나의 도메인 이름, * 및 IP 주소 지원',
         pushDir: '로컬 디렉토리로 인증서 푸시',
         dir: '디렉토리',
-        pushDirHelper: '인증서 파일 "fullchain.pem" 및 키 파일 "privkey.pem"이 이 디렉토리에 생성됩니다.',
+        pushDirHelper:
+            '여러 디렉터리를 선택하거나 한 줄에 하나씩 입력하세요. 각 디렉터리에 "fullchain.pem"과 "privkey.pem" 파일이 생성됩니다.',
         organizationDetail: '조직 세부 정보',
         fromWebsite: '웹사이트에서 가져오기',
         dnsMauanlHelper: '수동 해석 모드에서는 생성 후 신청 버튼을 클릭하여 DNS 해석 값을 얻어야 합니다.',

frontend/src/lang/modules/lo.ts

@@ -4131,7 +4131,8 @@ const message = {
         domainHelper: 'ໜຶ່ງໂດເມນຕໍ່ແຖວ, ຮອງຮັບ * ແລະ ທີ່ຢູ່ IP',
         pushDir: 'ສົ່ງໃບຢັ້ງຢືນໄປຍັງໂຟນເດີໃນເຄື່ອງ',
         dir: 'ໂຟນເດີ',
-        pushDirHelper: 'ໄຟລ໌ "fullchain.pem" ແລະ "privkey.pem" ຈະຖືກສ້າງໃນໂຟນເດີນີ້.',
+        pushDirHelper:
+            'ເລືອກຫຼາຍໂຟນເດີ ຫຼື ປ້ອນໜຶ່ງໂຟນເດີຕໍ່ແຖວ. ໄຟລ໌ "fullchain.pem" ແລະ "privkey.pem" ຈະຖືກສ້າງໃນແຕ່ລະໂຟນເດີ.',
         organizationDetail: 'ລາຍລະອຽດອົງກອນ',
         fromWebsite: 'ຈາກເວັບໄຊ',
         dnsMauanlHelper: 'ໃນໂໝດຈັດການ DNS ດ້ວຍຕົນເອງ, ທ່ານຕ້ອງຄລິກປຸ່ມ "ຂໍໃບຢັ້ງຢືນ" ຫຼັງຈາກສ້າງເພື່ອຮັບຄ່າ DNS',

frontend/src/lang/modules/ms.ts

@@ -4315,7 +4315,8 @@ const message = {
         domainHelper: 'Satu nama domain setiap baris, menyokong * dan alamat IP',
         pushDir: 'Tolakkan sijil ke direktori tempatan',
         dir: 'Direktori',
-        pushDirHelper: 'Fail sijil "fullchain.pem" dan fail kunci "privkey.pem" akan dihasilkan dalam direktori ini.',
+        pushDirHelper:
+            'Pilih beberapa direktori atau masukkan satu direktori pada setiap baris. Fail "fullchain.pem" dan "privkey.pem" akan dihasilkan dalam setiap direktori.',
         organizationDetail: 'Butiran organisasi',
         fromWebsite: 'Daripada laman web',
         dnsMauanlHelper:

frontend/src/lang/modules/pt-br.ts

@@ -4335,7 +4335,7 @@ const message = {
         pushDir: 'Enviar o certificado para o diretório local',
         dir: 'Diretório',
         pushDirHelper:
-            'O arquivo do certificado "fullchain.pem" e o arquivo de chave "privkey.pem" serão gerados neste diretório.',
+            'Selecione vários diretórios ou informe um diretório por linha. Os arquivos "fullchain.pem" e "privkey.pem" serão gerados em cada diretório.',
         organizationDetail: 'Detalhes da organização',
         fromWebsite: 'Do site',
         dnsMauanlHelper:

frontend/src/lang/modules/ru.ts

@@ -4302,7 +4302,8 @@ const message = {
         domainHelper: 'Одно доменное имя в строке, поддерживает * и IP-адрес',
         pushDir: 'Отправить сертификат в локальную директорию',
         dir: 'Директория',
-        pushDirHelper: 'В этой директории будут созданы файл сертификата "fullchain.pem" и файл ключа "privkey.pem".',
+        pushDirHelper:
+            'Выберите несколько директорий или укажите по одной директории в строке. В каждой директории будут созданы файлы "fullchain.pem" и "privkey.pem".',
         organizationDetail: 'Детали организации',
         fromWebsite: 'С веб-сайта',
         dnsMauanlHelper:

frontend/src/lang/modules/tr.ts

@@ -4321,7 +4321,7 @@ const message = {
         pushDir: 'Sertifikayı yerel dizine aktar',
         dir: 'Dizin',
         pushDirHelper:
-            'Sertifika dosyası "fullchain.pem" ve anahtar dosyası "privkey.pem" bu dizinde oluşturulacaktır.',
+            'Birden fazla dizin seçin veya her satıra bir dizin girin. Her dizinde "fullchain.pem" ve "privkey.pem" dosyaları oluşturulacaktır.',
         organizationDetail: 'Organizasyon detayları',
         fromWebsite: 'Web sitesinden',
         dnsMauanlHelper:

frontend/src/lang/modules/zh-Hant.ts

@@ -3970,7 +3970,7 @@ const message = {
         domainHelper: '一行一個網域名稱,支援*和IP位址',
         pushDir: '推送憑證到本機目錄',
         dir: '目錄',
-        pushDirHelper: '會在此目錄下產生兩個檔案，憑證檔案：fullchain.pem 金鑰檔案：privkey.pem',
+        pushDirHelper: '支援選擇多個目錄，也可每行填寫一個目錄。每個目錄下都會產生 fullchain.pem 和 privkey.pem。',
         organizationDetail: '機構詳情',
         fromWebsite: '從網站取得',
         dnsMauanlHelper: '手動解析模式需要在建立完之後點選申請按鈕取得 DNS 解析值',

frontend/src/lang/modules/zh.ts

@@ -4015,7 +4015,8 @@ const message = {
         domainHelper: '一行一个域名,支持*和IP地址',
         pushDir: '推送证书到本地目录',
         dir: '目录',
-        pushDirHelper: '会在此目录下生成两个文件，证书文件：fullchain.pem 密钥文件：privkey.pem',
+        pushDirHelper:
+            '支持选择多个目录，也可每行填写一个目录。每个目录下都会生成证书文件 fullchain.pem 和密钥文件 privkey.pem',
         organizationDetail: '机构详情',
         fromWebsite: '从网站中获取',
         dnsMauanlHelper: '手动解析模式需要在创建完之后点击申请按钮获取 DNS 解析值',

frontend/src/views/container/container/file-browser/index.vue

@@ -32,9 +32,11 @@
                         @blur="cancelPathEditing"
                         @keyup.enter.prevent="submitPathInput"
                     />
-                    <el-button class="mt-2" type="primary" plain @click="onUpload">
-                        {{ $t('commons.button.upload') }}
-                    </el-button>
+                    <el-upload ref="uploadRef" :auto-upload="false" :show-file-list="false" :on-change="onUploadChange">
+                        <el-button class="mt-2" :loading="uploading" type="primary" plain>
+                            {{ $t('commons.button.upload') }}
+                        </el-button>
+                    </el-upload>
                     <el-button class="mt-2 ml-3" plain :disabled="selectedRows.length === 0" @click="onBatchDelete">
                         {{ $t('commons.button.delete') }}
                     </el-button>
@@ -95,7 +97,6 @@
             </el-form>
         </template>
     </DrawerPro>
-    <FileUpload ref="uploadRef" @close="loadContainerFiles" />
     <DialogPro v-model="previewVisible" :title="previewTitle" size="w-70" :close-on-click-modal="true">
         <el-alert
             v-if="previewTruncated"
@@ -117,11 +118,11 @@ import {
     getContainerFileContent,
     getContainerFileSize,
     listContainerFiles,
+    uploadContainerFile,
 } from '@/api/modules/container';
 import { MsgError, MsgSuccess, MsgWarning } from '@/utils/message';
 import i18n from '@/lang';
-import { ElInput, ElMessageBox } from 'element-plus';
-import FileUpload from '@/views/host/file-management/upload/index.vue';
+import { ElInput, ElMessageBox, UploadFile, UploadInstance } from 'element-plus';
 import { Document, FolderOpened, HomeFilled } from '@element-plus/icons-vue';
 import { computeSize2 } from '@/utils/size';
 const visible = ref(false);
@@ -129,8 +130,9 @@ const title = ref('');
 const containerID = ref('');
 const filePath = ref('/');
 const containerFiles = ref<any[]>([]);
-const uploadRef = ref<InstanceType<typeof FileUpload>>();
+const uploadRef = ref<UploadInstance>();
 const pathInputRef = ref<InstanceType<typeof ElInput>>();
+const uploading = ref(false);
 const previewVisible = ref(false);
 const previewTitle = ref('');
 const previewContent = ref('');
@@ -251,8 +253,27 @@ const submitPathInput = async () => {
     }
 };
 
-const onUpload = () => {
-    uploadRef.value?.acceptParams({ path: filePath.value, containerID: containerID.value });
+const onUploadChange = async (uploadFile: UploadFile) => {
+    if (!uploadFile.raw) {
+        return;
+    }
+    const formData = new FormData();
+    formData.append('containerID', containerID.value);
+    formData.append('path', filePath.value);
+    formData.append('file', uploadFile.raw);
+    uploading.value = true;
+    await uploadContainerFile(formData)
+        .then(async () => {
+            MsgSuccess(i18n.global.t('file.uploadSuccess'));
+            await loadContainerFiles();
+        })
+        .catch((err) => {
+            MsgError(err?.message || i18n.global.t('commons.msg.operationFailed'));
+        })
+        .finally(() => {
+            uploading.value = false;
+            uploadRef.value?.clearFiles();
+        });
 };
 
 const onOpenFile = async (path: string) => {

frontend/src/views/host/file-management/upload/index.vue

@@ -119,9 +119,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
-import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile, genFileId } from 'element-plus';
-import { uploadContainerFile } from '@/api/modules/container';
+import { computed, nextTick, reactive, ref } from 'vue';
+import { UploadFile, UploadFiles, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
 import { batchCheckFiles, stopChunkUpload, uploadFileData } from '@/api/modules/files';
 import { CHUNK_SIZE, uploadChunkWithRetry } from '@/utils/chunk-upload';
 import i18n from '@/lang';
@@ -135,7 +134,6 @@ import { useGlobalStore } from '@/composables/useGlobalStore';
 interface UploadFileProps {
     path: string;
     isAppendOnly?: boolean;
-    containerID?: string;
 }
 
 const uploadRef = ref<UploadInstance>();
@@ -156,8 +154,6 @@ const uploadOverallPercent = computed(() => {
 const open = ref(false);
 const isAppendOnly = ref(false);
 const path = ref();
-const containerID = ref('');
-const targetNode = ref('');
 let uploadHelper = ref('');
 const dialogExistFileRef = ref();
 const abortController = ref<AbortController | null>(null);
@@ -217,6 +213,9 @@ const closePage = () => {
     clearFiles();
     em('close', false);
 };
+const state = reactive({
+    uploadEle: null,
+});
 const uploaderFiles = ref<UploadFiles>([]);
 const hoverIndex = ref<number | null>(null);
 const tmpFiles = ref<UploadFiles>([]);
@@ -226,11 +225,9 @@ const upload = (command: string) => {
     if (uploadLocked.value) {
         return;
     }
-    const input = uploadRef.value?.$el.querySelector('input[type=file]') as HTMLInputElement | null;
-    if (!input) return;
-    input.webkitdirectory = command === 'dir';
-    input.value = '';
-    input.click();
+    state.uploadEle.webkitdirectory = command == 'dir';
+    uploadRef.value.$el.querySelector('input').value = '';
+    uploadRef.value.$el.querySelector('input').click();
 };
 
 const removeFile = (index: number) => {
@@ -270,7 +267,7 @@ const handleDrop = async (event: DragEvent) => {
 };
 
 const convertFileToUploadFile = (file: File, path: string): UploadFile => {
-    const uid = genFileId();
+    const uid = Date.now();
 
     const uploadRawFile: UploadRawFile = new File([file], file.name, {
         type: file.type,
@@ -297,15 +294,12 @@ const traverseFileTree = async (item: any, path = '') => {
         return;
     }
     if (item.isFile) {
-        if (uploaderFiles.value.length + tmpFiles.value.length >= 1000) {
+        if (tmpFiles.value.length > 1000) {
             breakFlag.value = true;
             return;
         }
         await new Promise<void>((resolve) => {
             item.file((file: File) => {
-                if (uploaderFiles.value.length + tmpFiles.value.length >= 1000) {
-                    breakFlag.value = true;
-                }
                 if (!breakFlag.value) {
                     tmpFiles.value.push(convertFileToUploadFile(file, path));
                 }
@@ -371,14 +365,7 @@ const handleSuccess: UploadProps['onSuccess'] = (res, file) => {
 };
 
 const submit = async () => {
-    if (uploadLocked.value) return;
-    const files = containerID.value
-        ? uploaderFiles.value.filter((file) => file.status !== 'success')
-        : uploaderFiles.value.slice();
-    if (containerID.value) {
-        await uploadFile(files, false);
-        return;
-    }
+    const files = uploaderFiles.value.slice();
     const fileNamesWithPath = Array.from(
         new Set(files.map((file) => `${path.value}/${file.raw.webkitRelativePath || file.name}`)),
     );
@@ -423,8 +410,7 @@ const uploadFile = async (files: any[], overwrite: boolean) => {
     upLoading.value = true;
     uploadTotalCount.value = files.length;
     const controller = new AbortController();
-    const uploadNode = containerID.value ? targetNode.value : currentNode.value;
-    const uploadContainerID = containerID.value;
+    const uploadNode = currentNode.value;
     abortController.value = controller;
     let successCount = 0;
     try {
@@ -440,27 +426,10 @@ const uploadFile = async (files: any[], overwrite: boolean) => {
 
             let isSuccess = false;
             try {
-                if (uploadContainerID) {
-                    const data = new FormData();
-                    data.append('containerID', uploadContainerID);
-                    data.append('path', getUploadPath(file));
-                    data.append('file', file.raw, getFilenameFromPath(file.raw.webkitRelativePath || file.name));
-                    await uploadContainerFile(data, {
-                        headers: { CurrentNode: uploadNode },
-                        signal: controller.signal,
-                        skipErrorMessage: true,
-                        timeout: 0,
-                        onUploadProgress: ({ loaded, total }) => {
-                            uploadPercent.value = total ? Math.round((loaded / total) * 100) : 0;
-                        },
-                    });
-                    isSuccess = true;
-                } else {
-                    isSuccess =
-                        Number(file.size) === 0
-                            ? await uploadEmptyFile(file, controller, uploadNode, overwrite)
-                            : await uploadChunkedFile(file, controller, uploadNode, overwrite);
-                }
+                isSuccess =
+                    Number(file.size) === 0
+                        ? await uploadEmptyFile(file, controller, uploadNode, overwrite)
+                        : await uploadChunkedFile(file, controller, uploadNode, overwrite);
             } catch (error) {
                 if (!controller.signal.aborted) {
                     MsgError(getErrorMessage(error));
@@ -604,9 +573,6 @@ const getFilenameFromPath = (path: string) => {
 };
 
 const acceptParams = (props: UploadFileProps) => {
-    if (uploadLocked.value) return;
-    containerID.value = props.containerID || '';
-    targetNode.value = currentNode.value;
     path.value = props.path;
     isAppendOnly.value = Boolean(props.isAppendOnly);
     open.value = true;
@@ -615,19 +581,22 @@ const acceptParams = (props: UploadFileProps) => {
     uploadCurrentIndex.value = 0;
     uploadHelper.value = '';
     canceling.value = false;
+
+    nextTick(() => {
+        state.uploadEle = document.querySelector('.el-upload__input');
+    });
 };
 
-const beforeUnload = (event: BeforeUnloadEvent) => {
-    if (upLoading.value) {
-        event.preventDefault();
-        event.returnValue = i18n.global.t('file.cancelUploadHelper');
-    }
-};
-onMounted(() => window.addEventListener('beforeunload', beforeUnload));
-onBeforeUnmount(() => {
-    window.removeEventListener('beforeunload', beforeUnload);
-    abortController.value?.abort();
-    void cleanupActiveChunkUpload();
+onMounted(() => {
+    window.addEventListener('beforeunload', (e) => {
+        if (upLoading.value) {
+            if (upLoading.value) {
+                e.preventDefault();
+                e.returnValue = i18n.global.t('file.cancelUploadHelper');
+                return i18n.global.t('file.cancelUploadHelper');
+            }
+        }
+    });
 });
 
 defineExpose({ acceptParams, handleDrop, open });

frontend/src/views/website/ssl/ca/obtain/index.vue

@@ -41,14 +41,21 @@
                         <el-checkbox v-model="obtain.pushDir" :label="$t('ssl.pushDir')" />
                     </el-form-item>
                     <el-form-item :label="$t('ssl.dir')" prop="dir" v-if="obtain.pushDir">
-                        <el-input v-model.trim="obtain.dir">
-                            <template #prepend>
-                                <el-button
-                                    icon="Folder"
-                                    @click="fileRef.acceptParams({ path: obtain.dir, dir: true })"
-                                />
-                            </template>
-                        </el-input>
+                        <el-button
+                            icon="Folder"
+                            class="mb-2"
+                            @click="
+                                fileRef.acceptParams({
+                                    path: obtain.dir.split('\n')[0],
+                                    dir: true,
+                                    multiple: true,
+                                    selectedPaths: obtain.dir.split('\n').filter(Boolean),
+                                })
+                            "
+                        >
+                            {{ $t('ssl.dir') }}
+                        </el-button>
+                        <el-input v-model.trim="obtain.dir" type="textarea" :rows="3" />
                         <span class="input-help">
                             {{ $t('ssl.pushDirHelper') }}
                         </span>
@@ -157,8 +164,8 @@ const resetForm = () => {
     obtain.value = initData();
 };
 
-const getPath = (dir: string) => {
-    obtain.value.dir = dir;
+const getPath = (dirs: string[]) => {
+    obtain.value.dir = dirs.join('\n');
 };
 
 const submit = async (formEl: FormInstance | undefined) => {

frontend/src/views/website/ssl/create/index.vue

@@ -127,11 +127,21 @@
                     <el-checkbox v-model="ssl.pushDir" :label="$t('ssl.pushDir')" />
                 </el-form-item>
                 <el-form-item :label="$t('ssl.dir')" prop="dir" v-if="ssl.pushDir">
-                    <el-input v-model.trim="ssl.dir">
-                        <template #prepend>
-                            <el-button icon="Folder" @click="fileRef.acceptParams({ path: ssl.dir, dir: true })" />
-                        </template>
-                    </el-input>
+                    <el-button
+                        icon="Folder"
+                        class="mb-2"
+                        @click="
+                            fileRef.acceptParams({
+                                path: ssl.dir.split('\n')[0],
+                                dir: true,
+                                multiple: true,
+                                selectedPaths: ssl.dir.split('\n').filter(Boolean),
+                            })
+                        "
+                    >
+                        {{ $t('ssl.dir') }}
+                    </el-button>
+                    <el-input v-model.trim="ssl.dir" type="textarea" :rows="3" />
                     <span class="input-help">
                         {{ $t('ssl.pushDirHelper') }}
                     </span>
@@ -347,8 +357,8 @@ const acceptParams = (op: string, websiteSSL?: Website.SSLDTO) => {
     open.value = true;
 };
 
-const getPath = (dir: string) => {
-    ssl.value.dir = dir;
+const getPath = (dirs: string[]) => {
+    ssl.value.dir = dirs.join('\n');
 };
 
 const getAcmeAccounts = async () => {

frontend/src/views/website/ssl/detail/index.vue

@@ -44,7 +44,7 @@
                             {{ ssl.acmeAccount.email }}
                         </el-descriptions-item>
                         <el-descriptions-item :label="$t('ssl.pushDir')" v-if="ssl.pushDir">
-                            {{ ssl.dir }}
+                            <div v-for="dir in ssl.dir.split('\n')" :key="dir">{{ dir }}</div>
                         </el-descriptions-item>
                     </el-descriptions>
                 </div>