@adminforth/upload 1.0.5

package/custom/package-lock.json

@@ -0,0 +1,21 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "custom",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "medium-zoom": "^1.1.0"
+      }
+    },
+    "node_modules/medium-zoom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.1.0.tgz",
+      "integrity": "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ=="
+    }
+  }
+}

package/custom/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "medium-zoom": "^1.1.0"
+  }
+}

package/custom/preview.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <template v-if="url">
+      <img 
+        v-if="contentType && contentType.startsWith('image')"
+        :src="url" 
+        class="rounded-md" 
+        ref="img"
+        data-zoomable
+        @click.stop="zoom.open()" 
+      />
+      <video 
+        v-else-if="contentType && contentType.startsWith('video')"
+        :src="url" 
+        class="rounded-md" 
+        controls
+        @click.stop >
+      </video>
+      
+      <a v-else :href="url" target="_blank"
+         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"
+      >
+        <!-- download file icon -->
+        <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+        </svg>
+        Download file
+      </a>
+    </template>
+    
+    
+  </div>
+</template>
+
+<style>
+  .medium-zoom-image {
+    z-index: 999999;
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .medium-zoom-overlay {
+    background: rgba(255, 255, 255, 0.8) !important
+  }
+  body.medium-zoom--opened aside {
+    filter: grayscale(1)
+  } 
+</style>
+
+<style scoped>
+  img {
+    min-width: 200px;
+  }
+  video {
+    min-width: 200px;
+  }
+</style>
+<script setup>
+import { ref, computed , onMounted, watch} from 'vue'
+import mediumZoom from 'medium-zoom'
+
+const img = ref(null);
+const zoom = ref(null);
+
+const props = defineProps({
+  record: Object,
+  column: Object,
+  meta: Object,
+})
+
+const url = computed(() => {
+  return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
+});
+
+
+// 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 u = new URL(url.value);
+  return guessContentType(u.pathname);
+});
+
+function guessContentType(url) {
+  if (!url) {
+    return null;
+  }
+  const ext = url.split('.').pop();
+  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'tiff'].includes(ext)) {
+    return 'image';
+  }
+  if (['mp4', 'webm', 'ogg', 'avi', 'mov', 'flv', 'wmv', 'mkv'].includes(ext)) {
+    return 'video';
+  }
+}
+
+
+onMounted(async () => {
+  
+  if (contentType.value?.startsWith('image')) {
+    zoom.value = mediumZoom(img.value, {
+      margin: 24,
+    });
+  }
+
+});
+
+</script>

package/custom/uploader.vue

@@ -0,0 +1,221 @@
+<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>
+
+              <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})` : '' }}
+                </p>
+              </template>
+
+              <div class="w-full bg-gray-200 rounded-full dark:bg-gray-700 mt-1 mb-2" v-if="progress > 0 && !uploaded">
+                <!-- progress bar  with smooth progress animation -->
+                <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full
+                  transition-all duration-200 ease-in-out
+                " 
+                  :style="{width: `${progress}%`}">{{ progress }}%
+                </div>
+              </div>
+
+              <div v-else-if="uploaded" class="flex items-center justify-center w-full mt-1">
+                <svg class="w-4 h-4 text-green-600 dark:text-green-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                </svg>
+                <p class="ml-2 text-sm text-green-600 dark:text-green-400 flex items-center">
+                  File uploaded
+                  <span class="text-xs text-gray-500 dark:text-gray-400">{{ humanifySize(uploadedSize) }}</span>
+                </p>
+
+                <button @click.stop.prevent="clear" class="ml-2 text-xs text-gray-500 dark:text-gray-400 hover:text-gray-600 dark:hover:text-gray-500
+                  hover:underline dark:hover:underline focus:outline-none">Clear</button>
+              </div>
+              
+          </div>
+          <input id="dropzone-file" type="file" class="hidden" @change="onFileChange" />
+      </label>
+  </div> 
+
+</template>
+
+<script setup>
+import { computed, ref, onMounted, watch } from 'vue'
+import { callAdminForthApi } from '@/utils' 
+
+const props = defineProps({
+  meta: String,
+  record: Object,
+})
+
+const emit = defineEmits([
+  'update:value',
+  'update:inValidity',
+  'update:emptiness',
+]);
+
+const imgPreview = ref(null);
+const progress = ref(0);
+
+const uploaded = ref(false);
+const uploadedSize = ref(0);
+
+watch(() => uploaded, (value) => {
+  emit('update:emptiness', !value);
+});
+
+onMounted(() => {
+  const previewColumnName = `previewUrl_${props.meta.pluginInstanceId}`;
+  if (props.record[previewColumnName]) {
+    imgPreview.value = props.record[previewColumnName];
+    uploaded.value = true;
+    emit('update:emptiness', false);
+  }
+});
+
+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
+});
+
+function clear() {
+  imgPreview.value = null;
+  progress.value = 0;
+  uploaded.value = false;
+  uploadedSize.value = 0;
+  emit('update:value', null);
+}
+
+function humanifySize(size) {
+  if (!size) {
+    return '';
+  }
+  const units = ['B', 'KB', 'MB', 'GB', 'TB']
+  let i = 0
+  while (size >= 1024 && i < units.length - 1) {
+    size /= 1024
+    i++
+  }
+  return `${size.toFixed(1)} ${units[i]}`
+}
+
+
+const onFileChange = async (e) => {
+  imgPreview.value = null;
+  progress.value = 0;
+  uploaded.value = false;
+  
+  const file = e.target.files[0]
+
+  // get filename, extension, size, mimeType
+  const { name, size, type } = file;
+
+  uploadedSize.value = size;
+
+
+  const extension = name.split('.').pop();
+  const nameNoExtension = name.replace(`.${extension}`, '');
+  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 ${humanifySize(size)} is too large. Please upload a file with a maximum size of ${humanifySize(props.meta.maxFileSize)}`,
+      variant: 'danger'
+    });
+    return;
+  }
+
+  emit('update:inValidity', 'Upload in progress...');
+  try {
+    // supports preview
+    if (type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        imgPreview.value = e.target.result;
+      }
+      reader.readAsDataURL(file);
+    }
+    
+    const { uploadUrl, s3Path } = await callAdminForthApi({
+        path: `/plugin/${props.meta.pluginInstanceId}/get_s3_upload_url`,
+        method: 'POST',
+        body: {
+          originalFilename: nameNoExtension,
+          contentType: type,
+          size,
+          originalExtension: extension,
+        },
+    });
+
+    const xhr = new XMLHttpRequest();
+    const success = await new Promise((resolve) => {
+      xhr.upload.onprogress = (e) => {
+        if (e.lengthComputable) {
+          progress.value = Math.round((e.loaded / e.total) * 100);
+        }
+      };
+      xhr.addEventListener('loadend', () => {
+        const success = xhr.readyState === 4 && xhr.status === 200;
+        // try to read response
+        resolve(success);
+      });
+      xhr.open('PUT', uploadUrl, true);
+      xhr.setRequestHeader('Content-Type', type);
+      xhr.setRequestHeader('x-amz-tagging', (new URL(uploadUrl)).searchParams.get('x-amz-tagging'));
+      xhr.send(file);
+    });
+    if (!success) {
+      window.adminforth.alert({
+        messageHtml: `<div>Sorry but the file was not be 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>`,
+        variant: 'danger',
+        timeout: 30,
+      });
+      imgPreview.value = null;
+      uploaded.value = false;
+      progress.value = 0;
+      return;
+    }
+    uploaded.value = true;
+    emit('update:value', s3Path);
+  } catch (error) {
+    console.error('Error uploading file:', error);
+    window.adminforth.alert({
+      message: `Sorry but the file was not be uploaded. Please try again: ${error.message}`,
+      variant: 'danger'
+    });
+    imgPreview.value = null;
+    uploaded.value = false;
+    progress.value = 0;
+  } finally {
+    emit('update:inValidity', false);
+  }
+}
+
+
+
+</script>

