diff --git a/frontend/src/components/upload/index.vue b/frontend/src/components/upload/index.vue
index 672005881..0417821f0 100644
--- a/frontend/src/components/upload/index.vue
+++ b/frontend/src/components/upload/index.vue
@@ -92,9 +92,36 @@
             </div>
         </el-drawer>
 
+        <el-dialog
+            v-model="open"
+            :title="$t('commons.button.recover') + ' - ' + name"
+            width="40%"
+            :close-on-click-modal="false"
+            :before-close="handleClose"
+        >
+            <el-form ref="backupForm" label-position="left" v-loading="loading">
+                <el-form-item
+                    :label="$t('setting.compressPassword')"
+                    style="margin-top: 10px"
+                    v-if="type === 'app' || type === 'website'"
+                >
+                    <el-input v-model="secret" :placeholder="$t('setting.backupRecoverMessage')" />
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="handleClose" :disabled="loading">
+                        {{ $t('commons.button.cancel') }}
+                    </el-button>
+                    <el-button type="primary" @click="onHandleRecover" :disabled="loading">
+                        {{ $t('commons.button.confirm') }}
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+
         <OpDialog ref="opRef" @search="search" />
     </div>
-    <AppRecover ref="recoverRef" />
 </template>
 
 <script lang="ts" setup>
@@ -105,9 +132,8 @@ import { UploadFile, UploadFiles, UploadInstance } from 'element-plus';
 import { File } from '@/api/interface/file';
 import DrawerHeader from '@/components/drawer-header/index.vue';
 import { BatchDeleteFile, CheckFile, ChunkUploadFileData, GetUploadList } from '@/api/modules/files';
-import { loadBaseDir } from '@/api/modules/setting';
+import { handleRecoverByUpload, loadBaseDir } from '@/api/modules/setting';
 import { MsgError, MsgSuccess } from '@/utils/message';
-import AppRecover from '@/views/app-store/installed/recover/index.vue';
 
 const loading = ref();
 const isUpload = ref();
@@ -115,7 +141,9 @@ const uploadPercent = ref<number>(0);
 const selects = ref<any>([]);
 const baseDir = ref();
 const opRef = ref();
-const recoverRef = ref();
+
+const open = ref();
+const currentRow = ref();
 
 const data = ref();
 const title = ref();
@@ -180,16 +208,48 @@ const search = async () => {
 };
 
 const onRecover = async (row: File.File) => {
+    currentRow.value = row;
+    if (type.value !== 'app' && type.value !== 'website') {
+        ElMessageBox.confirm(
+            i18n.global.t('commons.msg.backupHelper', [name.value + '( ' + detailName.value + ' )']),
+            i18n.global.t('commons.button.backup'),
+            {
+                confirmButtonText: i18n.global.t('commons.button.confirm'),
+                cancelButtonText: i18n.global.t('commons.button.cancel'),
+            },
+        ).then(async () => {
+            onHandleRecover();
+        });
+        return;
+    }
+    open.value = true;
+};
+
+const handleBackupClose = () => {
+    open.value = false;
+};
+const onHandleRecover = async () => {
     let params = {
         source: 'LOCAL',
         type: type.value,
         name: name.value,
         detailName: detailName.value,
-        file: baseDir.value + row.name,
+        file: baseDir.value + currentRow.value.name,
         secret: secret.value,
         recoverType: 'upload',
     };
-    recoverRef.value.acceptParams(params);
+    loading.value = true;
+    await handleRecoverByUpload(params)
+        .then(() => {
+            loading.value = false;
+            handleClose();
+            handleBackupClose();
+            MsgSuccess(i18n.global.t('commons.msg.operationSuccess'));
+            search();
+        })
+        .catch(() => {
+            loading.value = false;
+        });
 };
 
 const uploaderFiles = ref<UploadFiles>([]);