@adminforth/upload 2.0.0 → 2.1.0

package/README.md

@@ -4,4 +4,4 @@
 
 Allows to upload files to Amazon S3 bucket from adminforth application.
 
-## For usage, see [AdminForth Upload Documentation](https://adminforth.dev/docs/tutorial/Plugins/upload/)
+## For usage, see [AdminForth Upload Documentation](https://adminforth.dev/docs/tutorial/Plugins/upload/)

package/build.log

@@ -11,5 +11,5 @@ custom/preview.vue
 custom/tsconfig.json
 custom/uploader.vue
 
-sent 43,158 bytes  received 134 bytes  86,584.00 bytes/sec
-total size is 42,676  speedup is 0.99
+sent 46,094 bytes  received 134 bytes  92,456.00 bytes/sec
+total size is 45,612  speedup is 0.99

package/custom/imageGenerator.vue

@@ -21,10 +21,41 @@
             </div>
             <!-- Modal body -->
             <div class="p-4 md:p-5 space-y-4">
-              <textarea id="message" rows="3" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
-                :placeholder="$t('Prompt which will be passed to AI network')" v-model="prompt"
+              <!-- PROMPT TEXTAREA -->
+              <!-- Textarea -->
+              <textarea
+                id="message"
+                rows="3"
+                class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                :placeholder="$t('Prompt which will be passed to AI network')"
+                v-model="prompt"
                 :title="$t('Prompt which will be passed to AI network')"
-                ></textarea>
+              ></textarea>
+
+              <!-- Thumbnails -->
+              <div class="mt-2 flex flex-wrap gap-2">
+                <img
+                  v-for="(img, idx) in attachmentFiles"
+                  :key="idx"
+                  :src="img"
+                  class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition"
+                  :alt="`Generated image ${idx + 1}`"
+                  @click="zoomImage(img)"
+                />
+              </div>
+
+              <!-- Fullscreen Modal -->
+              <div
+                v-if="zoomedImage"
+                class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80"
+                @click.self="closeZoom"
+              >
+                <img
+                  :src="zoomedImage"
+                  ref="zoomedImg"
+                  class="max-w-full max-h-full rounded-lg object-contain cursor-grab"
+              />
+            </div>
 
               <div class="flex flex-col items-center justify-center w-full relative">
                 <div 
@@ -144,7 +175,7 @@
 
 <script setup lang="ts">
 
-import { ref, onMounted, nextTick, Ref, h, computed } from 'vue'
+import { ref, onMounted, nextTick, Ref, h, computed, watch, reactive } from 'vue'
 import { Carousel } from 'flowbite';
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
@@ -158,6 +189,7 @@ const emit = defineEmits(['close', 'uploadImage']);
 const props = defineProps(['meta', 'record']);
 const images = ref([]);
 const loading = ref(false);
