Merge pull request #19 from devforth/feature/AdminForth/1208/add-ability-to-attachremove-im

yaroslav8765 · web-flow · commit df60b0e8c2bf · 2026-02-03T16:15:27.000+02:00
Feature/admin forth/1208/add ability to attachremove im
diff --git a/custom/imageGenerator.vue b/custom/imageGenerator.vue
@@ -34,14 +34,43 @@
 
               <!-- 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 class="group relative" v-for="(img, key) in requestAttachmentFilesUrls">
+                  <img
+                    :key="key"
+                    :src="img"
+                    class="w-20 h-20 object-cover rounded cursor-pointer border hover:border-blue-500 transition"
+                    :alt="`Generated image ${key + 1}`"
+                    @click="zoomImage(img)"
+                  />
+                  <div 
+                    class="opacity-0 group-hover:opacity-100 flex items-center justify-center w-5 h-5 bg-black absolute -top-2 -end-2 rounded-full border-2 border-white cursor-pointer hover:border-gray-300 hover:scale-110"
+                    @click="removeFileFromList(key)"  
+                  >
+                    <Tooltip class="absolute top-0 end-0">
+                      <div>
+                        <div class="w-4 h-4 absolute"></div>
+                        <IconCloseOutline class="w-3 h-3 text-white hover:text-gray-300" />
+                      </div>
+                      <template #tooltip>
+                        Remove file
+                      </template>
+                    </Tooltip>
+                  </div>
+                </div>
+                <input 
+                  ref="fileInput"
+                  class="hidden"
+                  type="file"
+                  @change="handleAddFile"
+                  accept="image/*" 
                 />
+                <button v-if="!uploading" @click="fileInput?.click()" type="button" class="relative group hover:border-gray-500 transition border-gray-300 flex items-center justify-center w-20 h-20 border-2 border-dashed rounded-md">
+                  <div class="flex flex-col items-center justify-center gap-2 mt-4 mb-4">
+                    <IconCloseOutline class="group-hover:text-gray-500 transition rotate-45 w-6 h-6 text-gray-300 hover:text-gray-300" />
+                    <p class="text-gray-300 group-hover:text-gray-500 transition bottom-0">Ctrl + v</p>
+                  </div>
+                </button>
+                <Skeleton v-else type="image" class="w-20 h-20" />
               </div>
 
               <!-- Fullscreen Modal -->
@@ -175,38 +204,39 @@
 
 <script setup lang="ts">
 
-import { ref, onMounted, nextTick, Ref, h, computed, watch, reactive } from 'vue'
+import { ref, onMounted, nextTick, Ref, watch, onUnmounted } from 'vue'
 import { Carousel } from 'flowbite';
 import { callAdminForthApi } from '@/utils';
 import { useI18n } from 'vue-i18n';
 import adminforth from '@/adminforth';
 import { ProgressBar } from '@/afcl';
 import * as Handlebars from 'handlebars';
+import { IconCloseOutline } from '@iconify-prerendered/vue-flowbite';
+import { Tooltip, Skeleton } from '@/afcl'
+import { useRoute } from 'vue-router';
+
+const { t: $t, t } = useI18n();
+const route = useRoute();
 
-const { t: $t } = useI18n();
 
 const prompt = ref('');
 const emit = defineEmits(['close', 'uploadImage']);
-const props = defineProps(['meta', 'record']);
+const props = defineProps({
+  meta: Object,
+  record: Object,
+  humanifySize: Function,
+});
 const images = ref([]);
 const loading = ref(false);
 const attachmentFiles = ref<string[]>([])
+const requestAttachmentFiles = ref<Blob[] | null>([]);
+const requestAttachmentFilesUrls = ref<string[]>([]);
 const stopGeneration = ref(false);
