@adminforth/upload 1.0.8 → 1.0.10

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,
 })
 
@@ -201,7 +201,7 @@ const onFileChange = async (e) => {
     });
     if (!success) {
       window.adminforth.alert({
-        messageHtml: `<div>Sorry but the file was not be uploaded because of S3 Request Error: </div>
+        messageHtml: `<div>Sorry but the file was not uploaded because of S3 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

@@ -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,
 })
 
@@ -201,7 +201,7 @@ const onFileChange = async (e) => {
     });
     if (!success) {
       window.adminforth.alert({
-        messageHtml: `<div>Sorry but the file was not be uploaded because of S3 Request Error: </div>
+        messageHtml: `<div>Sorry but the file was not uploaded because of S3 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

@@ -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
@@ -202,7 +205,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,

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';
@@ -225,7 +228,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 +307,6 @@ export default class UploadPlugin extends AdminForthPlugin {
     
   }
 
- 
 
   setupEndpoints(server: IHttpServer) {
     server.endpoint({

package/package.json

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