feat: use fetch for the file download instead of using proxy download

Author: yaroslav8765

custom/uploader.vue

@@ -103,6 +103,8 @@ const progress = ref(0);
 const uploaded = ref(false);
 const uploadedSize = ref(0);
 
+const downloadFileUrl = ref('');
+
 watch(() => uploaded, (value) => {
   emit('update:emptiness', !value);
 });
@@ -118,9 +120,53 @@ function uploadGeneratedImage(imgBlob) {
   });
 }
 
-onMounted(() => {
+onMounted(async () => {
   const previewColumnName = `previewUrl_${props.meta.pluginInstanceId}`;
-  if (props.record[previewColumnName]) {
+  let queryValues;
+  try { 
+    queryValues = JSON.parse(atob(route.query.values as string));
+  } catch (e) {
+    queryValues = {};
+  }
+
+  if (queryValues[props.meta.pathColumnName]) {
+    downloadFileUrl.value = queryValues[props.meta.pathColumnName];
+
+    const resp = await callAdminForthApi({
+        path: `/plugin/${props.meta.pluginInstanceId}/get-file-download-url`,
+        method: 'POST',
+        body: {
+          filePath: queryValues[props.meta.pathColumnName]
+        },
+    });
+    if (resp.error) {
+        adminforth.alert({
+          message: t('Error getting file url'),
+          variant: 'danger'
+        });
+      return;
+    }
+     const filename = resp.url.split('/').pop()?.split('?')[0] || `file`;
+    const filenameParts = filename.split('.');
+    const extension = filenameParts.length > 1 ? filenameParts.pop() : '';
+    const nameWithoutExt = filenameParts.join('.');
+    const newFileName = extension 
+      ? `${nameWithoutExt}_copy_${Date.now()}.${extension}`
+      : `${filename}_copy_${Date.now()}`;
+
+
+    const res = await fetch(resp.url);
+    const fileBlob = await res.blob();
+    const file = new File([fileBlob], newFileName, { type: fileBlob.type });
+    if (!file) {
+      return;
+    }
+    onFileChange({
+      target: {
+        files: [file],
+      },
+    });
+  } else if (props.record[previewColumnName]) {
     imgPreview.value = props.record[previewColumnName];
     uploaded.value = true;
     emit('update:emptiness', false);

index.ts

@@ -86,6 +86,7 @@ export default class UploadPlugin extends AdminForthPlugin {
       minShowWidth: this.options.preview?.minShowWidth,
       generationPrompt: this.options.generation?.generationPrompt,
       recorPkFieldName: this.resourceConfig.columns.find((column: any) => column.primaryKey)?.name,
+      pathColumnName: this.options.pathColumnName,
     };
     // define components which will be imported from other components
     this.componentPath('imageGenerator.vue');
@@ -427,6 +428,22 @@ export default class UploadPlugin extends AdminForthPlugin {
       },
     });
 
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/get-file-download-url`,
+      handler: async ({ body, adminUser }) => {
+        const { filePath } = body;
+        if (!filePath) {
+          return { error: 'Missing filePath' };
+        }
+        const url = await this.options.storageAdapter.getDownloadUrl(filePath, 1800);
+    
+        return {
+          url,
+        };
+      },
+    });
+
   }
 
 }