-
-function minifyField(field: string): string {
-  if (field.length > 100) {
-    return field.slice(0, 100) + '...';
-  }
-  return field;
-}
+const fileInput = ref<HTMLInputElement | null>(null);
 
 const caurosel = ref(null);
 onMounted(async () => {
   // Initialize carousel
-  const context = {
-    field: props.meta.pathColumnLabel,
-    resource: props.meta.resourceLabel,
-  }; 
   let template = '';
   if (props.meta.generationPrompt) {
     template = props.meta.generationPrompt;
@@ -230,13 +260,20 @@ onMounted(async () => {
     });
 
     if (resp?.files?.length) {
-      attachmentFiles.value = resp.files;
+      requestAttachmentFilesUrls.value = resp.files;
     }
   } catch (err) {
     console.error('Failed to fetch attachment files', err);
   }
+
+  for ( const fileUrl in requestAttachmentFilesUrls.value ) {
+    const image = await fetch(fileUrl);
+    const imageBlob = await image.blob();
+    requestAttachmentFiles.value!.push(imageBlob);
+  }
 });
 
+
 async function slide(direction: number) {
   if (!caurosel.value) return;
   const curPos = caurosel.value.getActiveItem().position;
@@ -323,11 +360,13 @@ async function generateImages() {
       method: 'POST',
       body: {
         prompt: prompt.value,
-        recordId: props.record[props.meta.recorPkFieldName]
+        recordId: props.record[props.meta.recorPkFieldName],
+        requestAttachmentFiles: requestAttachmentFilesUrls.value,
       },
     });
   } catch (e) {
     console.error(e);
+    return;
   }
 
   if (resp?.error) {
@@ -451,4 +490,129 @@ watch(zoomedImage, async (val) => {
     }).show()
   }
 })
+
+async function handleAddFile(event, clipboardFile = null) {
+  if (clipboardFile) {
+    clipboardFile = renameFile(clipboardFile, `pasted_image_${Date.now()}.png`);
+  }
+  const files = event?.target?.files || (clipboardFile ? [clipboardFile] : []);
+  for (let i = 0; i < files.length; i++) {
+    if (requestAttachmentFiles.value.find((f: any) => f.name === files[i].name)) {
+      adminforth.alert({
+        message: $t('File with the same name already added'),
+        variant: 'warning',
+        timeout: 5000,
+      });
+      continue;
+    }
+    const file = files[i];
+    const fileUrl = await uploadFile(file);
+    if (!fileUrl) continue;
+    requestAttachmentFiles.value!.push(file);
+    requestAttachmentFilesUrls.value.push(fileUrl);
+  }
+  fileInput.value!.value = '';
+}
+
+function removeFileFromList(index: number) {
+  requestAttachmentFiles.value!.splice(index, 1);
+  requestAttachmentFilesUrls.value.splice(index, 1);
+}
+
+const uploading = ref(false);
+
+async function uploadFile(file: any): Promise<string> {
+  const { name, size, type } = file;
+
+  let imgPreview = '';
+
+  const extension = name.split('.').pop();
+  const nameNoExtension = name.replace(`.${extension}`, '');
+
+  if (props.meta.maxFileSize && size > props.meta.maxFileSize) {
+    adminforth.alert({
+      message: t('Sorry but the file size {size} is too large. Please upload a file with a maximum size of {maxFileSize}', {
+        size: props.humanifySize(size),
+        maxFileSize: props.humanifySize(props.meta.maxFileSize),
+      }),
+      variant: 'danger'
+    });
+    return;
+  }
+
+  try {
+    uploading.value = true;
+    const { uploadUrl, uploadExtraParams, filePath, error, previewUrl } = await callAdminForthApi({
+        path: `/plugin/${props.meta.pluginInstanceId}/get_file_upload_url`,
+        method: 'POST',
+        body: {
+          originalFilename: nameNoExtension,
+          contentType: type,
+          size,
+          originalExtension: extension,
+          recordPk: route?.params?.primaryKey,
+        },
+    });
+    if (error) {
+      adminforth.alert({
+        message: t('File was not uploaded because of error: {error}', { error }),
+        variant: 'danger'
+      });
+      imgPreview = null;
+      return;
+    }
+
+    const xhr = new XMLHttpRequest();
+    const success = await new Promise((resolve) => {
+      xhr.addEventListener('loadend', () => {
+        const success = xhr.readyState === 4 && xhr.status === 200;
+        // try to read response
+        resolve(success);
+      });
+      xhr.open('PUT', uploadUrl, true);
+      xhr.setRequestHeader('Content-Type', type);
+      uploadExtraParams && Object.entries(uploadExtraParams).forEach(([key, value]: [string, string]) => {
+        xhr.setRequestHeader(key, value);
+      })
+      xhr.send(file);
+    });
+
+    if (success) {
+      imgPreview = previewUrl;    
+    } else {
+      throw new Error('File upload failed');
+    }
+  } catch (err) {
+    uploading.value = false;
+    console.error('File upload failed', err);
+  }
+  uploading.value = false;
+  return imgPreview;
+}
+
+async function uploadImageOnPaste(event) {
+  const items = event.clipboardData?.items;
+  if (!items) return;
+
+  for (let item of items) {
+    if (item.type.startsWith('image/')) {
+      const file = item.getAsFile();
+      if (file) {
+        await handleAddFile(null, file);
+      }
+    }
+  }
+}
+
+function renameFile(file, newName) {
+  return new File([file], newName, { type: file.type });
+}
+
+onMounted(() => {
+  document.addEventListener('paste', uploadImageOnPaste);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('paste', uploadImageOnPaste);
+});
 </script>
