@adminforth/upload 1.5.0 → 2.0.1

package/README.md

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

package/build.log

@@ -11,5 +11,5 @@ custom/preview.vue
 custom/tsconfig.json
 custom/uploader.vue
 
-sent 43,165 bytes  received 134 bytes  86,598.00 bytes/sec
-total size is 42,676  speedup is 0.99
+sent 44,046 bytes  received 134 bytes  88,360.00 bytes/sec
+total size is 43,557  speedup is 0.99

package/custom/preview.vue

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

package/custom/uploader.vue

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

package/dist/custom/preview.vue

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

package/dist/custom/uploader.vue

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

package/dist/index.js

@@ -24,7 +24,8 @@ export default class UploadPlugin extends AdminForthPlugin {
     }
     setupLifecycleRule() {
         return __awaiter(this, void 0, void 0, function* () {
-            this.options.storage.adapter.setupLifecycle();
+            const adapterUserUniqueRepresentation = `${this.resourceConfig.resourceId}-${this.pluginInstanceId}`;
+            this.options.storageAdapter.setupLifecycle(adapterUserUniqueRepresentation);
         });
     }
     genPreviewUrl(record) {
@@ -34,7 +35,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                 record[`previewUrl_${this.pluginInstanceId}`] = this.options.preview.previewUrl({ filePath: record[this.options.pathColumnName] });
                 return;
             }
-            const previewUrl = yield this.options.storage.adapter.getDownloadUrl(record[this.options.pathColumnName], 1800);
+            const previewUrl = yield this.options.storageAdapter.getDownloadUrl(record[this.options.pathColumnName], 1800);
             record[`previewUrl_${this.pluginInstanceId}`] = previewUrl;
         });
     }
@@ -45,6 +46,7 @@ export default class UploadPlugin extends AdminForthPlugin {
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
+            this.resourceConfig = resourceConfig;
             // after column to store the path of the uploaded file, add new VirtualColumn,
             // show only in edit and create views
             // use component uploader.vue
@@ -148,7 +150,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                 if (record[pathColumnName]) {
                     process.env.HEAVY_DEBUG && console.log('🪥🪥 remove ObjectTagging', record[pathColumnName]);
                     // let it crash if it fails: this is a new file which just was uploaded.
-                    yield this.options.storage.adapter.markKeyForNotDeletation(record[pathColumnName]);
+                    yield this.options.storageAdapter.markKeyForNotDeletation(record[pathColumnName]);
                 }
                 return { ok: true };
             }));
