@adminforth/upload 1.0.21 → 1.0.23

package/custom/preview.vue

@@ -5,6 +5,7 @@
         v-if="contentType && contentType.startsWith('image')"
         :src="url" 
         class="rounded-md" 
+        :style="maxWidth"
         ref="img"
         data-zoomable
         @click.stop="zoom.open()" 
@@ -70,6 +71,8 @@ const url = computed(() => {
   return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
 });
 
+const maxWidth = computed(() => props.meta.maxWidth ? { maxWidth: props.meta.maxWidth } : {});
+
 
 // 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

package/custom/uploader.vue

@@ -11,7 +11,7 @@
           <IconMagic class="w-5 h-5"/>
       </button>
 
-      <label for="dropzone-file" 
+      <label :for="inputId" 
         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"
@@ -59,7 +59,7 @@
               </div>
               
           </div>
-          <input id="dropzone-file" type="file" class="hidden" @change="onFileChange" />
+          <input :id="inputId" type="file" class="hidden" @change="onFileChange" ref="uploadInputRef" />
       </label>
   </div> 
 
@@ -70,6 +70,7 @@ import { computed, ref, onMounted, watch } from 'vue'
 import { callAdminForthApi } from '@/utils'
 import { IconMagic } from '@iconify-prerendered/vue-mdi';
 
+const inputId = computed(() => `dropzone-file-${props.meta.pluginInstanceId}`);
 
 import ImageGenerator from '@@/plugins/UploadPlugin/imageGenerator.vue';
 
@@ -85,6 +86,8 @@ const emit = defineEmits([
   'update:emptiness',
 ]);
 
+const uploadInputRef = ref(null);
+
 const showImageGen = ref(false);
 const dragging = ref(false);
 
@@ -136,6 +139,7 @@ function clear() {
   progress.value = 0;
   uploaded.value = false;
   uploadedSize.value = 0;
+  uploadInputRef.value.value = null;
   emit('update:value', null);
 }
 
