@adminforth/upload 2.6.1 → 2.7.0

package/build.log

@@ -11,5 +11,5 @@ custom/preview.vue
 custom/tsconfig.json
 custom/uploader.vue
 
-sent 49,299 bytes  received 134 bytes  98,866.00 bytes/sec
-total size is 48,810  speedup is 0.99
+sent 51,239 bytes  received 134 bytes  102,746.00 bytes/sec
+total size is 50,757  speedup is 0.99

package/custom/preview.vue

@@ -1,31 +1,36 @@
 <template>
   <div>
-    <template v-if="url">
-      <img 
-        v-if="contentType && contentType.startsWith('image')"
-        :src="url" 
-        class="rounded-md" 
-        :style="[maxWidth, minWidth]"
-        ref="img"
-        @click.stop="zoom.open()" 
-      />
-      <video 
-        v-else-if="contentType && contentType.startsWith('video')"
-        :src="url" 
-        class="rounded-md" 
-        controls
-        @click.stop >
-      </video>
-      
-      <a v-else :href="url" target="_blank"
-         class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
-      >
-        <!-- download file icon -->
-        <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-        </svg>
-        {{ $t('Download file') }}
-      </a>
+    <template v-if="urls.length">
+      <div class="flex flex-wrap gap-2 items-start">
+        <template v-for="(u, i) in urls" :key="`${u}-${i}`">
+          <img
+            v-if="guessContentTypeFromUrl(u)?.startsWith('image')"
+            :src="u"
+            class="rounded-md cursor-zoom-in"
+            :style="[maxWidth, minWidth]"
+            ref="img"
+            @click.stop="openZoom(i)"
+          />
+          <video
+            v-else-if="guessContentTypeFromUrl(u)?.startsWith('video')"
+            :src="u"
+            class="rounded-md"
+            controls
+            @click.stop
+          />
+          <a
+            v-else
+            :href="u"
+            target="_blank"
+            class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+          >
+            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+            {{ $t('Download file') }}
+          </a>
+        </template>
+      </div>
     </template>
     
     