@@ -182,7 +184,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             resourceConfig.hooks.delete.afterSave.push((_a) => __awaiter(this, [_a], void 0, function* ({ record }) {
                 if (record[pathColumnName]) {
                     try {
-                        yield this.options.storage.adapter.markKeyForDeletation(record[pathColumnName]);
+                        yield this.options.storageAdapter.markKeyForDeletation(record[pathColumnName]);
                     }
                     catch (e) {
                         // file might be e.g. already deleted, so we catch error
@@ -206,7 +208,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                     if (oldRecord[pathColumnName]) {
                         // put tag to delete old file
                         try {
-                            yield this.options.storage.adapter.markKeyForDeletation(oldRecord[pathColumnName]);
+                            yield this.options.storageAdapter.markKeyForDeletation(oldRecord[pathColumnName]);
                         }
                         catch (e) {
                             // file might be e.g. already deleted, so we catch error
@@ -216,7 +218,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                     if (updates[virtualColumn.name] !== null) {
                         // remove tag from new file
                         // in this case we let it crash if it fails: this is a new file which just was uploaded. 
-                        yield this.options.storage.adapter.markKeyForNotDeletation(updates[pathColumnName]);
+                        yield this.options.storageAdapter.markKeyForNotDeletation(updates[pathColumnName]);
                     }
                 }
                 return { ok: true };
@@ -261,13 +263,13 @@ export default class UploadPlugin extends AdminForthPlugin {
                 if (filePath.startsWith('/')) {
                     throw new Error('s3Path should not start with /, please adjust s3path function to not return / at the start of the path');
                 }
-                const { uploadUrl, uploadExtraParams } = yield this.options.storage.adapter.getUploadSignedUrl(filePath, contentType, 1800);
+                const { uploadUrl, uploadExtraParams } = yield this.options.storageAdapter.getUploadSignedUrl(filePath, contentType, 1800);
                 let previewUrl;
                 if ((_c = this.options.preview) === null || _c === void 0 ? void 0 : _c.previewUrl) {
                     previewUrl = this.options.preview.previewUrl({ filePath });
                 }
                 else {
-                    previewUrl = yield this.options.storage.adapter.getDownloadUrl(filePath, 1800);
+                    previewUrl = yield this.options.storageAdapter.getDownloadUrl(filePath, 1800);
                 }
                 return {
                     uploadUrl,
@@ -316,7 +318,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                     if (!record) {
                         return { error: `Record with id ${recordId} not found` };
                     }
-                    attachmentFiles = this.options.generation.attachFiles({ record, adminUser });
+                    attachmentFiles = yield this.options.generation.attachFiles({ record, adminUser });
                     // if files is not array, make it array
                     if (!Array.isArray(attachmentFiles)) {
                         attachmentFiles = [attachmentFiles];

package/index.ts

@@ -14,6 +14,8 @@ export default class UploadPlugin extends AdminForthPlugin {
   totalCalls: number;
   totalDuration: number;
 
+  resourceConfig: AdminForthResource;
+
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
     this.options = options;
@@ -28,7 +30,8 @@ export default class UploadPlugin extends AdminForthPlugin {
   }
 
   async setupLifecycleRule() {
-    this.options.storage.adapter.setupLifecycle();
+    const adapterUserUniqueRepresentation = `${this.resourceConfig.resourceId}-${this.pluginInstanceId}`;
+    this.options.storageAdapter.setupLifecycle(adapterUserUniqueRepresentation);
   }
 
   async genPreviewUrl(record: any) {
@@ -36,13 +39,14 @@ export default class UploadPlugin extends AdminForthPlugin {
       record[`previewUrl_${this.pluginInstanceId}`] = this.options.preview.previewUrl({ filePath: record[this.options.pathColumnName] });
       return;
     }
-    const previewUrl = await this.options.storage.adapter.getDownloadUrl(record[this.options.pathColumnName], 1800);
+    const previewUrl = await this.options.storageAdapter.getDownloadUrl(record[this.options.pathColumnName], 1800);
 
     record[`previewUrl_${this.pluginInstanceId}`] = previewUrl;
   }
 
   async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: AdminForthResource) {
     super.modifyResourceConfig(adminforth, resourceConfig);
+    this.resourceConfig = resourceConfig;
     // after column to store the path of the uploaded file, add new VirtualColumn,
     // show only in edit and create views
     // use component uploader.vue
@@ -161,7 +165,7 @@ export default class UploadPlugin extends AdminForthPlugin {
       if (record[pathColumnName]) {
         process.env.HEAVY_DEBUG && console.log('🪥🪥 remove ObjectTagging', record[pathColumnName]);
         // let it crash if it fails: this is a new file which just was uploaded.
-        await this.options.storage.adapter.markKeyForNotDeletation(record[pathColumnName]);
+        await this.options.storageAdapter.markKeyForNotDeletation(record[pathColumnName]);
       }
       return { ok: true };
     });
@@ -204,7 +208,7 @@ export default class UploadPlugin extends AdminForthPlugin {
     resourceConfig.hooks.delete.afterSave.push(async ({ record }: { record: any }) => {
       if (record[pathColumnName]) {
         try {
-          await this.options.storage.adapter.markKeyForDeletation(record[pathColumnName]);
+          await this.options.storageAdapter.markKeyForDeletation(record[pathColumnName]);
         } 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);
@@ -233,7 +237,7 @@ export default class UploadPlugin extends AdminForthPlugin {
         if (oldRecord[pathColumnName]) {
           // put tag to delete old file
           try {
-            await this.options.storage.adapter.markKeyForDeletation(oldRecord[pathColumnName]);
+            await this.options.storageAdapter.markKeyForDeletation(oldRecord[pathColumnName]);
           } 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);
@@ -242,7 +246,7 @@ export default class UploadPlugin extends AdminForthPlugin {
         if (updates[virtualColumn.name] !== null) {
           // remove tag from new file
           // in this case we let it crash if it fails: this is a new file which just was uploaded. 
-          await  this.options.storage.adapter.markKeyForNotDeletation(updates[pathColumnName]);
+          await  this.options.storageAdapter.markKeyForNotDeletation(updates[pathColumnName]);
         }
       }
       return { ok: true };
@@ -296,12 +300,12 @@ export default class UploadPlugin extends AdminForthPlugin {
         if (filePath.startsWith('/')) {
           throw new Error('s3Path should not start with /, please adjust s3path function to not return / at the start of the path');
         }
-        const { uploadUrl, uploadExtraParams } = await this.options.storage.adapter.getUploadSignedUrl(filePath, contentType, 1800);
+        const { uploadUrl, uploadExtraParams } = await this.options.storageAdapter.getUploadSignedUrl(filePath, contentType, 1800);
         let previewUrl;
         if (this.options.preview?.previewUrl) {
           previewUrl = this.options.preview.previewUrl({ filePath });
         } else {
-          previewUrl = await this.options.storage.adapter.getDownloadUrl(filePath, 1800);
+          previewUrl = await this.options.storageAdapter.getDownloadUrl(filePath, 1800);
         }
         
         return {
@@ -361,7 +365,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             return { error: `Record with id ${recordId} not found` };
           }
           
-          attachmentFiles = this.options.generation.attachFiles({ record, adminUser });
+          attachmentFiles = await this.options.generation.attachFiles({ record, adminUser });
           // if files is not array, make it array
           if (!Array.isArray(attachmentFiles)) {
             attachmentFiles = [attachmentFiles];

package/package.json

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

package/types.ts

@@ -131,7 +131,7 @@ export type PluginOptions = {
     attachFiles?: ({ record, adminUser }: {
       record: any,
       adminUser: AdminUser,
-    }) => string[],
+    }) => string[] | Promise<string[]>,
 
     
     /**
@@ -155,12 +155,9 @@ export type PluginOptions = {
     
   }
 
-  storage?: {
-    /**
-     * The adapter used to store the files.
-     * For now only S3 adapter is supported.
-     */
-    adapter: StorageAdapter,
-  }
-
+  /**
+   * The adapter used to store the files.
+   * For now only S3 adapter is supported.
+   */
+  storageAdapter: StorageAdapter,
 }