adminforth 1.1.74 → 1.1.75

package/dist/spa/src/views/EditView.vue

@@ -46,7 +46,7 @@
       @update:record="onUpdateRecord"
       @update:isValid="isValid = $event"
       :validating="validating"
-      :customComponentsPerColumn="editComponentsPerColumn"
+      :source="'edit'"
     >
     </ResourceForm>
 
@@ -88,7 +88,6 @@ const loading = ref(false);
 const saving = ref(false);
 
 const record = ref({});
-let editComponentsPerColumn = {};
 
 async function onUpdateRecord(newRecord) {
   record.value = newRecord;
@@ -119,13 +118,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'edit');
-
-  editComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.edit) {
-          acc[column.name] = getCustomComponent(column.components.edit);
-      }
-      return acc;
-    }, {});
   loading.value = false;
 });
 

package/dist/spa/src/views/ListView.vue

@@ -22,7 +22,7 @@
         v-if="checkboxes.length"
         data-tooltip-target="tooltip-remove-all"
         data-tooltip-placement="bottom"
-        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-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700 rounded-default"
+        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-blue-700 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"
       >
         <IconBanOutline class="w-5 h-5 "/>
 
@@ -70,7 +70,7 @@
           class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400"
           v-if="filtersStore.filters.length">
             {{ filtersStore.filters.length }}
-          </span>
+        </span>
       </button>
     </BreadcrumbsWithButtons>
 
@@ -89,6 +89,7 @@
       @update:sort="sort = $event"
       @update:checkboxes="checkboxes = $event"
       @update:records="getList"
+      :sort="sort"
       :pageSize="pageSize"
       :totalRows="totalRows"
       :checkboxes="checkboxes"
@@ -229,6 +230,15 @@ async function init() {
     resourceId: route.params.resourceId
   });
 
