@adminforth/upload 1.0.9 → 1.0.11

package/custom/preview.vue

@@ -47,7 +47,7 @@
 
 <style scoped>
   img {
-    min-width: 200px;
+    min-width: 150px;
   }
   video {
     min-width: 200px;
@@ -74,6 +74,9 @@ const url = 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(() => {
+  if (!url.value) {
+    return null;
+  }
   const u = new URL(url.value);
   return guessContentType(u.pathname);
 });

package/custom/uploader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center justify-center w-full">
       <label for="dropzone-file" 
-        class="flex flex-col items-center justify-center w-full h-64 border-2  border-dashed rounded-lg cursor-pointer  dark:hover:bg-gray-800 hover:bg-gray-100  dark:hover:border-gray-500 dark:hover:bg-gray-600"
+        class="flex flex-col px-3 items-center justify-center w-full h-64 border-2  border-dashed rounded-lg cursor-pointer  dark:hover:bg-gray-800 hover:bg-gray-100  dark:hover:border-gray-500 dark:hover:bg-gray-600"
         @dragover.prevent="() => dragging = true"
         @dragleave.prevent="() => dragging = false"
         @drop.prevent="onFileChange"  
@@ -22,7 +22,7 @@
               <template v-if="!uploaded">
                 <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
                 <p class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ allowedExtensionsLabel }} {{ meta.maxFileSize ? `(up to ${maxFileSizeHumanized})` : '' }}
+                  {{ allowedExtensionsLabel }} {{ meta.maxFileSize ? `(up to ${humanifySize(meta.maxFileSize)})` : '' }}
                 </p>
               </template>
 
@@ -60,7 +60,7 @@ import { computed, ref, onMounted, watch } from 'vue'
 import { callAdminForthApi } from '@/utils' 
 
 const props = defineProps({
-  meta: String,
+  meta: Object,
   record: Object,
 })
 

package/dist/custom/preview.vue

@@ -47,7 +47,7 @@
 
 <style scoped>
   img {
-    min-width: 200px;
+    min-width: 150px;
   }
   video {
     min-width: 200px;
@@ -74,6 +74,9 @@ const url = 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(() => {
+  if (!url.value) {
+    return null;
+  }
   const u = new URL(url.value);
   return guessContentType(u.pathname);
 });

package/dist/custom/uploader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="flex items-center justify-center w-full">
       <label for="dropzone-file" 
-        class="flex flex-col items-center justify-center w-full h-64 border-2  border-dashed rounded-lg cursor-pointer  dark:hover:bg-gray-800 hover:bg-gray-100  dark:hover:border-gray-500 dark:hover:bg-gray-600"
+        class="flex flex-col px-3 items-center justify-center w-full h-64 border-2  border-dashed rounded-lg cursor-pointer  dark:hover:bg-gray-800 hover:bg-gray-100  dark:hover:border-gray-500 dark:hover:bg-gray-600"
         @dragover.prevent="() => dragging = true"
         @dragleave.prevent="() => dragging = false"
         @drop.prevent="onFileChange"  
@@ -22,7 +22,7 @@
               <template v-if="!uploaded">
                 <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Click to upload</span> or drag and drop</p>
                 <p class="text-xs text-gray-500 dark:text-gray-400">
-                  {{ allowedExtensionsLabel }} {{ meta.maxFileSize ? `(up to ${maxFileSizeHumanized})` : '' }}
+                  {{ allowedExtensionsLabel }} {{ meta.maxFileSize ? `(up to ${humanifySize(meta.maxFileSize)})` : '' }}
                 </p>
               </template>
 
@@ -60,7 +60,7 @@ import { computed, ref, onMounted, watch } from 'vue'
 import { callAdminForthApi } from '@/utils' 
 
 const props = defineProps({
-  meta: String,
+  meta: Object,
   record: Object,
 })
 

package/dist/index.js

@@ -15,6 +15,9 @@ export default class UploadPlugin extends AdminForthPlugin {
         super(options, import.meta.url);
         this.options = options;
     }
+    instanceUniqueRepresentation(pluginOptions) {
+        return `${pluginOptions.pathColumnName}`;
+    }
     setupLifecycleRule() {
         return __awaiter(this, void 0, void 0, function* () {
             // check that lifecyle rule "adminforth-unused-cleaner" exists
@@ -90,7 +93,6 @@ export default class UploadPlugin extends AdminForthPlugin {
         });
         return __awaiter(this, void 0, void 0, function* () {
             var _a, _b, _c;
-            this.setupLifecycleRule();
             _super.modifyResourceConfig.call(this, adminforth, resourceConfig);
             // after column to store the path of the uploaded file, add new VirtualColumn,
             // show only in edit and create views
@@ -202,7 +204,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             }
             // ** HOOKS FOR DELETE **//
             // add delete hook which sets tag adminforth-candidate-for-cleanup to true
-            resourceConfig.hooks.delete.beforeSave.push((_h) => __awaiter(this, [_h], void 0, function* ({ record }) {
+            resourceConfig.hooks.delete.afterSave.push((_h) => __awaiter(this, [_h], void 0, function* ({ record }) {
                 if (record[pathColumnName]) {
                     const s3 = new AWS.S3({
                         accessKeyId: this.options.s3AccessKeyId,
@@ -271,6 +273,10 @@ export default class UploadPlugin extends AdminForthPlugin {
             }));
         });
     }
+    validateConfigAfterDiscover(adminforth, resourceConfig) {
+        // called here because modifyResourceConfig can be called in build time where there is no environment and AWS secrets
+        this.setupLifecycleRule();
+    }
     setupEndpoints(server) {
         server.endpoint({
             method: 'POST',

package/index.ts

@@ -10,10 +10,13 @@ export default class UploadPlugin extends AdminForthPlugin {
 
   constructor(options: PluginOptions) {
     super(options, import.meta.url);
-
     this.options = options;
   }
 
+  instanceUniqueRepresentation(pluginOptions: any) : string {
+    return `${pluginOptions.pathColumnName}`;
+  }
+
   async setupLifecycleRule() {
     // check that lifecyle rule "adminforth-unused-cleaner" exists
     const CLEANUP_RULE_ID = 'adminforth-unused-cleaner';
@@ -84,7 +87,6 @@ export default class UploadPlugin extends AdminForthPlugin {
   }
 
   async modifyResourceConfig(adminforth: IAdminForth, resourceConfig: any) {
-    this.setupLifecycleRule();
 
     super.modifyResourceConfig(adminforth, resourceConfig);
     // after column to store the path of the uploaded file, add new VirtualColumn,
@@ -225,7 +227,7 @@ export default class UploadPlugin extends AdminForthPlugin {
     // ** HOOKS FOR DELETE **//
 
     // add delete hook which sets tag adminforth-candidate-for-cleanup to true
-    resourceConfig.hooks.delete.beforeSave.push(async ({ record }: { record: any }) => {
+    resourceConfig.hooks.delete.afterSave.push(async ({ record }: { record: any }) => {
       if (record[pathColumnName]) {
         const s3 = new AWS.S3({
           accessKeyId: this.options.s3AccessKeyId,
@@ -304,7 +306,10 @@ export default class UploadPlugin extends AdminForthPlugin {
     
   }
 
- 
+  validateConfigAfterDiscover(adminforth: IAdminForth, resourceConfig: any) {
+    // called here because modifyResourceConfig can be called in build time where there is no environment and AWS secrets
+    this.setupLifecycleRule();
+  }
 
   setupEndpoints(server: IHttpServer) {
     server.endpoint({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adminforth/upload",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",