@adminforth/upload 2.11.1 → 2.13.0

package/build.log

@@ -11,5 +11,5 @@ custom/preview.vue
 custom/tsconfig.json
 custom/uploader.vue
 
-sent 54,028 bytes  received 134 bytes  108,324.00 bytes/sec
-total size is 53,539  speedup is 0.99
+sent 59,817 bytes  received 134 bytes  119,902.00 bytes/sec
+total size is 59,335  speedup is 0.99

package/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>

package/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" 

package/dist/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>

package/dist/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" 

package/dist/index.js

@@ -90,35 +90,16 @@ export default class UploadPlugin extends AdminForthPlugin {
     markKeyForDeletion(filePath) {
         return this.callStorageAdapter('markKeyForDeletion', 'markKeyForDeletation', filePath);
     }
-    generateImages(jobId, prompt, recordId, adminUser, headers) {
+    generateImages(jobId, prompt, requestAttachmentFiles, recordId, adminUser, headers) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b;
+            var _a;
             if ((_a = this.options.generation.rateLimit) === null || _a === void 0 ? void 0 : _a.limit) {
-                // rate limit
-                // const { error } = RateLimiter.checkRateLimit(
-                //   this.pluginInstanceId, 
-                //   this.options.generation.rateLimit?.limit,
-                //   this.adminforth.auth.getClientIp(headers),
-                // );
                 if (!(yield 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 = yield this.adminforth.resource(this.resourceConfig.resourceId).get([Filters.EQ((_b = this.resourceConfig.columns.find(c => c.primaryKey)) === null || _b === void 0 ? void 0 : _b.name, recordId)]);
-                if (!record) {
-                    return { error: `Record with id ${recordId} not found` };
-                }
-                attachmentFiles = yield 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 = undefined;
             const STUB_MODE = false;
             const images = yield Promise.all((new Array(this.options.generation.countToGenerate)).fill(0).map(() => __awaiter(this, void 0, void 0, function* () {
@@ -390,10 +371,10 @@ export default class UploadPlugin extends AdminForthPlugin {
             method: 'POST',
             path: `/plugin/${this.pluginInstanceId}/create-image-generation-job`,
             handler: (_a) => __awaiter(this, [_a], void 0, function* ({ 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), 1800000);
                 setTimeout(() => { jobs.set(jobId, { status: "timeout" }); }, 300000);
                 return { ok: true, jobId };
@@ -485,7 +466,7 @@ export default class UploadPlugin extends AdminForthPlugin {
     /*
      * Uploads a file from a buffer, creates a record in the resource, and returns the file path and preview URL.
      */
-    uploadFromBuffer(_a) {
+    uploadFromBufferToNewRecord(_a) {
         return __awaiter(this, arguments, void 0, function* ({ filename, contentType, buffer, adminUser, extra, recordAttributes, }) {
             var _b;
             if (!filename || !contentType || !buffer) {
@@ -554,7 +535,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             if (!this.resourceConfig) {
                 throw new Error('resourceConfig is not initialized yet');
             }
-            const { error: createError } = yield this.adminforth.createResourceRecord({
+            const { error: createError, createdRecord, newRecordId } = yield this.adminforth.createResourceRecord({
                 resource: this.resourceConfig,
                 record: Object.assign(Object.assign({}, (recordAttributes !== null && recordAttributes !== void 0 ? recordAttributes : {})), { [this.options.pathColumnName]: filePath }),
                 adminUser,
@@ -569,6 +550,134 @@ export default class UploadPlugin extends AdminForthPlugin {
                 }
                 throw new Error(`Error creating record after upload: ${createError}`);
             }
+            const pkColumn = this.resourceConfig.columns.find((column) => column.primaryKey);
+            const pkName = pkColumn === null || pkColumn === void 0 ? void 0 : pkColumn.name;
+            const newRecordPk = newRecordId !== null && newRecordId !== void 0 ? newRecordId : (pkName && createdRecord ? createdRecord[pkName] : undefined);
+            let previewUrl;
+            if ((_b = this.options.preview) === null || _b === void 0 ? void 0 : _b.previewUrl) {
+                previewUrl = this.options.preview.previewUrl({ filePath });
+            }
+            else {
+                previewUrl = yield this.options.storageAdapter.getDownloadUrl(filePath, 1800);
+            }
+            return {
+                path: filePath,
+                previewUrl,
+                newRecordPk,
+            };
+        });
+    }
+    /*
+     * Uploads a file from a buffer and updates an existing record's path column.
+     * If the newly generated storage path would be the same as the current path,
+     * throws an error to avoid potential caching issues.
+     */
+    uploadFromBufferToExistingRecord(_a) {
+        return __awaiter(this, arguments, void 0, function* ({ recordId, filename, contentType, buffer, adminUser, extra, }) {
+            var _b;
+            if (recordId === undefined || recordId === null) {
+                throw new Error('recordId is required');
+            }
+            if (!filename || !contentType || !buffer) {
+                throw new Error('filename, contentType and buffer are required');
+            }
+            if (!this.resourceConfig) {
+                throw new Error('resourceConfig is not initialized yet');
+            }
+            const pkColumn = this.resourceConfig.columns.find((column) => column.primaryKey);
+            const pkName = pkColumn === null || pkColumn === void 0 ? void 0 : pkColumn.name;
+            if (!pkName) {
+                throw new Error('Primary key column not found in resource configuration');
+            }
+            const existingRecord = yield this.adminforth
+                .resource(this.resourceConfig.resourceId)
+                .get([Filters.EQ(pkName, recordId)]);
+            if (!existingRecord) {
+                throw new Error(`Record with id ${recordId} not found`);
+            }
+            const lastDotIndex = filename.lastIndexOf('.');
+            if (lastDotIndex === -1) {
+                throw new Error('filename must contain an extension');
+            }
+            const originalExtension = filename.substring(lastDotIndex + 1).toLowerCase();
+            const originalFilename = filename.substring(0, lastDotIndex);
+            if (this.options.allowedFileExtensions && !this.options.allowedFileExtensions.includes(originalExtension)) {
+                throw new Error(`File extension "${originalExtension}" is not allowed, allowed extensions are: ${this.options.allowedFileExtensions.join(', ')}`);
+            }
+            let nodeBuffer;
+            if (Buffer.isBuffer(buffer)) {
+                nodeBuffer = buffer;
+            }
+            else if (buffer instanceof ArrayBuffer) {
+                nodeBuffer = Buffer.from(buffer);
+            }
+            else if (ArrayBuffer.isView(buffer)) {
+                nodeBuffer = Buffer.from(buffer.buffer, buffer.byteOffset, buffer.byteLength);
+            }
+            else {
+                throw new Error('Unsupported buffer type');
+            }
+            const size = nodeBuffer.byteLength;
+            if (this.options.maxFileSize && size > this.options.maxFileSize) {
+                throw new Error(`File size ${size} is too large. Maximum allowed size is ${this.options.maxFileSize}`);
+            }
+            const existingValue = existingRecord[this.options.pathColumnName];
+            const existingPaths = this.normalizePaths(existingValue);
+            const filePath = this.options.filePath({
+                originalFilename,
+                originalExtension,
+                contentType,
+                record: existingRecord,
+            });
+            if (filePath.startsWith('/')) {
+                throw new Error('s3Path should not start with /, please adjust s3path function to not return / at the start of the path');
+            }
+            if (existingPaths.includes(filePath)) {
+                throw new Error('New file path cannot be the same as existing path to avoid caching issues');
+            }
+            const { uploadUrl, uploadExtraParams } = yield this.options.storageAdapter.getUploadSignedUrl(filePath, contentType, 1800);
+            const headers = {
+                'Content-Type': contentType,
+            };
+            if (uploadExtraParams) {
+                Object.entries(uploadExtraParams).forEach(([key, value]) => {
+                    headers[key] = value;
+                });
+            }
+            const resp = yield fetch(uploadUrl, {
+                method: 'PUT',
+                headers,
+                body: nodeBuffer,
+            });
+            if (!resp.ok) {
+                let bodyText = '';
+                try {
+                    bodyText = yield resp.text();
+                }
+                catch (e) {
+                    // ignore
+                }
+                throw new Error(`Upload failed with status ${resp.status}: ${bodyText}`);
+            }
+            const { error: updateError } = yield this.adminforth.updateResourceRecord({
+                resource: this.resourceConfig,
+                recordId,
+                oldRecord: existingRecord,
+                adminUser,
+                extra,
+                updates: {
+                    [this.options.pathColumnName]: filePath,
+                },
+            });
+            if (updateError) {
+                try {
+                    yield this.markKeyForDeletion(filePath);
+                }
+                catch (e) {
+                    // best-effort cleanup, ignore error
+                }
+                throw new Error(`Error updating record after upload: ${updateError}`);
+            }
             let previewUrl;
             if ((_b = this.options.preview) === null || _b === void 0 ? void 0 : _b.previewUrl) {
                 previewUrl = this.options.preview.previewUrl({ filePath });

package/index.ts

@@ -1,5 +1,5 @@
 
-import { PluginOptions, UploadFromBufferParams } from './types.js';
+import { PluginOptions, UploadFromBufferParams, UploadFromBufferToExistingRecordParams } from './types.js';
 import { AdminForthPlugin, AdminForthResourceColumn, AdminForthResource, Filters, IAdminForth, IHttpServer, suggestIfTypo, RateLimiter, AdminUser, HttpExtra } from "adminforth";
 import { Readable } from "stream";
 import { randomUUID } from "crypto";
@@ -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);
 
@@ -549,22 +523,19 @@ export default class UploadPlugin extends AdminForthPlugin {
         return { error: 'failed to generate preview URL' };
       },
     });
-
-
   }
   
-
   /*
    * Uploads a file from a buffer, creates a record in the resource, and returns the file path and preview URL.
    */
-  async uploadFromBuffer({
+  async uploadFromBufferToNewRecord({
     filename,
     contentType,
     buffer,
     adminUser,
     extra,
     recordAttributes,
-  }: UploadFromBufferParams): Promise<{ path: string; previewUrl: string }> {
+  }: UploadFromBufferParams): Promise<{ path: string; previewUrl: string; newRecordPk: any }> {
     if (!filename || !contentType || !buffer) {
       throw new Error('filename, contentType and buffer are required');
     }
@@ -648,7 +619,7 @@ export default class UploadPlugin extends AdminForthPlugin {
       throw new Error('resourceConfig is not initialized yet');
     }
 
-    const { error: createError } = await this.adminforth.createResourceRecord({
+    const { error: createError, createdRecord, newRecordId }: any = await this.adminforth.createResourceRecord({
       resource: this.resourceConfig,
       record: { ...(recordAttributes ?? {}), [this.options.pathColumnName]: filePath },
       adminUser,
@@ -664,6 +635,164 @@ export default class UploadPlugin extends AdminForthPlugin {
       throw new Error(`Error creating record after upload: ${createError}`);
     }
 
+    const pkColumn = this.resourceConfig.columns.find((column: any) => column.primaryKey);
+    const pkName = pkColumn?.name;
+    const newRecordPk = newRecordId ?? (pkName && createdRecord ? createdRecord[pkName] : undefined);
+
+    let previewUrl: string;
+    if (this.options.preview?.previewUrl) {
+      previewUrl = this.options.preview.previewUrl({ filePath });
+    } else {
+      previewUrl = await this.options.storageAdapter.getDownloadUrl(filePath, 1800);
+    }
+
+    return {
+      path: filePath,
+      previewUrl,
+      newRecordPk,
+    };
+  }
+
+  /*
+   * Uploads a file from a buffer and updates an existing record's path column.
+   * If the newly generated storage path would be the same as the current path,
+   * throws an error to avoid potential caching issues.
+   */
+  async uploadFromBufferToExistingRecord({
+    recordId,
+    filename,
+    contentType,
+    buffer,
+    adminUser,
+    extra,
+  }: UploadFromBufferToExistingRecordParams): Promise<{ path: string; previewUrl: string }> {
+    if (recordId === undefined || recordId === null) {
+      throw new Error('recordId is required');
+    }
+
+    if (!filename || !contentType || !buffer) {
+      throw new Error('filename, contentType and buffer are required');
+    }
+
+    if (!this.resourceConfig) {
+      throw new Error('resourceConfig is not initialized yet');
+    }
+
+    const pkColumn = this.resourceConfig.columns.find((column: any) => column.primaryKey);
+    const pkName = pkColumn?.name;
+    if (!pkName) {
+      throw new Error('Primary key column not found in resource configuration');
+    }
+
+    const existingRecord = await this.adminforth
+      .resource(this.resourceConfig.resourceId)
+      .get([Filters.EQ(pkName, recordId)]);
+
+    if (!existingRecord) {
+      throw new Error(`Record with id ${recordId} not found`);
+    }
+
+    const lastDotIndex = filename.lastIndexOf('.');
+    if (lastDotIndex === -1) {
+      throw new Error('filename must contain an extension');
+    }
+
+    const originalExtension = filename.substring(lastDotIndex + 1).toLowerCase();
+    const originalFilename = filename.substring(0, lastDotIndex);
+
+    if (this.options.allowedFileExtensions && !this.options.allowedFileExtensions.includes(originalExtension)) {
+      throw new Error(
+        `File extension "${originalExtension}" is not allowed, allowed extensions are: ${this.options.allowedFileExtensions.join(', ')}`
+      );
+    }
+
+    let nodeBuffer: Buffer;
+    if (Buffer.isBuffer(buffer)) {
+      nodeBuffer = buffer;
+    } else if (buffer instanceof ArrayBuffer) {
+      nodeBuffer = Buffer.from(buffer);
+    } else if (ArrayBuffer.isView(buffer)) {
+      nodeBuffer = Buffer.from(buffer.buffer, buffer.byteOffset, buffer.byteLength);
+    } else {
+      throw new Error('Unsupported buffer type');
+    }
+
+    const size = nodeBuffer.byteLength;
+    if (this.options.maxFileSize && size > this.options.maxFileSize) {
+      throw new Error(
+        `File size ${size} is too large. Maximum allowed size is ${this.options.maxFileSize}`
+      );
+    }
+
+    const existingValue = existingRecord[this.options.pathColumnName];
+    const existingPaths = this.normalizePaths(existingValue);
+
+    const filePath: string = this.options.filePath({
+      originalFilename,
+      originalExtension,
+      contentType,
+      record: existingRecord,
+    });
+
+    if (filePath.startsWith('/')) {
+      throw new Error('s3Path should not start with /, please adjust s3path function to not return / at the start of the path');
+    }
+
+    if (existingPaths.includes(filePath)) {
+      throw new Error('New file path cannot be the same as existing path to avoid caching issues');
+    }
+
+    const { uploadUrl, uploadExtraParams } = await this.options.storageAdapter.getUploadSignedUrl(
+      filePath,
+      contentType,
+      1800,
+    );
+
+    const headers: Record<string, string> = {
+      'Content-Type': contentType,
+    };
+    if (uploadExtraParams) {
+      Object.entries(uploadExtraParams).forEach(([key, value]) => {
+        headers[key] = value as string;
+      });
+    }
+
+    const resp = await fetch(uploadUrl as any, {
+      method: 'PUT',
+      headers,
+      body: nodeBuffer as any,
+    });
+
+    if (!resp.ok) {
+      let bodyText = '';
+      try {
+        bodyText = await resp.text();
+      } catch (e) {
+        // ignore
+      }
+      throw new Error(`Upload failed with status ${resp.status}: ${bodyText}`);
+    }
+
+    const { error: updateError } = await this.adminforth.updateResourceRecord({
+      resource: this.resourceConfig,
+      recordId,
+      oldRecord: existingRecord,
+      adminUser,
+      extra,
+      updates: {
+        [this.options.pathColumnName]: filePath,
+      },
+    } as any);
+
+    if (updateError) {
+      try {
+        await this.markKeyForDeletion(filePath);
+      } catch (e) {
+        // best-effort cleanup, ignore error
+      }
+      throw new Error(`Error updating record after upload: ${updateError}`);
+    }
+
     let previewUrl: string;
     if (this.options.preview?.previewUrl) {
       previewUrl = this.options.preview.previewUrl({ filePath });

package/package.json

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

package/types.ts

@@ -199,4 +199,17 @@ export type UploadFromBufferParams = {
    * Values here do NOT affect the generated storage path.
    */
   recordAttributes?: Record<string, any>;
+};
+
+/**
+ * Parameters for the UploadPlugin.uploadFromBufferToExistingRecord API.
+ * Used to upload a binary file buffer and update the path column
+ * of an already existing record identified by its primary key.
+ */
+export type UploadFromBufferToExistingRecordParams = UploadFromBufferParams & {
+  /**
+   * Primary key value of the existing record whose file path
+   * should be replaced.
+   */
+  recordId: any;
 };