diff --git a/custom/uploader.vue b/custom/uploader.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="relative w-full">
       <ImageGenerator v-if="showImageGen" @close="showImageGen = false" :record="record" :meta="meta" 
-        @uploadImage="uploadGeneratedImage"  
+        @uploadImage="uploadGeneratedImage"
+        :humanifySize="humanifySize"  
       ></ImageGenerator>
 
       <button v-if="meta.generateImages" 
diff --git a/index.ts b/index.ts
@@ -104,39 +104,14 @@ export default class UploadPlugin extends AdminForthPlugin {
     return this.callStorageAdapter('markKeyForDeletion', 'markKeyForDeletation', filePath);
   }
 
-  private async generateImages(jobId: string, prompt: string, recordId: any, adminUser: any, headers: any) {
+  private async generateImages(jobId: string, prompt: string,requestAttachmentFiles: string[], recordId: any, adminUser: any, headers: any) {
     if (this.options.generation.rateLimit?.limit) {
-      // rate limit
-      // const { error } = RateLimiter.checkRateLimit(
-      //   this.pluginInstanceId, 
-      //   this.options.generation.rateLimit?.limit,
-      //   this.adminforth.auth.getClientIp(headers),
-      // );
       if (!await this.rateLimiter.consume(`${this.pluginInstanceId}-${this.adminforth.auth.getClientIp(headers)}`)) {
         jobs.set(jobId, { status: "failed", error: this.options.generation.rateLimit.errorMessage });
         return { error: this.options.generation.rateLimit.errorMessage };
       }
     }
-    let attachmentFiles = [];
-    if (this.options.generation.attachFiles) {
-      // TODO - does it require additional allowed action to check this record id has access to get the image?
-      // or should we mention in docs that user should do validation in method itself
-      const record = await this.adminforth.resource(this.resourceConfig.resourceId).get(
-        [Filters.EQ(this.resourceConfig.columns.find(c => c.primaryKey)?.name, recordId)]
-      );
-
-
-      if (!record) {
-        return { error: `Record with id ${recordId} not found` };
-      }
-      
-      attachmentFiles = await this.options.generation.attachFiles({ record, adminUser });
-      // if files is not array, make it array
-      if (!Array.isArray(attachmentFiles)) {
-        attachmentFiles = [attachmentFiles];
-      }
-
-    }
+    let attachmentFiles = requestAttachmentFiles;
     
     let error: string | undefined = undefined;
 
@@ -448,12 +423,11 @@ export default class UploadPlugin extends AdminForthPlugin {
       method: 'POST',
       path: `/plugin/${this.pluginInstanceId}/create-image-generation-job`,
       handler: async ({ body, adminUser, headers }) => {
-        const { prompt, recordId } = body;
-
+        const { prompt, recordId, requestAttachmentFiles } = body;
         const jobId = randomUUID();
         jobs.set(jobId, { status: "in_progress" });
 
-        this.generateImages(jobId, prompt, recordId, adminUser, headers);
+        this.generateImages(jobId, prompt, requestAttachmentFiles, recordId, adminUser, headers);
         setTimeout(() => jobs.delete(jobId), 1_800_000);
         setTimeout(() => {jobs.set(jobId, { status: "timeout" });}, 300_000);
 