+  if (coreStore.resource.options?.defaultSort) {
+    sort.value = [{
+        field: coreStore.resource.options.defaultSort.columnName,
+        direction: coreStore.resource.options.defaultSort.direction
+    }];
+  } else {
+    sort.value = [];
+  }
+
   await getList();
   columnsMinMax.value = await callAdminForthApi({
     path: '/get_min_max_for_columns',
@@ -250,7 +260,6 @@ onMounted(async () => {
 watch(() => route.params.resourceId, async () => {
   filtersStore.setFilters([]);
   checkboxes.value = [];
-  sort.value = [];
   await init();
 });
 

package/dist/spa/src/views/LoginView.vue

@@ -103,6 +103,8 @@ onMounted(() => {
     coreStore.getPublicConfig()
 });
 
+
+
 async function login() {
     inProgress.value = true;
     const resp = await callAdminForthApi({
@@ -116,7 +118,10 @@ async function login() {
     inProgress.value = false;
     if (resp.error) {
       error.value = resp.error;
-    } else {
+    } else if (resp.redirectTo) {
+      router.push(resp.redirectTo);
+    }
+     else {
       error.value = null;
       user.authorize()
       router.push('/');

package/dist/spa/src/views/ResourceParent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`">
+  <div :key="`${$route?.params.resourceId}---${$route?.params.primaryKey}`" class="p-4">
     <RouterView/>
   </div>
 </template>
@@ -11,7 +11,6 @@
 
 
 import { useCoreStore } from '@/stores/core';
-import { onMounted } from 'vue';
 
 const coreStore = useCoreStore()
 

package/dist/spa/src/views/ShowView.vue

@@ -44,10 +44,10 @@
     </div>
     <div 
       v-else
-      class="relative overflow-x-auto shadow-resourse-form-shadow "
+      class="relative overflow-x-auto shadow-resourseFormShadow "
     >
      <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400 rounded-default">
-        <thead class="text-xs text-gray-700 uppercase bg-form-view-heading dark:bg-gray-700 dark:text-gray-400">
+        <thead class="text-xs text-gray-700 uppercase bg-lightormHeading dark:bg-gray-700 dark:text-gray-400">
             <tr>
                 <th scope="col" class="px-6 py-3">
                     Field
@@ -59,7 +59,7 @@
         </thead>
         <tbody>
             <tr v-for="column in coreStore.resource?.columns.filter(c => c.showIn.includes('show'))" :key="column.name"
-                class="bg-form-view-bg odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
+                class="bg-lightForm bg-darkForm odd:dark:bg-gray-900  even:dark:bg-gray-800 border-b  dark:border-gray-700"
             >
               <component
                 v-if="column.components?.showRow"
@@ -75,8 +75,8 @@
                 </td>
                 <td class="px-6 py-4 whitespace-nowrap whitespace-pre-wrap">
                   <component
-                    v-if="showComponentsPerColumn[column.name]"
-                    :is="showComponentsPerColumn[column.name]"
+                    v-if="column?.components?.show"
+                    :is="getCustomComponent(column?.components?.show)"
                     :resource="coreStore.resource"
                     :meta="column.components.show.meta"
                     :column="column"
@@ -126,8 +126,7 @@ import {showSuccesTost} from '@/composables/useFrontendApi';
 const item = ref(null);
 const route = useRoute();
 const router = useRouter();
-const loading = ref(false);
-let showComponentsPerColumn = {};
+const loading = ref(true);
 
 console.log(route.params,'showWiev');
 
@@ -145,13 +144,6 @@ onMounted(async () => {
     primaryKey: route.params.primaryKey,
   });
   checkAcessByAllowedActions(coreStore.resourceOptions.allowedActions,'show');
-
-  showComponentsPerColumn = coreStore.resource.columns.reduce((acc, column) => {
-      if (column.components?.show) {
-          acc[column.name] = getCustomComponent(column.components.show);
-      }
-      return acc;
-  }, {});
   loading.value = false;
 });
 

package/dist/spa/tailwind.config.js

@@ -9,7 +9,9 @@ export default {
 
   darkMode: 'class',
   plugins: [
-    require('flowbite/plugin'),
+    require('flowbite/plugin')({
+      charts: true,
+    }),
   ],
 }
 

package/index.ts

@@ -20,6 +20,7 @@ import { AdminForthConfig, AdminForthClass, AdminForthComponentDeclaration, Admi
   AllowedActions,
   ActionCheckSource,
   AdminForthDataSourceConnector,
+  BeforeLoginConfirmationFunction
 } from './types/AdminForthConfig.js';
 import path from 'path';
 import AdminForthPlugin from './plugins/base.js';
@@ -159,7 +160,25 @@ class AdminForth implements AdminForthClass {
       this.config.customization = {};
     }
 
+    if (!this.config.customization.customComponentsDir) {
+      this.config.customization.customComponentsDir = './custom';
+    }
 
+    try {
+      // check customComponentsDir exists
+      fs.accessSync(this.config.customization.customComponentsDir, fs.constants.R_OK);
+    } catch (e) {
+      this.config.customization.customComponentsDir = undefined;
+    }
+
+    if (this.config.customization.customPages) {
+      this.config.customization.customPages.forEach((page, i) => {
+        // validate component if it's not plugin injection
+        if (this.codeInjector.allComponentNames.hasOwnProperty(page.component as PropertyKey)) {
+          const validatedPage = this.validateComponent(page.component, errors, true);
+        }
+      });
+    }
     if (!this.config.baseUrl) {
       this.config.baseUrl = '';
     }
@@ -342,35 +361,44 @@ class AdminForth implements AdminForthClass {
         }
 
         // transform all hooks Functions to array of functions
-        if (res.hooks) {
-          for (const value of [res.hooks.show, res.hooks.list]) {
-            if (value) {
-              if (value.beforeDatasourceRequest) {
-                if (!Array.isArray(value.beforeDatasourceRequest)) {
-                  value.beforeDatasourceRequest = [value.beforeDatasourceRequest];
-                }
-              }
-              if (value.afterDatasourceResponse) {
-                if (!Array.isArray(value.afterDatasourceResponse)) {
-                  value.afterDatasourceResponse = [value.afterDatasourceResponse];
-                }
-              }
-            }
+        if (!res.hooks) {
+          res.hooks = {};
+        }
+        for (const hookName of ['show', 'list']) {
+          if (!res.hooks[hookName]) {
+            res.hooks[hookName] = {};
+          }
+          if (!res.hooks[hookName].beforeDatasourceRequest) {
+            res.hooks[hookName].beforeDatasourceRequest = [];
+          }
+          
+          if (!Array.isArray(res.hooks[hookName].beforeDatasourceRequest)) {
+            res.hooks[hookName].beforeDatasourceRequest = [res.hooks[hookName].beforeDatasourceRequest];
+          }
+          
+          if (!res.hooks[hookName].afterDatasourceResponse) {
+            res.hooks[hookName].afterDatasourceResponse = [];
           }
-          for (const value of [res.hooks.create, res.hooks.edit, res.hooks.delete]) {
-            if (value) {
 
-              if (value.beforeSave) {
-                if (!Array.isArray(value.beforeSave)) {
-                  value.beforeSave = [value.beforeSave];
-                }
-              }
-              if (value.afterSave) {
-                if (!Array.isArray(value.afterSave)) {
-                  value.afterSave = [value.afterSave];
-                }
-              }
-            }
+          if (!Array.isArray(res.hooks[hookName].afterDatasourceResponse)) {
+            res.hooks[hookName].afterDatasourceResponse = [res.hooks[hookName].afterDatasourceResponse];
+          }
+        }
+        for (const hookName of ['create', 'edit', 'delete']) {
+          if (!res.hooks[hookName]) {
+            res.hooks[hookName] = {};
+          }
+          if (!res.hooks[hookName].beforeSave) {
+            res.hooks[hookName].beforeSave = [];
+          }
+          if (!Array.isArray(res.hooks[hookName].beforeSave)) {
+            res.hooks[hookName].beforeSave = [res.hooks[hookName].beforeSave];
+          }
+          if (!res.hooks[hookName].afterSave) {
+            res.hooks[hookName].afterSave = [];
+          }
+          if (!Array.isArray(res.hooks[hookName].afterSave)) {
+            res.hooks[hookName].afterSave = [res.hooks[hookName].afterSave];
           }
         }
       });
@@ -474,6 +502,10 @@ class AdminForth implements AdminForthClass {
         column.required = { create: column.required, edit: column.required };
       }
 
+      if (!column.required) {
+        column.required = { create: false, edit: false };
+      }
+
       // same for editingNote
       if (typeof column.editingNote === 'string') {
         column.editingNote = { create: column.editingNote, edit: column.editingNote };
@@ -605,6 +637,7 @@ class AdminForth implements AdminForthClass {
     await connector.createRecord({ resource, record });
     // execute hook if needed
     for (const hook of listify(resource.hooks?.create?.afterSave as AfterSaveFunction[])) {
+      console.log('Hook afterSave', hook);
       const resp = await hook({ resource, record, adminUser });
       if (!resp || (!resp.ok && !resp.error)) {
         throw new Error(`Hook afterSave must return object with {ok: true} or { error: 'Error' } `);
@@ -622,11 +655,16 @@ class AdminForth implements AdminForthClass {
       method: 'POST',
       path: '/login',
       handler: async ({ body, response }) => {
+       
         const INVALID_MESSAGE = 'Invalid username or password';
         const { username, password } = body;
+        let adminUser: AdminUser;
+        let toReturn: { ok: boolean, redirectTo?: string, allowedLogin:boolean } = { ok: true, allowedLogin:true};
+
         let token;
         if (username === this.config.rootUser.username && password === this.config.rootUser.password) {
           this.auth.setAuthCookie({ response, username, pk: null });
+          adminUser = { isRoot: true, dbUser: null, pk: null, username: this.config.rootUser.username};
         } else {
           // get resource from db
           if (!this.config.auth) {
@@ -661,17 +699,39 @@ class AdminForth implements AdminForthClass {
           }
 
           const passwordHash = userRecord[this.config.auth.passwordHashField];
-          console.log('User record', userRecord, passwordHash)  // why does it has no hash?
           const valid = await AdminForthAuth.verifyPassword(password, passwordHash);
           if (valid) {
-            this.auth.setAuthCookie({ response, username, pk: userRecord[userResource.columns.find((col) => col.primaryKey).name] });
+            adminUser = { 
+              isRoot: false, dbUser: userRecord,
+              pk: userRecord[userResource.columns.find((col) => col.primaryKey).name], 
+              username
+            };
+            const beforeLoginConfirmation = this.config.auth.beforeLoginConfirmation as BeforeLoginConfirmationFunction[];
+            if (beforeLoginConfirmation.length){
+              for (const hook of beforeLoginConfirmation) {
+                const resp = await hook({ userRecord:adminUser});
+                if (resp?.body?.setCookie){
+                  resp?.body?.setCookie.forEach((cookie) => {
+                    this.auth.setCustomCookie({response,payload:cookie})});
+                }
+                if (resp?.body?.redirectTo) {
+                  toReturn = {ok:resp.ok, redirectTo:resp?.body?.redirectTo, allowedLogin:resp?.body?.allowedLogin};
+                  break;
+                }
+              }
+            }
+            if (toReturn.allowedLogin){
+              this.auth.setAuthCookie({ response, username, pk: userRecord[userResource.columns.find((col) => col.primaryKey).name] });
+            } 
           } else {
             return { error: INVALID_MESSAGE };
           }
+          
         }
-        return { ok: true };
-      },
-    });
+        
+        return toReturn;
+    }
+  });
 
     server.endpoint({
       method: 'POST',
@@ -686,7 +746,7 @@ class AdminForth implements AdminForthClass {
         method: 'POST',
         path: '/logout',
         handler: async ({ response }) => {
-          this.auth.removeAuthCookie({ response });
+          this.auth.removeAuthCookie( response );
           return { ok: true };
         },
     })
@@ -763,7 +823,6 @@ class AdminForth implements AdminForthClass {
           }
           newMenu.push(newMenuItem)
         }
-        console.log(userData,'this is the user data')
 
         return {
           user: userData,
@@ -1170,7 +1229,7 @@ class AdminForth implements AdminForthClass {
             } 
 
             if (Object.keys(newValues).length > 0) {
-                await connector.updateRecord({ resource, recordId, record, newValues});
+                await connector.updateRecord({ resource, recordId, newValues});
             }
             
             // execute hook if needed

package/modules/codeInjector.ts

@@ -118,51 +118,62 @@ class CodeInjector implements CodeInjectorType {
         }
         
         if (item.component) {
-          if(Object.keys(item).includes('isStaticRoute')){
-            if(!item.isStaticRoute){
-            routes += `{
-              path: '${item.path}',
-              name: '${item.path}',
-              component: () => import('${item.component}'),
-              meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
-            },\n`} else {
+          if(Object.keys(item).includes('isStaticRoute')) {
+            if(!item.isStaticRoute) {
               routes += `{
                 path: '${item.path}',
                 name: '${item.path}',
-                component: ${getComponentNameFromPath(item.component)},
-                meta: { title: '${item?.meta?.title|| item.path.replace('/', '')}'}
+                component: () => import('${item.component}'),
+                meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
               },\n`
-              const componentName = `${getComponentNameFromPath(item.component)}`;
-              routerComponents += `import ${componentName} from '${item.component}';\n`;
-            }
-          } else{
-            if(item.homepage){
+            } else {
               routes += `{
                 path: '${item.path}',
                 name: '${item.path}',
                 component: ${getComponentNameFromPath(item.component)},
-                meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
+                meta: { title: '${item?.meta?.title|| item.path.replace('/', '')}'}
               },\n`
               const componentName = `${getComponentNameFromPath(item.component)}`;
-              routerComponents += `import ${componentName} from '${item.component}';\n`;}
-              else {
-              routes += `{
-                path: '${item.path}',
-                name: '${item.path}',
-                component: () => import('${item.component}'),
-                meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
-              },\n` 
-              
+              routerComponents += `import ${componentName} from '${item.component}';\n`;
             }
-            
+          } else {
+              if (item.homepage) {
+                routes += `{
+                  path: '${item.path}',
+                  name: '${item.path}',
+                  component: ${getComponentNameFromPath(item.component)},
+                  meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
+                },\n`
+                const componentName = `${getComponentNameFromPath(item.component)}`;
+                routerComponents += `import ${componentName} from '${item.component}';\n`;
+              } else {
+                routes += `{
+                  path: '${item.path}',
+                  name: '${item.path}',
+                  component: () => import('${item.component}'),
+                  meta: { title: '${item?.meta?.title || item.path.replace('/', '')}'}
+                },\n` 
+                }
           }
-          
         }
         if (item.children) {
           collectAssetsFromMenu(item.children);
         }
       });
     };
+    const registerCustomPages = (config) => {
+      if (config.customization.customPages) {
+        config.customization.customPages.forEach((page) => {
+          routes += `{
+            path: '${page.path}',
+            name: '${page.path}',
+            component: () => import('${page?.component?.file || page.component}'),
+            meta: { title: '${page.meta?.title || page.path.replace('/', '')}',customLayout:${page?.component?.meta?.customLayout }}
+          },`})
+        
+    }}
+
+    registerCustomPages(this.adminforth.config);
     collectAssetsFromMenu(this.adminforth.config.menu);
 
     if (filesUpdated) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminforth",
-  "version": "1.1.74",
+  "version": "1.1.75",
   "description": "OpenSource Vue3 powered forth-generation admin panel",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,6 +24,7 @@
     "fs-extra": "^11.2.0",
     "jsonwebtoken": "^9.0.2",
     "mongodb": "6.6",
+    "node-2fa": "^2.0.3",
     "node-fetch": "^3.3.2",
     "pg": "^8.11.5",
     "request": "^2.88.2",

package/plugins/AuditLogPlugin/index.ts

@@ -34,9 +34,9 @@ export default class AuditLogPlugin extends AdminForthPlugin {
 
     const newRecord = action == AllowedActionsEnum.delete ? {} : (await connector.getRecordByPrimaryKey(resource, recordId)) || {};
     if (action !== AllowedActionsEnum.delete) {
-        oldRecord = oldRecord ? JSON.parse(JSON.stringify(oldRecord)) : {};
+      oldRecord = oldRecord ? JSON.parse(JSON.stringify(oldRecord)) : {};
     } else {
-        oldRecord = data
+      oldRecord = data
     }
 
     if (action !== AllowedActionsEnum.delete) {
@@ -114,24 +114,8 @@ export default class AuditLogPlugin extends AdminForthPlugin {
         return;
       }
 
-      const defaultHooks = {
-        create: { afterSave: [] },
-        edit: { afterSave: [] },
-        delete: { beforeSave: [] }
-      }
-
-      if ( !resource.hooks ) {
-        resource.hooks = defaultHooks; 
-      } else {
-         resource.hooks = {...defaultHooks, ...resource.hooks}
-      }
-
-      Object.keys(resource.hooks).forEach((hook) => {
-        const hookToUse = hook == AllowedActionsEnum.delete ? 'beforeSave' : 'afterSave';
-        if(!Array.isArray(resource.hooks[hook][hookToUse])){
-          resource.hooks[hook][hookToUse] = [resource.hooks[hook][hookToUse]]
-        }
-        resource.hooks[hook][hookToUse].push(async ({resource, record, adminUser, oldRecord}) => {
+      ['edit', 'create', 'delete'].forEach((hook) => {
+        resource.hooks[hook].afterSave.push(async ({resource, record, adminUser, oldRecord}) => {
           return await this.createLogRecord(resource, hook as AllowedActionsEnum, record, adminUser, oldRecord)
         })
       })

package/plugins/S3UploadPlugin/custom/s3uploader.vue

@@ -0,0 +1,120 @@
+<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-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600">
+          <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" />
+
+              <svg v-else class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400" 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"/>
+              </svg>
+              <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})` : '' }}
+              </p>
+
+              <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700 mt-2 mb-2" v-if="progress > 0">
+                <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" 
+                  :style="{width: `${progress}%`}">{{ progress }}%
+                </div>
+              </div>
+          </div>
+          <input id="dropzone-file" type="file" class="hidden" @change="onFileChange" />
+      </label>
+  </div> 
+
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+  meta: String
+})
+
+const imgPreview = ref(null);
+const progress = ref(0);
+
+const allowedExtensionsLabel = computed(() => {
+  const allowedExtensions = props.meta.allowedExtensions || []
+  if (allowedExtensions.length === 0) {
+    return 'Any file type'
+  }
+  // make upper case and write in format EXT1, EXT2 or EXT3
+  let label = allowedExtensions.map(ext => ext.toUpperCase()).join(', ');
+  // last comma to 'or'
+  label = label.replace(/,([^,]*)$/, ' or$1')
+  return label
+});
+
+const maxFileSizeHumanized = computed(() => {
+  let maxFileSize = props.meta.maxFileSize || 0
+  if (maxFileSize === 0) {
+    return ''
+  }
+  // if maxFileSize is in bytes, convert to KB, MB, GB, TB
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let i = 0
+  while (maxFileSize >= 1024 && i < units.length - 1) {
+    maxFileSize /= 1024
+    i++
+  }
+  return `${maxFileSize.toFixed(2)} ${units[i]}`
+})
+
+const onFileChange = (e) => {
+  const file = e.target.files[0]
+  if (!file) {
+    imgPreview.value = null;
+    progress.value = 0;
+    return
+  }
+  console.log('File selected:', file);
+
+  // get filename, extension, size, mimeType
+  const { name, size, type } = file;
+
+
+  const extension = name.split('.').pop();
+  console.log('File details:', { name, extension, size, type });
+  // validate file extension
+  const allowedExtensions = props.meta.allowedExtensions || []
+  if (allowedExtensions.length > 0 && !allowedExtensions.includes(extension)) {
+    window.adminforth.alert({
+      message: `Sorry but the file type ${extension} is not allowed. Please upload a file with one of the following extensions: ${allowedExtensionsLabel.value}`,
+      variant: 'danger'
+    });
+    return;
+  }
+
+  // validate file size
+  if (props.meta.maxFileSize && size > props.meta.maxFileSize) {
+    window.adminforth.alert({
+      message: `Sorry but the file size is too large. Please upload a file with a maximum size of ${maxFileSizeHumanized.value}`,
+      variant: 'danger'
+    });
+    return;
+  }
+  // supports preview
+  if (type.startsWith('image/')) {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      imgPreview.value = e.target.result;
+    }
+    reader.readAsDataURL(file);
+  }
+  setInterval(() => {
+    progress.value += 1;
+  }, 20);
+
+  await callAdminForthApi({
+      path: `/plugin/${props.meta.pluginInstanceId}/get_s3_upload_url`,
+      method: 'POST',
+      body: {
+        originalFilename: name,
+        contentType, size, originalExtension 
+      },
+  });
+}
+
+
+</script>