@adminforth/upload 2.12.0 → 2.14.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,824 bytes  received 134 bytes  119,916.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

@@ -10,8 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { AdminForthPlugin, Filters, suggestIfTypo, RateLimiter } from "adminforth";
 import { Readable } from "stream";
 import { randomUUID } from "crypto";
-import { interpretResource } from 'adminforth';
-import { ActionCheckSource } from 'adminforth';
+import { interpretResource, ActionCheckSource } from 'adminforth';
 const ADMINFORTH_NOT_YET_USED_TAG = 'adminforth-candidate-for-cleanup';
 const jobs = new Map();
 export default class UploadPlugin extends AdminForthPlugin {
@@ -90,35 +89,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 +370,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 };
@@ -710,4 +690,230 @@ export default class UploadPlugin extends AdminForthPlugin {
             };
         });
     }
+    /**
+     * Generates a new signed upload URL for future uploading from the frontend via a direct upload (e.g. using fetch + FormData).
+     *
+     * After the upload, file still will be marked for auto-deletion after short time, so to keep it permanently,
+     * you need to either:
+     *  * Use commitUrlToExistingRecord to commit the URL to an existing record. This will replace the path in the existing record and will do a cleanup of the old
+     *    file pointed in this path column.
+     *  * If you want to create a new record with this URL, you can call commitUrlToNewRecord, which will create a new record and set the path column to the uploaded file path.
+     *  * Write URL to special field called pathColumnName so afterSave hook installed by the plugin will automatically mark as not candidate for auto-deletion
+     *
+     * ```ts
+     * const file = input.files[0];
+     *
+     * // 1) Ask your backend to call getUploadUrlForExistingRecord
+     * const { uploadUrl, filePath, uploadExtraParams } = await fetch('/api/uploads/get-url-existing', {
+     *   method: 'POST',
+     *   headers: { 'Content-Type': 'application/json' },
+     *   body: JSON.stringify({
+     *     recordId,
+     *     filename: file.name,
+     *     contentType: file.type,
+     *     size: file.size,
+     *   }),
+     * }).then(r => r.json());
+     *
+     * const formData = new FormData();
+     * if (uploadExtraParams) {
+     *   Object.entries(uploadExtraParams).forEach(([key, value]) => {
+     *     formData.append(key, value as string);
+     *   });
+     * }
+     * formData.append('file', file);
+     *
+     * // 2) Direct upload from the browser to storage (multipart/form-data)
+     * const uploadResp = await fetch(uploadUrl, {
+     *   method: 'POST',
+     *   body: formData,
+     * });
+     * if (!uploadResp.ok) {
+     *   throw new Error('Upload failed');
+     * }
+     *
+     * // 3) Tell your backend to commit the URL to the record e.g. from rest API call
+     * await fetch('/api/uploads/commit-existing', {
+     *   method: 'POST',
+     *   headers: { 'Content-Type': 'application/json' },
+     *   body: JSON.stringify({ recordId, filePath }),
+     * });
+     * ```
+     */
+    getUploadUrl(_a) {
+        return __awaiter(this, arguments, void 0, function* ({ recordId, filename, contentType, size, }) {
+            if (!filename || !contentType) {
+                throw new Error('filename and contentType 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');
+            }
+            let existingRecord = undefined;
+            if (recordId !== undefined && recordId !== null) {
+                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(', ')}`);
+            }
+            if (size != null && 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 === null || existingRecord === void 0 ? void 0 : existingRecord[this.options.pathColumnName];
+            const existingPaths = existingValue ? this.normalizePaths(existingValue) : undefined;
+            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 && 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);
+            return {
+                uploadUrl,
+                filePath,
+                uploadExtraParams,
+                pathColumnName: this.options.pathColumnName,
+            };
+        });
+    }
+    /**
+     * Commits a previously generated upload URL to an existing record.
+     *
+     * Never call this method from edit afterSave and beforeSave hooks of the same resource,
+     * as it would create infinite loop of record updates.
+     * You should call this method from your own custom API endpoint after the upload is done.
+     */
+    commitUrlToUpdateExistingRecord(_a) {
+        return __awaiter(this, arguments, void 0, function* ({ recordId, filePath, adminUser, extra, }) {
+            var _b;
+            if (recordId === undefined || recordId === null) {
+                throw new Error('recordId is required');
+            }
+            if (!filePath) {
+                throw new Error('filePath is 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 existingValue = existingRecord[this.options.pathColumnName];
+            const existingPaths = this.normalizePaths(existingValue);
+            if (existingPaths.includes(filePath)) {
+                throw new Error('New file path cannot be the same as existing path to avoid caching issues');
+            }
+            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 });
+            }
+            else {
+                previewUrl = yield this.options.storageAdapter.getDownloadUrl(filePath, 1800);
+            }
+            return {
+                path: filePath,
+                previewUrl,
+            };
+        });
+    }
+    /**
+     * Commits a previously generated upload URL to a new record.
+     *
+     * Never call this method from create afterSave and beforeSave hooks of the same resource,
+     * as it would create infinite loop of record creations.
+     *
+     * You should call this method from your own custom API endpoint after the upload is done.
+     */
+    commitUrlToNewRecord(_a) {
+        return __awaiter(this, arguments, void 0, function* ({ filePath, adminUser, extra, recordAttributes, }) {
+            var _b;
+            if (!filePath) {
+                throw new Error('filePath is required');
+            }
+            if (!this.resourceConfig) {
+                throw new Error('resourceConfig is not initialized yet');
+            }
+            // Mark this key as used so lifecycle rules do not delete it.
+            yield this.markKeyForNotDeletion(filePath);
+            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,
+                extra,
+            });
+            if (createError) {
+                try {
+                    yield this.markKeyForDeletion(filePath);
+                }
+                catch (e) {
+                    // best-effort cleanup, ignore error
+                }
+                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,
+            };
+        });
+    }
 }

package/index.ts

@@ -1,10 +1,16 @@
 
-import { PluginOptions, UploadFromBufferParams, UploadFromBufferToExistingRecordParams } from './types.js';
-import { AdminForthPlugin, AdminForthResourceColumn, AdminForthResource, Filters, IAdminForth, IHttpServer, suggestIfTypo, RateLimiter, AdminUser, HttpExtra } from "adminforth";
+import {
+  PluginOptions,
+  UploadFromBufferParams,
+  UploadFromBufferToExistingRecordParams,
+  CommitUrlToUpdateExistingRecordParams,
+  CommitUrlToNewRecordParams,
+  GetUploadUrlParams,
+} from './types.js';
+import { AdminForthPlugin, AdminForthResource, Filters, IAdminForth, IHttpServer, suggestIfTypo, RateLimiter } from "adminforth";
 import { Readable } from "stream";
 import { randomUUID } from "crypto";
-import { interpretResource } from 'adminforth';
-import { ActionCheckSource } from 'adminforth'; 
+import { interpretResource, ActionCheckSource } from 'adminforth';
 
 const ADMINFORTH_NOT_YET_USED_TAG = 'adminforth-candidate-for-cleanup';
 const jobs = new Map();
@@ -104,39 +110,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 +429,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);
 
@@ -832,4 +812,288 @@ export default class UploadPlugin extends AdminForthPlugin {
     };
   }
 
+  /**
+   * Generates a new signed upload URL for future uploading from the frontend via a direct upload (e.g. using fetch + FormData).
+   *
+   * After the upload, file still will be marked for auto-deletion after short time, so to keep it permanently,
+   * you need to either:
+   *  * Use commitUrlToExistingRecord to commit the URL to an existing record. This will replace the path in the existing record and will do a cleanup of the old 
+   *    file pointed in this path column.
+   *  * If you want to create a new record with this URL, you can call commitUrlToNewRecord, which will create a new record and set the path column to the uploaded file path.
+   *  * Write URL to special field called pathColumnName so afterSave hook installed by the plugin will automatically mark as not candidate for auto-deletion
+   *
+   * ```ts
+   * const file = input.files[0];
+   *
+   * // 1) Ask your backend to call getUploadUrlForExistingRecord
+   * const { uploadUrl, filePath, uploadExtraParams } = await fetch('/api/uploads/get-url-existing', {
+   *   method: 'POST',
+   *   headers: { 'Content-Type': 'application/json' },
+   *   body: JSON.stringify({
+   *     recordId,
+   *     filename: file.name,
+   *     contentType: file.type,
+   *     size: file.size,
+   *   }),
+   * }).then(r => r.json());
+   *
+   * const formData = new FormData();
+   * if (uploadExtraParams) {
+   *   Object.entries(uploadExtraParams).forEach(([key, value]) => {
+   *     formData.append(key, value as string);
+   *   });
+   * }
+   * formData.append('file', file);
+   *
+   * // 2) Direct upload from the browser to storage (multipart/form-data)
+   * const uploadResp = await fetch(uploadUrl, {
+   *   method: 'POST',
+   *   body: formData,
+   * });
+   * if (!uploadResp.ok) {
+   *   throw new Error('Upload failed');
+   * }
+   *
+   * // 3) Tell your backend to commit the URL to the record e.g. from rest API call
+   * await fetch('/api/uploads/commit-existing', {
+   *   method: 'POST',
+   *   headers: { 'Content-Type': 'application/json' },
+   *   body: JSON.stringify({ recordId, filePath }),
+   * });
+   * ```
+   */
+  async getUploadUrl({
+    recordId,
+    filename,
+    contentType,
+    size,
+  }: GetUploadUrlParams): Promise<{
+    uploadUrl: string;
+    filePath: string;
+    uploadExtraParams?: Record<string, string>;
+    pathColumnName: string;
+  }> {
+    if (!filename || !contentType) {
+      throw new Error('filename and contentType 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');
+    }
+
+    let existingRecord: any = undefined;
+    if (recordId !== undefined && recordId !== null) {
+      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(
+          ', ',
+        )}`,
+      );
+    }
+
+    if (size != null && 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 = existingValue ? this.normalizePaths(existingValue) : undefined;
+
+    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 && 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,
+    );
+
+    return {
+      uploadUrl,
+      filePath,
+      uploadExtraParams,
+      pathColumnName: this.options.pathColumnName,
+    };
+  }
+
+  /**
+   * Commits a previously generated upload URL to an existing record.
+   *
+   * Never call this method from edit afterSave and beforeSave hooks of the same resource,
+   * as it would create infinite loop of record updates. 
+   * You should call this method from your own custom API endpoint after the upload is done.
+   */
+  async commitUrlToUpdateExistingRecord({
+    recordId,
+    filePath,
+    adminUser,
+    extra,
+  }: CommitUrlToUpdateExistingRecordParams): Promise<{ path: string; previewUrl: string }> {
+    if (recordId === undefined || recordId === null) {
+      throw new Error('recordId is required');
+    }
+    if (!filePath) {
+      throw new Error('filePath is 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 existingValue = existingRecord[this.options.pathColumnName];
+    const existingPaths = this.normalizePaths(existingValue);
+
+    if (existingPaths.includes(filePath)) {
+      throw new Error(
+        'New file path cannot be the same as existing path to avoid caching issues',
+      );
+    }
+
+    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 });
+    } else {
+      previewUrl = await this.options.storageAdapter.getDownloadUrl(filePath, 1800);
+    }
+
+    return {
+      path: filePath,
+      previewUrl,
+    };
+  }
+
+  /**
+   * Commits a previously generated upload URL to a new record.
+   * 
+   * Never call this method from create afterSave and beforeSave hooks of the same resource,
+   * as it would create infinite loop of record creations.
+   * 
+   * You should call this method from your own custom API endpoint after the upload is done.
+   */
+  async commitUrlToNewRecord({
+    filePath,
+    adminUser,
+    extra,
+    recordAttributes,
+  }: CommitUrlToNewRecordParams): Promise<{ path: string; previewUrl: string; newRecordPk: any }> {
+    if (!filePath) {
+      throw new Error('filePath is required');
+    }
+    if (!this.resourceConfig) {
+      throw new Error('resourceConfig is not initialized yet');
+    }
+
+    // Mark this key as used so lifecycle rules do not delete it.
+    await this.markKeyForNotDeletion(filePath);
+
+    const { error: createError, createdRecord, newRecordId }: any =
+      await this.adminforth.createResourceRecord({
+        resource: this.resourceConfig,
+        record: { ...(recordAttributes ?? {}), [this.options.pathColumnName]: filePath },
+        adminUser,
+        extra,
+      });
+
+    if (createError) {
+      try {
+        await this.markKeyForDeletion(filePath);
+      } catch (e) {
+        // best-effort cleanup, ignore error
+      }
+      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,
+    };
+  }
+
 }