package/dist/custom/package-lock.json

@@ -0,0 +1,21 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "custom",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "medium-zoom": "^1.1.0"
+      }
+    },
+    "node_modules/medium-zoom": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/medium-zoom/-/medium-zoom-1.1.0.tgz",
+      "integrity": "sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ=="
+    }
+  }
+}

package/dist/custom/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "custom",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "medium-zoom": "^1.1.0"
+  }
+}

package/dist/custom/preview.vue

@@ -0,0 +1,105 @@
+<template>
+  <div>
+    <template v-if="url">
+      <img 
+        v-if="contentType && contentType.startsWith('image')"
+        :src="url" 
+        class="rounded-md" 
+        ref="img"
+        data-zoomable
+        @click.stop="zoom.open()" 
+      />
+      <video 
+        v-else-if="contentType && contentType.startsWith('video')"
+        :src="url" 
+        class="rounded-md" 
+        controls
+        @click.stop >
+      </video>
+      
+      <a v-else :href="url" target="_blank"
+         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"
+      >
+        <!-- download file icon -->
+        <svg class="w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+        </svg>
+        Download file
+      </a>
+    </template>
+    
+    
+  </div>
+</template>
+
+<style>
+  .medium-zoom-image {
+    z-index: 999999;
+    background: rgba(0, 0, 0, 0.8);
+  }
+  .medium-zoom-overlay {
+    background: rgba(255, 255, 255, 0.8) !important
+  }
+  body.medium-zoom--opened aside {
+    filter: grayscale(1)
+  } 
+</style>
+
+<style scoped>
+  img {
+    min-width: 200px;
+  }
+  video {
+    min-width: 200px;
+  }
+</style>
+<script setup>
+import { ref, computed , onMounted, watch} from 'vue'
+import mediumZoom from 'medium-zoom'
+
+const img = ref(null);
+const zoom = ref(null);
+
+const props = defineProps({
+  record: Object,
+  column: Object,
+  meta: Object,
+})
+
+const url = computed(() => {
+  return props.record[`previewUrl_${props.meta.pluginInstanceId}`];
+});
+
+
+// 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 u = new URL(url.value);
+  return guessContentType(u.pathname);
+});
+
+function guessContentType(url) {
+  if (!url) {
+    return null;
+  }
+  const ext = url.split('.').pop();
+  if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico', 'tiff'].includes(ext)) {
+    return 'image';
+  }
+  if (['mp4', 'webm', 'ogg', 'avi', 'mov', 'flv', 'wmv', 'mkv'].includes(ext)) {
+    return 'video';
+  }
+}
+
+
+onMounted(async () => {
+  
+  if (contentType.value?.startsWith('image')) {
+    zoom.value = mediumZoom(img.value, {
+      margin: 24,
+    });
+  }
+
+});
+
+</script>