@@ -74,8 +79,10 @@ const props = defineProps({
 const trueContentType  = ref(null);
 
 onMounted(async () => {
-   // try to get HEAD request
-   try {
+  // try to get HEAD request (single url only). For arrays we just guess by extension.
+  if (!url.value) return;
+  if (Array.isArray(url.value)) return;
+  try {
     const response = await fetch(url.value, {
       method: 'HEAD',
       mode: 'cors',
@@ -101,6 +108,11 @@ const url = computed(() => {
   return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
 });
 
+const urls = computed(() => {
+  if (!url.value) return [];
+  return Array.isArray(url.value) ? url.value : [url.value];
+});
+
 const maxWidth = computed(() => {
   const isShowPage = route.path.includes('/show/');
   const width = isShowPage 
@@ -124,6 +136,7 @@ const guessedContentType = computed(() => {
   if (!url.value) {
     return null;
   }
+  if (Array.isArray(url.value)) return null;
   const u = new URL(url.value, url.value.startsWith('http') ? undefined : location.origin);
   return guessContentType(u.pathname);
 });
@@ -141,6 +154,15 @@ function guessContentType(url) {
   }
 }
 
+function guessContentTypeFromUrl(u) {
+  if (!u) return null;
+  try {
+    const parsed = new URL(u, u.startsWith('http') ? undefined : location.origin);
+    return guessContentType(parsed.pathname);
+  } catch (e) {
+    return guessContentType(u);
+  }
+}
 
 watch([contentType], async ([contentType]) => {
   // since content type might change after true guessing (HEAD request might be slow) we need to try initializing zoom again
@@ -148,12 +170,19 @@ watch([contentType], async ([contentType]) => {
     zoom.value.detach();
   }
   await nextTick();
-  if (contentType?.startsWith('image')) {
-    zoom.value = mediumZoom(img.value, {
-      margin: 24,
-    });
+  // For arrays we use click-to-open per image, for single we keep existing behavior.
+  if (contentType?.startsWith('image') && !Array.isArray(url.value)) {
+    zoom.value = mediumZoom(img.value, { margin: 24 });
   }
 
 }, { immediate: true });
 
+function openZoom(index) {
+  if (!urls.value?.length) return;
+  const el = Array.isArray(img.value) ? img.value[index] : img.value;
+  if (!el) return;
+  const z = mediumZoom(el, { margin: 24 });
+  z.open();
+}
+
 </script>

package/custom/uploader.vue

@@ -24,7 +24,7 @@
         }"
       >
           <div class="flex flex-col items-center justify-center pt-5 pb-6">
-              <img v-if="imgPreview" :src="imgPreview" class="w-100 mt-4 rounded-lg h-40 object-contain" />
+              <img v-if="typeof imgPreview === 'string' && imgPreview" :src="imgPreview" class="w-100 mt-4 rounded-lg h-40 object-contain" />
 
               <svg v-else class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400 !text-lightDropzoneText dark:!text-darkDropzoneText" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
@@ -66,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue'
+import { computed, ref, onMounted, watch, getCurrentInstance } from 'vue'
 import { callAdminForthApi } from '@/utils'
 import { IconMagic } from '@iconify-prerendered/vue-mdi';
 import { useI18n } from 'vue-i18n';
@@ -75,7 +75,8 @@ import { useRoute } from 'vue-router';
 const route = useRoute();
 const { t } = useI18n();
 
-const inputId = computed(() => `dropzone-file-${props.meta.pluginInstanceId}`);
+const instanceUid = getCurrentInstance()?.uid ?? Math.floor(Math.random() * 1000000);
+const inputId = computed(() => `dropzone-file-${props.meta.pluginInstanceId}-${instanceUid}`);
 
 import ImageGenerator from '@@/plugins/UploadPlugin/imageGenerator.vue';
 import adminforth from '@/adminforth';
@@ -84,6 +85,7 @@ import adminforth from '@/adminforth';
 const props = defineProps({
   meta: Object,
   record: Object,
+  value: [String, Number, Boolean, Object, Array, null],
 })
 
 const emit = defineEmits([
@@ -102,10 +104,9 @@ const progress = ref(0);
 
 const uploaded = ref(false);
 const uploadedSize = ref(0);
-
 const downloadFileUrl = ref('');
 
-watch(() => uploaded, (value) => {
+watch(uploaded, (value) => {
   emit('update:emptiness', !value);
 });
 
@@ -129,7 +130,8 @@ onMounted(async () => {
     queryValues = {};
   }
 
-  if (queryValues[props.meta.pathColumnName]) {
+
+  if (typeof queryValues?.[props.meta.pathColumnName] === 'string' && queryValues[props.meta.pathColumnName]) {
     downloadFileUrl.value = queryValues[props.meta.pathColumnName];
 
     const resp = await callAdminForthApi({
@@ -163,7 +165,28 @@ onMounted(async () => {
         files: [file],
       },
     });
-  } else if (props.record[previewColumnName]) {
+  } 
+
+  const existingValue = (props as any).value;
+  const existingFilePath =
+    typeof existingValue === 'string' && existingValue.trim() ? existingValue : null;
+
+  if (!uploaded.value && existingFilePath) {
+    const resp = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get-file-download-url`,
+      method: 'POST',
+      body: { filePath: existingFilePath },
+    });
+
+    if (!resp?.error && resp?.url) {
+      imgPreview.value = resp.url;
+      uploaded.value = true;
+      emit('update:emptiness', false);
+      return;
+    }
+  }
+
+  if (!uploaded.value && props.record?.[previewColumnName]) {
     imgPreview.value = props.record[previewColumnName];
     uploaded.value = true;
     emit('update:emptiness', false);

package/dist/custom/preview.vue

@@ -1,31 +1,36 @@
 <template>
   <div>
-    <template v-if="url">
-      <img 
-        v-if="contentType && contentType.startsWith('image')"
-        :src="url" 
-        class="rounded-md" 
-        :style="[maxWidth, minWidth]"
-        ref="img"
-        @click.stop="zoom.open()" 
-      />
-      <video 
-        v-else-if="contentType && contentType.startsWith('video')"
-        :src="url" 
-        class="rounded-md" 
-        controls
-        @click.stop >
-      </video>
-      
-      <a v-else :href="url" target="_blank"
-         class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
-      >
-        <!-- download file icon -->
-        <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-        </svg>
-        {{ $t('Download file') }}
-      </a>
+    <template v-if="urls.length">
+      <div class="flex flex-wrap gap-2 items-start">
+        <template v-for="(u, i) in urls" :key="`${u}-${i}`">
+          <img
+            v-if="guessContentTypeFromUrl(u)?.startsWith('image')"
+            :src="u"
+            class="rounded-md cursor-zoom-in"
+            :style="[maxWidth, minWidth]"
+            ref="img"
+            @click.stop="openZoom(i)"
+          />
+          <video
+            v-else-if="guessContentTypeFromUrl(u)?.startsWith('video')"
+            :src="u"
+            class="rounded-md"
+            controls
+            @click.stop
+          />
+          <a
+            v-else
+            :href="u"
+            target="_blank"
+            class="flex gap-1 items-center py-1 px-3 me-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded border border-gray-300 hover:bg-gray-100 hover:text-lightPrimary focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-darkListTable dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+          >
+            <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+            </svg>
+            {{ $t('Download file') }}
+          </a>
+        </template>
+      </div>
     </template>
     
     
@@ -74,8 +79,10 @@ const props = defineProps({
 const trueContentType  = ref(null);
 
 onMounted(async () => {
-   // try to get HEAD request
-   try {
+  // try to get HEAD request (single url only). For arrays we just guess by extension.
+  if (!url.value) return;
+  if (Array.isArray(url.value)) return;
+  try {
     const response = await fetch(url.value, {
       method: 'HEAD',
       mode: 'cors',
@@ -101,6 +108,11 @@ const url = computed(() => {
   return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
 });
 
+const urls = computed(() => {
+  if (!url.value) return [];
+  return Array.isArray(url.value) ? url.value : [url.value];
+});
+
 const maxWidth = computed(() => {
   const isShowPage = route.path.includes('/show/');
   const width = isShowPage 
@@ -124,6 +136,7 @@ const guessedContentType = computed(() => {
   if (!url.value) {
     return null;
   }
+  if (Array.isArray(url.value)) return null;
   const u = new URL(url.value, url.value.startsWith('http') ? undefined : location.origin);
   return guessContentType(u.pathname);
 });
@@ -141,6 +154,15 @@ function guessContentType(url) {
   }
 }
 
+function guessContentTypeFromUrl(u) {
+  if (!u) return null;
+  try {
+    const parsed = new URL(u, u.startsWith('http') ? undefined : location.origin);
+    return guessContentType(parsed.pathname);
+  } catch (e) {
+    return guessContentType(u);
+  }
+}
 
 watch([contentType], async ([contentType]) => {
   // since content type might change after true guessing (HEAD request might be slow) we need to try initializing zoom again
@@ -148,12 +170,19 @@ watch([contentType], async ([contentType]) => {
     zoom.value.detach();
   }
   await nextTick();
-  if (contentType?.startsWith('image')) {
-    zoom.value = mediumZoom(img.value, {
-      margin: 24,
-    });
+  // For arrays we use click-to-open per image, for single we keep existing behavior.
+  if (contentType?.startsWith('image') && !Array.isArray(url.value)) {
+    zoom.value = mediumZoom(img.value, { margin: 24 });
   }
 
 }, { immediate: true });
 
+function openZoom(index) {
+  if (!urls.value?.length) return;
+  const el = Array.isArray(img.value) ? img.value[index] : img.value;
+  if (!el) return;
+  const z = mediumZoom(el, { margin: 24 });
+  z.open();
+}
+
 </script>

package/dist/custom/uploader.vue

@@ -24,7 +24,7 @@
         }"
       >
           <div class="flex flex-col items-center justify-center pt-5 pb-6">
-              <img v-if="imgPreview" :src="imgPreview" class="w-100 mt-4 rounded-lg h-40 object-contain" />
+              <img v-if="typeof imgPreview === 'string' && imgPreview" :src="imgPreview" class="w-100 mt-4 rounded-lg h-40 object-contain" />
 
               <svg v-else class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400 !text-lightDropzoneText dark:!text-darkDropzoneText" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 16">
                   <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"/>
@@ -66,7 +66,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch } from 'vue'
+import { computed, ref, onMounted, watch, getCurrentInstance } from 'vue'
 import { callAdminForthApi } from '@/utils'
 import { IconMagic } from '@iconify-prerendered/vue-mdi';
 import { useI18n } from 'vue-i18n';
@@ -75,7 +75,8 @@ import { useRoute } from 'vue-router';
 const route = useRoute();
 const { t } = useI18n();
 
-const inputId = computed(() => `dropzone-file-${props.meta.pluginInstanceId}`);
+const instanceUid = getCurrentInstance()?.uid ?? Math.floor(Math.random() * 1000000);
+const inputId = computed(() => `dropzone-file-${props.meta.pluginInstanceId}-${instanceUid}`);
 
 import ImageGenerator from '@@/plugins/UploadPlugin/imageGenerator.vue';
 import adminforth from '@/adminforth';
@@ -84,6 +85,7 @@ import adminforth from '@/adminforth';
 const props = defineProps({
   meta: Object,
   record: Object,
+  value: [String, Number, Boolean, Object, Array, null],
 })
 
 const emit = defineEmits([
@@ -102,10 +104,9 @@ const progress = ref(0);
 
 const uploaded = ref(false);
 const uploadedSize = ref(0);
-
 const downloadFileUrl = ref('');
 
-watch(() => uploaded, (value) => {
+watch(uploaded, (value) => {
   emit('update:emptiness', !value);
 });
 
@@ -129,7 +130,8 @@ onMounted(async () => {
     queryValues = {};
   }
 
-  if (queryValues[props.meta.pathColumnName]) {
+
+  if (typeof queryValues?.[props.meta.pathColumnName] === 'string' && queryValues[props.meta.pathColumnName]) {
     downloadFileUrl.value = queryValues[props.meta.pathColumnName];
 
     const resp = await callAdminForthApi({
@@ -163,7 +165,28 @@ onMounted(async () => {
         files: [file],
       },
     });
-  } else if (props.record[previewColumnName]) {
+  } 
+
+  const existingValue = (props as any).value;
+  const existingFilePath =
+    typeof existingValue === 'string' && existingValue.trim() ? existingValue : null;
+
+  if (!uploaded.value && existingFilePath) {
+    const resp = await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get-file-download-url`,
+      method: 'POST',
+      body: { filePath: existingFilePath },
+    });
+
+    if (!resp?.error && resp?.url) {
+      imgPreview.value = resp.url;
+      uploaded.value = true;
+      emit('update:emptiness', false);
+      return;
+    }
+  }
+
+  if (!uploaded.value && props.record?.[previewColumnName]) {
     imgPreview.value = props.record[previewColumnName];
     uploaded.value = true;
     emit('update:emptiness', false);

package/dist/index.js

@@ -33,6 +33,30 @@ export default class UploadPlugin extends AdminForthPlugin {
             this.rateLimiter = new RateLimiter((_c = this.options.generation.rateLimit) === null || _c === void 0 ? void 0 : _c.limit);
         }
     }
+    normalizePaths(value) {
+        if (!value)
+            return [];
+        if (Array.isArray(value))
+            return value.filter(Boolean).map(String);
+        return [String(value)];
+    }
+    callStorageAdapter(primaryMethod, fallbackMethod, filePath) {
+        return __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            const adapter = this.options.storageAdapter;
+            const fn = (_a = adapter === null || adapter === void 0 ? void 0 : adapter[primaryMethod]) !== null && _a !== void 0 ? _a : adapter === null || adapter === void 0 ? void 0 : adapter[fallbackMethod];
+            if (typeof fn !== 'function') {
+                throw new Error(`Storage adapter is missing method "${primaryMethod}" (fallback "${fallbackMethod}")`);
+            }
+            yield fn.call(adapter, filePath);
+        });
+    }
+    markKeyForNotDeletion(filePath) {
+        return this.callStorageAdapter('markKeyForNotDeletion', 'markKeyForNotDeletation', filePath);
+    }
+    markKeyForDeletion(filePath) {
+        return this.callStorageAdapter('markKeyForDeletion', 'markKeyForDeletation', filePath);
+    }
     generateImages(jobId, prompt, recordId, adminUser, headers) {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b;
@@ -108,13 +132,19 @@ export default class UploadPlugin extends AdminForthPlugin {
     }
     genPreviewUrl(record) {
         return __awaiter(this, void 0, void 0, function* () {
-            var _a;
-            if ((_a = this.options.preview) === null || _a === void 0 ? void 0 : _a.previewUrl) {
-                record[`previewUrl_${this.pluginInstanceId}`] = this.options.preview.previewUrl({ filePath: record[this.options.pathColumnName] });
+            const value = record === null || record === void 0 ? void 0 : record[this.options.pathColumnName];
+            const paths = this.normalizePaths(value);
+            if (!paths.length)
                 return;
-            }
-            const previewUrl = yield this.options.storageAdapter.getDownloadUrl(record[this.options.pathColumnName], 1800);
-            record[`previewUrl_${this.pluginInstanceId}`] = previewUrl;
+            const makeUrl = (filePath) => __awaiter(this, void 0, void 0, function* () {
+                var _a;
+                if ((_a = this.options.preview) === null || _a === void 0 ? void 0 : _a.previewUrl) {
+                    return this.options.preview.previewUrl({ filePath });
+                }
+                return yield this.options.storageAdapter.getDownloadUrl(filePath, 1800);
+            });
+            const urls = yield Promise.all(paths.map(makeUrl));
+            record[`previewUrl_${this.pluginInstanceId}`] = Array.isArray(value) ? urls : urls[0];
         });
     }
     modifyResourceConfig(adminforth, resourceConfig) {
@@ -188,16 +218,12 @@ export default class UploadPlugin extends AdminForthPlugin {
             // in afterSave hook, aremove tag adminforth-not-yet-used from the file
             resourceConfig.hooks.create.afterSave.push((_a) => __awaiter(this, [_a], void 0, function* ({ record }) {
                 process.env.HEAVY_DEBUG && console.log('💾💾  after save ', record === null || record === void 0 ? void 0 : record.id);
-                if (record[pathColumnName]) {
-                    process.env.HEAVY_DEBUG && console.log('🪥🪥 remove ObjectTagging', record[pathColumnName]);
+                const paths = this.normalizePaths(record === null || record === void 0 ? void 0 : record[pathColumnName]);
+                yield Promise.all(paths.map((p) => __awaiter(this, void 0, void 0, function* () {
+                    process.env.HEAVY_DEBUG && console.log('🪥🪥 remove ObjectTagging', p);
                     // let it crash if it fails: this is a new file which just was uploaded.
-                    if (this.options.storageAdapter.markKeyForNotDeletion !== undefined) {
-                        yield this.options.storageAdapter.markKeyForNotDeletion(record[pathColumnName]);
-                    }
-                    else {
-                        yield this.options.storageAdapter.markKeyForNotDeletation(record[pathColumnName]);
-                    }
-                }
+                    yield this.markKeyForNotDeletion(p);
+                })));
                 return { ok: true };
             }));
             // ** HOOKS FOR SHOW **//
@@ -228,51 +254,45 @@ export default class UploadPlugin extends AdminForthPlugin {
             // ** HOOKS FOR DELETE **//
             // add delete hook which sets tag adminforth-candidate-for-cleanup to true
             resourceConfig.hooks.delete.afterSave.push((_a) => __awaiter(this, [_a], void 0, function* ({ record }) {
-                if (record[pathColumnName]) {
+                const paths = this.normalizePaths(record === null || record === void 0 ? void 0 : record[pathColumnName]);
+                yield Promise.all(paths.map((p) => __awaiter(this, void 0, void 0, function* () {
                     try {
-                        if (this.options.storageAdapter.markKeyForDeletion !== undefined) {
-                            yield this.options.storageAdapter.markKeyForDeletion(record[pathColumnName]);
-                        }
-                        else {
-                            yield this.options.storageAdapter.markKeyForDeletation(record[pathColumnName]);
-                        }
+                        yield this.markKeyForDeletion(p);
                     }
                     catch (e) {
                         // file might be e.g. already deleted, so we catch error
-                        console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${record[pathColumnName]}. File will not be auto-cleaned up`, e);
+                        console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${p}. File will not be auto-cleaned up`, e);
                     }
-                }
+                })));
                 return { ok: true };
             }));
             // ** HOOKS FOR EDIT **//
             // add edit postSave hook to delete old file and remove tag from new file
             resourceConfig.hooks.edit.afterSave.push((_a) => __awaiter(this, [_a], void 0, function* ({ updates, oldRecord }) {
                 if (updates[pathColumnName] || updates[pathColumnName] === null) {
-                    if (oldRecord[pathColumnName]) {
+                    const oldValue = oldRecord === null || oldRecord === void 0 ? void 0 : oldRecord[pathColumnName];
+                    const newValue = updates === null || updates === void 0 ? void 0 : updates[pathColumnName];
+                    const oldPaths = this.normalizePaths(oldValue);
+                    const newPaths = newValue === null ? [] : this.normalizePaths(newValue);
+                    const oldSet = new Set(oldPaths);
+                    const newSet = new Set(newPaths);
+                    const toDelete = oldPaths.filter((p) => !newSet.has(p));
+                    const toKeep = newPaths.filter((p) => !oldSet.has(p));
+                    yield Promise.all(toDelete.map((p) => __awaiter(this, void 0, void 0, function* () {
                         // put tag to delete old file
                         try {
-                            if (this.options.storageAdapter.markKeyForDeletion !== undefined) {
-                                yield this.options.storageAdapter.markKeyForDeletion(oldRecord[pathColumnName]);
-                            }
-                            else {
-                                yield this.options.storageAdapter.markKeyForDeletation(oldRecord[pathColumnName]);
-                            }
+                            yield this.markKeyForDeletion(p);
                         }
                         catch (e) {
                             // file might be e.g. already deleted, so we catch error
-                            console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${oldRecord[pathColumnName]}. File will not be auto-cleaned up`, e);
+                            console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${p}. File will not be auto-cleaned up`, e);
                         }
-                    }
-                    if (updates[pathColumnName] !== null) {
+                    })));
+                    yield Promise.all(toKeep.map((p) => __awaiter(this, void 0, void 0, function* () {
                         // remove tag from new file
-                        // in this case we let it crash if it fails: this is a new file which just was uploaded. 
-                        if (this.options.storageAdapter.markKeyForNotDeletion !== undefined) {
-                            yield this.options.storageAdapter.markKeyForNotDeletion(updates[pathColumnName]);
-                        }
-                        else {
-                            yield this.options.storageAdapter.markKeyForNotDeletation(updates[pathColumnName]);
-                        }
-                    }
+                        // in this case we let it crash if it fails: this is a new file which just was uploaded.
+                        yield this.markKeyForNotDeletion(p);
+                    })));
                 }
                 return { ok: true };
             }));

package/index.ts

@@ -41,6 +41,29 @@ export default class UploadPlugin extends AdminForthPlugin {
     }
   }
 
+  private normalizePaths(value: any): string[] {
+    if (!value) return [];
+    if (Array.isArray(value)) return value.filter(Boolean).map(String);
+    return [String(value)];
+  }
+
+  private async callStorageAdapter(primaryMethod: string, fallbackMethod: string, filePath: string) {
+    const adapter: any = this.options.storageAdapter as any;
+    const fn = adapter?.[primaryMethod] ?? adapter?.[fallbackMethod];
+    if (typeof fn !== 'function') {
+      throw new Error(`Storage adapter is missing method "${primaryMethod}" (fallback "${fallbackMethod}")`);
+    }
+    await fn.call(adapter, filePath);
+  }
+
+  private markKeyForNotDeletion(filePath: string) {
+    return this.callStorageAdapter('markKeyForNotDeletion', 'markKeyForNotDeletation', filePath);
+  }
+
+  private markKeyForDeletion(filePath: string) {
+    return this.callStorageAdapter('markKeyForDeletion', 'markKeyForDeletation', filePath);
+  }
+
   private async generateImages(jobId: string, prompt: string, recordId: any, adminUser: any, headers: any) {
     if (this.options.generation.rateLimit?.limit) {
       // rate limit
@@ -128,13 +151,19 @@ export default class UploadPlugin extends AdminForthPlugin {
   }
 
   async genPreviewUrl(record: any) {
-    if (this.options.preview?.previewUrl) {
-      record[`previewUrl_${this.pluginInstanceId}`] = this.options.preview.previewUrl({ filePath: record[this.options.pathColumnName] });
-      return;
-    }
-    const previewUrl = await this.options.storageAdapter.getDownloadUrl(record[this.options.pathColumnName], 1800);
+    const value = record?.[this.options.pathColumnName];
+    const paths = this.normalizePaths(value);
+    if (!paths.length) return;
 
-    record[`previewUrl_${this.pluginInstanceId}`] = previewUrl;
+    const makeUrl = async (filePath: string) => {
+      if (this.options.preview?.previewUrl) {
+        return this.options.preview.previewUrl({ filePath });
+      }
+      return await this.options.storageAdapter.getDownloadUrl(filePath, 1800);
+    };
+
+    const urls = await Promise.all(paths.map(makeUrl));
+    record[`previewUrl_${this.pluginInstanceId}`] = Array.isArray(value) ? urls : urls[0];
   }
 
   async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
@@ -214,15 +243,12 @@ export default class UploadPlugin extends AdminForthPlugin {
     resourceConfig.hooks.create.afterSave.push(async ({ record }: { record: any }) => {
       process.env.HEAVY_DEBUG && console.log('💾💾  after save ', record?.id);
       
-      if (record[pathColumnName]) {
-        process.env.HEAVY_DEBUG && console.log('🪥🪥 remove ObjectTagging', record[pathColumnName]);
+      const paths = this.normalizePaths(record?.[pathColumnName]);
+      await Promise.all(paths.map(async (p) => {
+        process.env.HEAVY_DEBUG && console.log('🪥🪥 remove ObjectTagging', p);
         // let it crash if it fails: this is a new file which just was uploaded.
-        if (this.options.storageAdapter.markKeyForNotDeletion !== undefined) {
-          await this.options.storageAdapter.markKeyForNotDeletion(record[pathColumnName]);
-        } else {
-          await this.options.storageAdapter.markKeyForNotDeletation(record[pathColumnName]);
-        }
-      }
+        await this.markKeyForNotDeletion(p);
+      }));
       return { ok: true };
     });
 
@@ -262,18 +288,15 @@ export default class UploadPlugin extends AdminForthPlugin {
 
     // add delete hook which sets tag adminforth-candidate-for-cleanup to true
     resourceConfig.hooks.delete.afterSave.push(async ({ record }: { record: any }) => {
-      if (record[pathColumnName]) {
+      const paths = this.normalizePaths(record?.[pathColumnName]);
+      await Promise.all(paths.map(async (p) => {
         try {
-          if (this.options.storageAdapter.markKeyForDeletion !== undefined) {
-            await this.options.storageAdapter.markKeyForDeletion(record[pathColumnName]);
-          } else {
-            await this.options.storageAdapter.markKeyForDeletation(record[pathColumnName]);
-          }
+          await this.markKeyForDeletion(p);
         } catch (e) {
           // file might be e.g. already deleted, so we catch error
-          console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${record[pathColumnName]}. File will not be auto-cleaned up`, e);
+          console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${p}. File will not be auto-cleaned up`, e);
         }
-      }
+      }));
       return { ok: true };
     });
 
@@ -286,28 +309,33 @@ export default class UploadPlugin extends AdminForthPlugin {
     resourceConfig.hooks.edit.afterSave.push(async ({ updates, oldRecord }: { updates: any, oldRecord: any }) => {
 
       if (updates[pathColumnName] || updates[pathColumnName] === null) {
-        if (oldRecord[pathColumnName]) {
+        const oldValue = oldRecord?.[pathColumnName];
+        const newValue = updates?.[pathColumnName];
+
+        const oldPaths = this.normalizePaths(oldValue);
+        const newPaths = newValue === null ? [] : this.normalizePaths(newValue);
+
+        const oldSet = new Set(oldPaths);
+        const newSet = new Set(newPaths);
+
+        const toDelete = oldPaths.filter((p) => !newSet.has(p));
+        const toKeep = newPaths.filter((p) => !oldSet.has(p));
+
+        await Promise.all(toDelete.map(async (p) => {
           // put tag to delete old file
           try {
-            if (this.options.storageAdapter.markKeyForDeletion !== undefined) {
-              await this.options.storageAdapter.markKeyForDeletion(oldRecord[pathColumnName]);
-            } else {
-              await this.options.storageAdapter.markKeyForDeletation(oldRecord[pathColumnName]);
-            }
+            await this.markKeyForDeletion(p);
           } catch (e) {
             // file might be e.g. already deleted, so we catch error
-            console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${oldRecord[pathColumnName]}. File will not be auto-cleaned up`, e);
+            console.error(`Error setting tag ${ADMINFORTH_NOT_YET_USED_TAG} to true for object ${p}. File will not be auto-cleaned up`, e);
           }
-        }
-        if (updates[pathColumnName] !== null) {
+        }));
+
+        await Promise.all(toKeep.map(async (p) => {
           // remove tag from new file
-          // in this case we let it crash if it fails: this is a new file which just was uploaded. 
-        if (this.options.storageAdapter.markKeyForNotDeletion !== undefined) {
-          await this.options.storageAdapter.markKeyForNotDeletion(updates[pathColumnName]);
-        } else {
-          await  this.options.storageAdapter.markKeyForNotDeletation(updates[pathColumnName]);
-        }
-        }
+          // in this case we let it crash if it fails: this is a new file which just was uploaded.
+          await this.markKeyForNotDeletion(p);
+        }));
       }
       return { ok: true };
     });

package/package.json

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