feat: allow to upload file directry from the url query param

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,45 @@ 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 file = await downloadAsFile(resp.url);
+    if (!file) {
+      return;
+    }
+    onFileChange({
+      target: {
+        files: [file],
+      },
+    });
+  } else if (props.record[previewColumnName]) {
     imgPreview.value = props.record[previewColumnName];
     uploaded.value = true;
     emit('update:emptiness', false);
@@ -300,6 +338,46 @@ const onFileChange = async (e) => {
   }
 }
 
+async function downloadAsFile(url) {
+    const options = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ fileDownloadURL: url }),
+    };
+    const fullPath = `${import.meta.env.VITE_ADMINFORTH_PUBLIC_PATH || ''}/adminapi/v1/plugin/${props.meta.pluginInstanceId}/proxy-download`;
+    const resp = await fetch(fullPath, options);
+    let isError = false;
+    try {
+      const jsonResp = await resp.clone().json();
+      if (jsonResp.error) {
+        adminforth.alert({
+          message: t('Error uploading file'),
+          variant: 'danger'
+        });
+        isError = true;
+      } 
+    } catch (e) {
+
+    }
 
+    if (isError) {
+      return null;
+    }
+
+    const blob = await resp.blob();
+
+    const filename = 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 file = new File([blob], newFileName, { type: blob.type });
+    return file;
+}
 
 </script>

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');
@@ -411,6 +412,55 @@ 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,
+        };
+      },
+    });
+
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/proxy-download`,
+      handler: async ({ body, response }) => {
+        const { fileDownloadURL } = body;
+
+        if (!fileDownloadURL) {
+          return { error: 'Missing fileDownloadURL' };
+        }
+
+        if (!fileDownloadURL.startsWith(`http://${(this.options.storageAdapter as any).options.bucket}`) && !fileDownloadURL.startsWith(`https://${(this.options.storageAdapter as any).options.bucket}`)) {
+          return { error: 'Invalid fileDownloadURL ' };
+        }
+
+        const upstream = await fetch(fileDownloadURL);
+        if (!upstream.ok || !upstream.body) {
+          return { error: `Failed to download file (status ${upstream.status})` };
+        }
+
+        const contentType = upstream.headers.get('content-type') || 'application/octet-stream';
+        const contentLength = upstream.headers.get('content-length');
+        const contentDisposition = upstream.headers.get('content-disposition');
+
+        response.setHeader('Content-Type', contentType);
+        if (contentLength) response.setHeader('Content-Length', contentLength);
+        if (contentDisposition) response.setHeader('Content-Disposition', contentDisposition);
+
+        //@ts-ignore Node 18+: convert Web stream to Node stream and pipe to response
+        Readable.fromWeb(upstream.body).pipe(response.blobStream());
+        return null;
+      },
+    });
+
   }
 
 }