package/package.json

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

package/types.ts

@@ -212,4 +212,107 @@ export type UploadFromBufferToExistingRecordParams = UploadFromBufferParams & {
    * should be replaced.
    */
   recordId: any;
+};
+
+/**
+ * Parameters for generating an upload URL for an existing record
+ * that will be uploaded directly from the browser.
+ */
+export type GetUploadUrlParams = {
+  /**
+   * Primary key of the record whose file is being replaced.
+   */
+  recordId?: any;
+
+  /**
+   * Full file name including extension, as provided by the browser.
+   */
+  filename: string;
+
+  /**
+   * MIME type reported by the browser, used as Content-Type for storage.
+   */
+  contentType: string;
+
+  /**
+   * Optional file size in bytes. If provided, it will be validated
+   * against {@link PluginOptions.maxFileSize}.
+   */
+  size?: number;
+};
+
+/**
+ * Parameters for generating an upload URL for a new record
+ * that will be uploaded directly from the browser.
+ */
+export type GetUploadUrlForNewRecordParams = {
+  /**
+   * Full file name including extension, as provided by the browser.
+   */
+  filename: string;
+
+  /**
+   * MIME type reported by the browser, used as Content-Type for storage.
+   */
+  contentType: string;
+
+  /**
+   * Optional file size in bytes. If provided, it will be validated
+   * against {@link PluginOptions.maxFileSize}.
+   */
+  size?: number;
+};
+
+/**
+ * Parameters for committing a previously generated upload URL
+ * to an existing record. This is used after the browser finished
+ * uploading directly to the storage provider.
+ */
+export type CommitUrlToUpdateExistingRecordParams = {
+  /**
+   * Primary key of the record whose file is being replaced.
+   */
+  recordId: any;
+
+  /**
+   * Storage path (key) that was returned by getUploadUrlForExistingRecord.
+   */
+  filePath: string;
+
+  /**
+   * Authenticated admin user on whose behalf the record is updated.
+   */
+  adminUser: AdminUser;
+
+  /**
+   * Optional HTTP context (headers, IP, etc.).
+   */
+  extra?: HttpExtra;
+};
+
+/**
+ * Parameters for committing a previously generated upload URL
+ * to a new record. This is used after the browser finished
+ * uploading directly to the storage provider.
+ */
+export type CommitUrlToNewRecordParams = {
+  /**
+   * Storage path (key) that was returned by getUploadUrlForNewRecord.
+   */
+  filePath: string;
+
+  /**
+   * Authenticated admin user on whose behalf the record is created.
+   */
+  adminUser: AdminUser;
+
+  /**
+   * Optional HTTP context (headers, IP, etc.).
+   */
+  extra?: HttpExtra;
+
+  /**
+   * Optional additional attributes for the new record.
+   */
+  recordAttributes?: Record<string, any>;
 };