@@ -154,6 +158,11 @@ function humanifySize(size) {
 
 
 const onFileChange = async (e) => {
+  // if empty then return
+  if (!e.target.files || e.target.files.length === 0) {
+    return;
+  }
+
   imgPreview.value = null;
   progress.value = 0;
   uploaded.value = false;

package/dist/custom/preview.vue

@@ -5,6 +5,7 @@
         v-if="contentType && contentType.startsWith('image')"
         :src="url" 
         class="rounded-md" 
+        :style="maxWidth"
         ref="img"
         data-zoomable
         @click.stop="zoom.open()" 
@@ -70,6 +71,8 @@ const url = computed(() => {
   return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
 });
 
+const maxWidth = computed(() => props.meta.maxWidth ? { maxWidth: props.meta.maxWidth } : {});
+
 
 // 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

package/dist/custom/uploader.vue

@@ -11,7 +11,7 @@
           <IconMagic class="w-5 h-5"/>
       </button>
 
-      <label for="dropzone-file" 
+      <label :for="inputId" 
         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"
@@ -59,7 +59,7 @@
               </div>
               
           </div>
-          <input id="dropzone-file" type="file" class="hidden" @change="onFileChange" />
+          <input :id="inputId" type="file" class="hidden" @change="onFileChange" ref="uploadInputRef" />
       </label>
   </div> 
 
@@ -70,6 +70,7 @@ import { computed, ref, onMounted, watch } from 'vue'
 import { callAdminForthApi } from '@/utils'
 import { IconMagic } from '@iconify-prerendered/vue-mdi';
 
+const inputId = computed(() => `dropzone-file-${props.meta.pluginInstanceId}`);
 
 import ImageGenerator from '@@/plugins/UploadPlugin/imageGenerator.vue';
 
@@ -85,6 +86,8 @@ const emit = defineEmits([
   'update:emptiness',
 ]);
 
+const uploadInputRef = ref(null);
+
 const showImageGen = ref(false);
 const dragging = ref(false);
 
@@ -136,6 +139,7 @@ function clear() {
   progress.value = 0;
   uploaded.value = false;
   uploadedSize.value = 0;
+  uploadInputRef.value.value = null;
   emit('update:value', null);
 }
 
@@ -154,6 +158,11 @@ function humanifySize(size) {
 
 
 const onFileChange = async (e) => {
+  // if empty then return
+  if (!e.target.files || e.target.files.length === 0) {
+    return;
+  }
+
   imgPreview.value = null;
   progress.value = 0;
   uploaded.value = false;

package/dist/index.js

@@ -97,7 +97,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             modifyResourceConfig: { get: () => super.modifyResourceConfig }
         });
         return __awaiter(this, void 0, void 0, function* () {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
             _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
@@ -124,6 +124,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                 generateImages: this.options.generation ? true : false,
                 pathColumnLabel: resourceConfig.columns[pathColumnIndex].label,
                 fieldsForContext: (_c = this.options.generation) === null || _c === void 0 ? void 0 : _c.fieldsForContext,
+                maxWidth: (_d = this.options.preview) === null || _d === void 0 ? void 0 : _d.maxWidth,
             };
             // define components which will be imported from other components
             this.componentPath('imageGenerator.vue');
@@ -145,14 +146,14 @@ export default class UploadPlugin extends AdminForthPlugin {
             if (!resourceConfig.columns[pathColumnIndex].components) {
                 resourceConfig.columns[pathColumnIndex].components = {};
             }
-            if (((_d = this.options.preview) === null || _d === void 0 ? void 0 : _d.showInList) || ((_e = this.options.preview) === null || _e === void 0 ? void 0 : _e.showInList) === undefined) {
+            if (((_e = this.options.preview) === null || _e === void 0 ? void 0 : _e.showInList) || ((_f = this.options.preview) === null || _f === void 0 ? void 0 : _f.showInList) === undefined) {
                 // add preview column to list
                 resourceConfig.columns[pathColumnIndex].components.list = {
                     file: this.componentPath('preview.vue'),
                     meta: pluginFrontendOptions,
                 };
             }
-            if (((_f = this.options.preview) === null || _f === void 0 ? void 0 : _f.showInShow) || ((_g = this.options.preview) === null || _g === void 0 ? void 0 : _g.showInShow) === undefined) {
+            if (((_g = this.options.preview) === null || _g === void 0 ? void 0 : _g.showInShow) || ((_h = this.options.preview) === null || _h === void 0 ? void 0 : _h.showInShow) === undefined) {
                 resourceConfig.columns[pathColumnIndex].components.show = {
                     file: this.componentPath('preview.vue'),
                     meta: pluginFrontendOptions,
@@ -173,7 +174,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             virtualColumn.editingNote = pathColumn.editingNote;
             // ** HOOKS FOR CREATE **//
             // add beforeSave hook to save virtual column to path column
-            resourceConfig.hooks.create.beforeSave.push((_k) => __awaiter(this, [_k], void 0, function* ({ record }) {
+            resourceConfig.hooks.create.beforeSave.push((_l) => __awaiter(this, [_l], void 0, function* ({ record }) {
                 if (record[virtualColumn.name]) {
                     record[pathColumnName] = record[virtualColumn.name];
                     delete record[virtualColumn.name];
@@ -181,7 +182,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                 return { ok: true };
             }));
             // in afterSave hook, aremove tag adminforth-not-yet-used from the file
-            resourceConfig.hooks.create.afterSave.push((_l) => __awaiter(this, [_l], void 0, function* ({ record }) {
+            resourceConfig.hooks.create.afterSave.push((_m) => __awaiter(this, [_m], void 0, function* ({ record }) {
                 process.env.HEAVY_DEBUG && console.log('💾💾  after save ', record === null || record === void 0 ? void 0 : record.id);
                 if (record[pathColumnName]) {
                     const s3 = new S3({
@@ -205,7 +206,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             }));
             // ** HOOKS FOR SHOW **//
             // add show hook to get presigned URL
-            resourceConfig.hooks.show.afterDatasourceResponse.push((_m) => __awaiter(this, [_m], void 0, function* ({ response }) {
+            resourceConfig.hooks.show.afterDatasourceResponse.push((_o) => __awaiter(this, [_o], void 0, function* ({ response }) {
                 const record = response[0];
                 if (!record) {
                     return { ok: true };
@@ -223,8 +224,8 @@ export default class UploadPlugin extends AdminForthPlugin {
                 return { ok: true };
             }));
             // ** HOOKS FOR LIST **//
-            if (((_h = this.options.preview) === null || _h === void 0 ? void 0 : _h.showInList) || ((_j = this.options.preview) === null || _j === void 0 ? void 0 : _j.showInList) === undefined) {
-                resourceConfig.hooks.list.afterDatasourceResponse.push((_o) => __awaiter(this, [_o], void 0, function* ({ response }) {
+            if (((_j = this.options.preview) === null || _j === void 0 ? void 0 : _j.showInList) || ((_k = this.options.preview) === null || _k === void 0 ? void 0 : _k.showInList) === undefined) {
+                resourceConfig.hooks.list.afterDatasourceResponse.push((_p) => __awaiter(this, [_p], void 0, function* ({ response }) {
                     const s3 = new S3({
                         credentials: {
                             accessKeyId: this.options.s3AccessKeyId,
@@ -242,7 +243,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.afterSave.push((_p) => __awaiter(this, [_p], void 0, function* ({ record }) {
+            resourceConfig.hooks.delete.afterSave.push((_q) => __awaiter(this, [_q], void 0, function* ({ record }) {
                 if (record[pathColumnName]) {
                     const s3 = new S3({
                         credentials: {
@@ -274,7 +275,7 @@ export default class UploadPlugin extends AdminForthPlugin {
             }));
             // ** HOOKS FOR EDIT **//
             // beforeSave
-            resourceConfig.hooks.edit.beforeSave.push((_q) => __awaiter(this, [_q], void 0, function* ({ record }) {
+            resourceConfig.hooks.edit.beforeSave.push((_r) => __awaiter(this, [_r], void 0, function* ({ record }) {
                 // null is when value is removed
                 if (record[virtualColumn.name] || record[virtualColumn.name] === null) {
                     record[pathColumnName] = record[virtualColumn.name];
@@ -282,7 +283,7 @@ export default class UploadPlugin extends AdminForthPlugin {
                 return { ok: true };
             }));
             // add edit postSave hook to delete old file and remove tag from new file
-            resourceConfig.hooks.edit.afterSave.push((_r) => __awaiter(this, [_r], void 0, function* ({ record, oldRecord }) {
+            resourceConfig.hooks.edit.afterSave.push((_s) => __awaiter(this, [_s], void 0, function* ({ record, oldRecord }) {
                 if (record[virtualColumn.name] || record[virtualColumn.name] === null) {
                     const s3 = new S3({
                         credentials: {
@@ -371,7 +372,6 @@ export default class UploadPlugin extends AdminForthPlugin {
                 let previewUrl;
                 if ((_b = this.options.preview) === null || _b === void 0 ? void 0 : _b.previewUrl) {
                     previewUrl = this.options.preview.previewUrl({ s3Path });
-                    return;
                 }
                 else if (this.options.s3ACL === 'public-read') {
                     previewUrl = `https://${this.options.s3Bucket}.s3.${this.options.s3Region}.amazonaws.com/${s3Path}`;

package/index.ts

@@ -123,6 +123,7 @@ export default class UploadPlugin extends AdminForthPlugin {
       generateImages: this.options.generation ? true : false,
       pathColumnLabel: resourceConfig.columns[pathColumnIndex].label,
       fieldsForContext: this.options.generation?.fieldsForContext,
+      maxWidth: this.options.preview?.maxWidth,
     };
     // define components which will be imported from other components
     this.componentPath('imageGenerator.vue');
@@ -413,7 +414,6 @@ export default class UploadPlugin extends AdminForthPlugin {
         let previewUrl;
         if (this.options.preview?.previewUrl) {
           previewUrl = this.options.preview.previewUrl({ s3Path });
-          return;
         } else if (this.options.s3ACL === 'public-read') {
           previewUrl = `https://${this.options.s3Bucket}.s3.${this.options.s3Region}.amazonaws.com/${s3Path}`;
         } else {

package/package.json

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

package/types.ts

@@ -71,6 +71,11 @@ export type PluginOptions = {
      */
     showInShow?: boolean,
 
+    /**
+     * Maximum width of the preview image
+     */
+    maxWidth?: string,
+
     /**
      * Used to display preview (if it is image) in list and show views.
      * Defaulted to the AWS S3 presigned URL if resource is private or public URL if resource is public.