+const attachmentFiles = ref<string[]>([])
 
 function minifyField(field: string): string {
   if (field.length > 100) {
@@ -167,7 +199,7 @@ function minifyField(field: string): string {
 }
 
 const caurosel = ref(null);
-onMounted(() => {
+onMounted(async () => {
   // Initialize carousel
   const context = {
     field: props.meta.pathColumnLabel,
@@ -203,7 +235,24 @@ onMounted(() => {
   prompt.value = template.replace(regex, (_, field) => {
     return context[field.trim()] || '';
   });
+  
+  const recordId = props.record[props.meta.recorPkFieldName];
+  if (!recordId) return;
+
+  try {
+    const resp = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get_attachment_files`,
+      method: 'POST',
+      body: { recordId },
+    });
 
+    if (resp?.files?.length) {
+      attachmentFiles.value = resp.files;
+      console.log('attachmentFiles', attachmentFiles.value);
+    }
+  } catch (err) {
+    console.error('Failed to fetch attachment files', err);
+  }
 });
 
 async function slide(direction: number) {
@@ -357,6 +406,27 @@ async function generateImages() {
   loading.value = false;
 }
 
+import mediumZoom from 'medium-zoom'
 
+const zoomedImage = ref(null)
+const zoomedImg = ref(null)
+
+function zoomImage(img) {
+  zoomedImage.value = img
+}
 
+function closeZoom() {
+  zoomedImage.value = null
+}
+
+watch(zoomedImage, async (val) => {
+  await nextTick()
+  if (val && zoomedImg.value) {
+    mediumZoom(zoomedImg.value, {
+      margin: 24,
+      background: 'rgba(0, 0, 0, 0.9)',
+      scrollOffset: 150
+    }).show()
+  }
+})
 </script>

package/custom/preview.vue

@@ -58,7 +58,7 @@
   } */
 </style>
 <script setup>
-import { ref, computed , onMounted, watch} from 'vue'
+import { ref, computed , onMounted, watch, nextTick} from 'vue'
 import mediumZoom from 'medium-zoom'
 import { useRoute } from 'vue-router'
 
@@ -71,6 +71,30 @@ const props = defineProps({
   meta: Object,
 })
 
+const trueContentType  = ref(null);
+
+onMounted(async () => {
+   // try to get HEAD request
+   try {
+    const response = await fetch(url.value, {
+      method: 'HEAD',
+    });
+    const ct = response.headers.get('Content-Type');
+    if (ct) {
+      trueContentType.value = ct;
+    }
+  } catch (e) {
+    console.error('fetch error for getting content type, please check CORS allowed for HEAD request', e);
+  }
+});
+
+const contentType = computed(() => {
+  if (trueContentType.value) {
+    return trueContentType.value;
+  }
+  return guessedContentType.value;
+});
+
 const route = useRoute();
 const url = computed(() => {
   return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
@@ -95,11 +119,11 @@ const minWidth = computed(() => {
 });
 // since we have no way to know the content type of the file, we will try to guess it from extension
 // for better experience probably we should check whether user saves content type in the database and use it here
-const contentType = computed(() => {
+const guessedContentType = computed(() => {
   if (!url.value) {
     return null;
   }
-  const u = new URL(url.value);
+  const u = new URL(url.value, url.value.startsWith('http') ? undefined : location.origin);
   return guessContentType(u.pathname);
 });
 
@@ -117,14 +141,18 @@ function guessContentType(url) {
 }
 
 
-onMounted(async () => {
-  
-  if (contentType.value?.startsWith('image')) {
+watch([contentType], async ([contentType]) => {
+  // since content type might change after true guessing (HEAD request might be slow) we need to try initializing zoom again
+  if (zoom.value) {
+    zoom.value.detach();
+  }
+  await nextTick();
+  if (contentType?.startsWith('image')) {
     zoom.value = mediumZoom(img.value, {
       margin: 24,
     });
   }
 
-});
+}, { immediate: true });
 
 </script>

package/custom/uploader.vue

@@ -273,7 +273,7 @@ const onFileChange = async (e) => {
     });
     if (!success) {
       adminforth.alert({
-        messageHtml: `<div>${t('Sorry but the file was not uploaded because of S3 Request Error:')}</div>
+        messageHtml: `<div>${t('Sorry but the file was not uploaded because of internal storage Request Error:')}</div>
         <pre style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;">${
           xhr.responseText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
         }</pre>`,

package/dist/custom/imageGenerator.vue

@@ -21,10 +21,41 @@
             </div>
             <!-- Modal body -->
             <div class="p-4 md:p-5 space-y-4">
-              <textarea id="message" rows="3" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 
-                :placeholder="$t('Prompt which will be passed to AI network')" v-model="prompt"
+              <!-- PROMPT TEXTAREA -->
+              <!-- Textarea -->
+              <textarea
+                id="message"
+                rows="3"
+                class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                :placeholder="$t('Prompt which will be passed to AI network')"
+                v-model="prompt"
                 :title="$t('Prompt which will be passed to AI network')"
-                ></textarea>
+              ></textarea>
+
+              <!-- Thumbnails -->
+              <div class="mt-2 flex flex-wrap gap-2">
+                <img
+                  v-for="(img, idx) in attachmentFiles"
+                  :key="idx"
+                  :src="img"
+                  class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition"
+                  :alt="`Generated image ${idx + 1}`"
+                  @click="zoomImage(img)"
+                />
+              </div>
+
+              <!-- Fullscreen Modal -->
+              <div
+                v-if="zoomedImage"
+                class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-80"
+                @click.self="closeZoom"
+              >
+                <img
+                  :src="zoomedImage"
+                  ref="zoomedImg"
+                  class="max-w-full max-h-full rounded-lg object-contain cursor-grab"
+              />
+            </div>
 
               <div class="flex flex-col items-center justify-center w-full relative">
                 <div 
@@ -144,7 +175,7 @@
 
 <script setup lang="ts">
 
-import { ref, onMounted, nextTick, Ref, h, computed } from 'vue'
+import { ref, onMounted, nextTick, Ref, h, computed, watch, reactive } from 'vue'
 import { Carousel } from 'flowbite';
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
@@ -158,6 +189,7 @@ const emit = defineEmits(['close', 'uploadImage']);
 const props = defineProps(['meta', 'record']);
 const images = ref([]);
 const loading = ref(false);
+const attachmentFiles = ref<string[]>([])
 
 function minifyField(field: string): string {
   if (field.length > 100) {
@@ -167,7 +199,7 @@ function minifyField(field: string): string {
 }
 
 const caurosel = ref(null);
-onMounted(() => {
+onMounted(async () => {
   // Initialize carousel
   const context = {
     field: props.meta.pathColumnLabel,
@@ -203,7 +235,24 @@ onMounted(() => {
   prompt.value = template.replace(regex, (_, field) => {
     return context[field.trim()] || '';
   });
+  
+  const recordId = props.record[props.meta.recorPkFieldName];
+  if (!recordId) return;
+
+  try {
+    const resp = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get_attachment_files`,
+      method: 'POST',
+      body: { recordId },
+    });
 
+    if (resp?.files?.length) {
+      attachmentFiles.value = resp.files;
+      console.log('attachmentFiles', attachmentFiles.value);
+    }
+  } catch (err) {
+    console.error('Failed to fetch attachment files', err);
+  }
 });
 
 async function slide(direction: number) {
@@ -357,6 +406,27 @@ async function generateImages() {
   loading.value = false;
 }
 
+import mediumZoom from 'medium-zoom'
 
+const zoomedImage = ref(null)
+const zoomedImg = ref(null)
+
+function zoomImage(img) {
+  zoomedImage.value = img
+}
 
+function closeZoom() {
+  zoomedImage.value = null
+}
+
+watch(zoomedImage, async (val) => {
+  await nextTick()
+  if (val && zoomedImg.value) {
+    mediumZoom(zoomedImg.value, {
+      margin: 24,
+      background: 'rgba(0, 0, 0, 0.9)',
+      scrollOffset: 150
+    }).show()
+  }
+})
 </script>

package/dist/custom/preview.vue

@@ -58,7 +58,7 @@
   } */
 </style>
 <script setup>
-import { ref, computed , onMounted, watch} from 'vue'
+import { ref, computed , onMounted, watch, nextTick} from 'vue'
 import mediumZoom from 'medium-zoom'
 import { useRoute } from 'vue-router'
 
@@ -71,6 +71,30 @@ const props = defineProps({
   meta: Object,
 })
 
+const trueContentType  = ref(null);
+
+onMounted(async () => {
+   // try to get HEAD request
+   try {
+    const response = await fetch(url.value, {
+      method: 'HEAD',
+    });
+    const ct = response.headers.get('Content-Type');
+    if (ct) {
+      trueContentType.value = ct;
+    }
+  } catch (e) {
+    console.error('fetch error for getting content type, please check CORS allowed for HEAD request', e);
+  }
+});
+
+const contentType = computed(() => {
+  if (trueContentType.value) {
+    return trueContentType.value;
+  }
+  return guessedContentType.value;
+});
+
 const route = useRoute();
 const url = computed(() => {
   return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
@@ -95,11 +119,11 @@ const minWidth = computed(() => {
 });
 // since we have no way to know the content type of the file, we will try to guess it from extension
 // for better experience probably we should check whether user saves content type in the database and use it here
-const contentType = computed(() => {
+const guessedContentType = computed(() => {
   if (!url.value) {
     return null;
   }
-  const u = new URL(url.value);
+  const u = new URL(url.value, url.value.startsWith('http') ? undefined : location.origin);
   return guessContentType(u.pathname);
 });
 
@@ -117,14 +141,18 @@ function guessContentType(url) {
 }
 
 
-onMounted(async () => {
-  
-  if (contentType.value?.startsWith('image')) {
+watch([contentType], async ([contentType]) => {
+  // since content type might change after true guessing (HEAD request might be slow) we need to try initializing zoom again
+  if (zoom.value) {
+    zoom.value.detach();
+  }
+  await nextTick();
+  if (contentType?.startsWith('image')) {
     zoom.value = mediumZoom(img.value, {
       margin: 24,
     });
   }
 
-});
+}, { immediate: true });
 
 </script>

package/dist/custom/uploader.vue

@@ -273,7 +273,7 @@ const onFileChange = async (e) => {
     });
     if (!success) {
       adminforth.alert({
-        messageHtml: `<div>${t('Sorry but the file was not uploaded because of S3 Request Error:')}</div>
+        messageHtml: `<div>${t('Sorry but the file was not uploaded because of internal storage Request Error:')}</div>
         <pre style="white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; max-width: 100%;">${
           xhr.responseText.replace(/</g, '&lt;').replace(/>/g, '&gt;')
         }</pre>`,

package/dist/index.js

@@ -24,7 +24,8 @@ export default class UploadPlugin extends AdminForthPlugin {
     }
     setupLifecycleRule() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.options.storageAdapter.setupLifecycle();
+            const adapterUserUniqueRepresentation = `${this.resourceConfig.resourceId}-${this.pluginInstanceId}`;
+            this.options.storageAdapter.setupLifecycle(adapterUserUniqueRepresentation);
         });
     }
     genPreviewUrl(record) {
@@ -45,6 +46,7 @@ export default class UploadPlugin extends AdminForthPlugin {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            this.resourceConfig = resourceConfig;
             // after column to store the path of the uploaded file, add new VirtualColumn,
             // show only in edit and create views
             // use component uploader.vue
@@ -316,7 +318,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                     if (!record) {
                         return { error: `Record with id ${recordId} not found` };
                     }
-                    attachmentFiles = this.options.generation.attachFiles({ record, adminUser });
+                    attachmentFiles = yield this.options.generation.attachFiles({ record, adminUser });
                     // if files is not array, make it array
                     if (!Array.isArray(attachmentFiles)) {
                         attachmentFiles = [attachmentFiles];
@@ -360,5 +362,26 @@ export default class UploadPlugin extends AdminForthPlugin {
                 return null;
             })
         });
+        server.endpoint({
+            method: 'POST',
+            path: `/plugin/${this.pluginInstanceId}/get_attachment_files`,
+            handler: (_a) => __awaiter(this, [_a], void 0, function* ({ body, adminUser }) {
+                var _b;
+                const { recordId } = body;
+                if (!recordId)
+                    return { error: 'Missing recordId' };
+                const record = yield this.adminforth.resource(this.resourceConfig.resourceId).get([
+                    Filters.EQ((_b = this.resourceConfig.columns.find((col) => col.primaryKey)) === null || _b === void 0 ? void 0 : _b.name, recordId),
+                ]);
+                if (!record)
+                    return { error: 'Record not found' };
+                if (!this.options.generation.attachFiles)
+                    return { files: [] };
+                const files = yield this.options.generation.attachFiles({ record, adminUser });
+                return {
+                    files: Array.isArray(files) ? files : [files],
+                };
+            }),
+        });
     }
 }

package/index.ts

@@ -14,6 +14,8 @@ export default class UploadPlugin extends AdminForthPlugin {
   totalCalls: number;
   totalDuration: number;
 
+  resourceConfig: AdminForthResource;
+
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
     this.options = options;
@@ -28,7 +30,8 @@ export default class UploadPlugin extends AdminForthPlugin {
   }
 
   async setupLifecycleRule() {
-    this.options.storageAdapter.setupLifecycle();
+    const adapterUserUniqueRepresentation = `${this.resourceConfig.resourceId}-${this.pluginInstanceId}`;
+    this.options.storageAdapter.setupLifecycle(adapterUserUniqueRepresentation);
   }
 
   async genPreviewUrl(record: any) {
@@ -43,6 +46,7 @@ export default class UploadPlugin extends AdminForthPlugin {
 
   async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
     super.modifyResourceConfig(adminforth, resourceConfig);
+    this.resourceConfig = resourceConfig;
     // after column to store the path of the uploaded file, add new VirtualColumn,
     // show only in edit and create views
     // use component uploader.vue
@@ -361,7 +365,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             return { error: `Record with id ${recordId} not found` };
           }
           
-          attachmentFiles = this.options.generation.attachFiles({ record, adminUser });
+          attachmentFiles = await this.options.generation.attachFiles({ record, adminUser });
           // if files is not array, make it array
           if (!Array.isArray(attachmentFiles)) {
             attachmentFiles = [attachmentFiles];
@@ -419,6 +423,30 @@ export default class UploadPlugin extends AdminForthPlugin {
         return null
       }
     });
+    
+    server.endpoint({
+      method: 'POST',
+      path: `/plugin/${this.pluginInstanceId}/get_attachment_files`,
+      handler: async ({ body, adminUser }) => {
+        const { recordId } = body;
+    
+        if (!recordId) return { error: 'Missing recordId' };
+    
+        const record = await this.adminforth.resource(this.resourceConfig.resourceId).get([
+          Filters.EQ(this.resourceConfig.columns.find((col: any) => col.primaryKey)?.name, recordId),
+        ]);
+    
+        if (!record) return { error: 'Record not found' };
+    
+        if (!this.options.generation.attachFiles) return { files: [] };
+    
+        const files = await this.options.generation.attachFiles({ record, adminUser });
+    
+        return {
+          files: Array.isArray(files) ? files : [files],
+        };
+      },
+    });
 
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/upload",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Plugin for uploading files for adminforth",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/types.ts

@@ -131,7 +131,7 @@ export type PluginOptions = {
     attachFiles?: ({ record, adminUser }: {
       record: any,
       adminUser: AdminUser,
-    }) => string[],
+    }) => string[] | Promise<string[]>,
 
     
     /**