renusify 2.5.2 → 3.0.1

package/components/form/fileInput/single.vue

@@ -1,216 +1,380 @@
 <template>
-  <div ref="uploader" class="image-card elevation-lg br-md">
+  <div ref="uploader" class="image-card  br-md">
     <div class="file-holder text-center">
-      <div class="image-canvas" v-if="file||modelValue">
-        <r-btn icon class="image-close color-white">
-          <r-icon @click.prevent="fileDelete()" class="color-error-text" v-html="$r.icons.delete"></r-icon>
+      <div v-if="file || modelValue" class="image-canvas">
+        <r-btn class="image-close color-white" icon size="xs">
+          <r-icon @click.prevent="fileDelete()" class="color-error-text"
+                  v-html="$r.icons.delete"></r-icon>
         </r-btn>
         <r-progress-circle
-            :indeterminate=false
-            :modelValue="uploadPercentage"
-            :width="2"
-            class="image-progress"
-            size="50"
+          :indeterminate="false"
+          :model-value="uploadPercentage"
+          :width="2"
+          class="image-progress"
+          size="50"
         >
           {{ `% ${uploadPercentage}` }}
         </r-progress-circle>
-        <r-btn :href="fileLink" class="image-copy" icon target="_blank">
-          <r-icon v-html="$r.icons.eye"></r-icon>
+        <r-btn :href="fileLink" class="image-copy color-white" icon size="xs" target="_blank">
+          <r-icon class="color-black-text" v-html="$r.icons.eye"></r-icon>
         </r-btn>
-        <img v-if="isImg()" :class="`image ${imageStatus} `" :src="getUrl(file)">
+        <img v-if="isImg" :class="`image ${imageStatus} `" :src="getUrl(file)">
         <r-icon v-else
                 class="file" width="100" height="100" v-html="$r.icons.file"
                 :class="{'color-one-text':uploadPercentage===100}"
         ></r-icon>
       </div>
       <div class="file-meta pa-1" v-if="meta && uploadPercentage===100">
-        <r-text-input :label="$t(m,'renusify')" v-model="metaList[m]" @update:model-value="emit"
-                      v-for="(m,k) in meta" :key="k"
-                      :rules="metaRequired?['required']:[]"></r-text-input>
+        <r-text-input
+          v-for="(m,k) in meta"
+          :key="k"
+          v-model="metaList[m]"
+          :label="$t(m,'renusify')"
+          :rules="metaRequired?['required']:[]"
+          @update:model-value="emitFileLink"
+        ></r-text-input>
       </div>
     </div>
-    <r-icon @click.prevent.stop="pickFile"
-            class="cursor-pointer w-full h-full d-flex h-center v-center color-one-text" width="100" height="100"
-            v-html="$r.icons.plus"
-            v-if="showAdd"></r-icon>
-    <input :accept="accept"
-           @change="addFile()"
-           ref="file"
-           style="display: none"
-           type="file"
-           v-if="showFile"
+
+    <r-icon
+      v-if="showAdd"
+      class="pick-icon cursor-pointer d-flex h-center v-center color-one-text"
+      height="100"
+      width="100"
+      v-html="$r.icons.plus"
+      @click.prevent.stop="pickFile"
+    ></r-icon>
+    <input
+      v-if="showFile"
+      ref="fileInput"
+      :accept="accept"
+      style="display: none"
+      type="file"
+      @change="addFile"
     >
-    <r-modal v-model="showCrop" maxWidth="300px">
-        <r-cropper v-if="wPH&&file" :imgSrc="file" :selectImg="false" :w-p-h="wPH" get-blob showCropped
-                   @cropped="file=$event,checkSave()"></r-cropper>
+    <r-modal v-model="showCrop" max-width="300px" no-close-btn>
+      <r-cropper
+        v-if="wPH && file"
+        :img-src="file"
+        :select-img="false"
+        :w-p-h="wPH || 1"
+        get-blob
+        show-cropped
+        @cropped="handleCropped"
+      ></r-cropper>
     </r-modal>
   </div>
 </template>
 
-<script>
-import file from "./file.js";
-
-export default {
-  name: 'inputFile',
-  mixins: [file],
-  props: {
-    accept: {
-      default: '*',
-      type: String
-    },
-    wPH: [Number, String, Array],
-    maxFileSize: Number,
-    uploadLink: {
-      type: String,
-      required: true
-    },
-    modelValue: {
-      default: null,
-      type: [String, Object]
-    },
-    meta: {
-      type: Array,
-      default: null
-    },
-    metaRequired: Boolean
+<script setup>
+import { ref, computed, watch, onMounted, nextTick, inject } from 'vue'
+
+const props = defineProps({
+  accept: {
+    default: '*',
+    type: String
   },
-  emits: ['file-link', 'select'],
-  data() {
-    return {
-      showAdd: true,
-      showFile: true,
-      showCrop: false,
-      metaList: {}
-    }
+  wPH: [Number, String, Array],
+  maxFileSize: Number,
+  uploadLink: {
+    type: String,
+    required: true
   },
-  created() {
-    this.setValue()
+  modelValue: {
+    default: null,
+    type: [String, Object]
   },
-  methods: {
-    setValue() {
-      if (this.modelValue) {
-        this.fileLink = this.$helper.fix_url(this.meta ? this.modelValue['url'] : this.modelValue)
-        this.metaList = this.meta ? this.modelValue['meta'] : {}
-        this.showAdd = false
-        this.imageStatus = 'finished'
-        this.uploadPercentage = 100
-        this.emit()
-      }
-    },
-    getUrl(value) {
-      if (this.modelValue) {
-        return this.fileLink
-      } else {
-        return URL.createObjectURL(value)
-      }
-    },
-    isImg() {
-      let is = false
-      let image = this.accept.split('/')
-      is = image[0] === 'image'
-      if (!is) {
-        const p = this.fileLink.split('.')
-        is = ['jpg', 'jpeg', 'png', 'gif', 'svg'].includes(p[p.length - 1])
-      }
-      return is
-    },
-    emit() {
-      if (this.meta) {
-        this.$emit('file-link', {'url': this.fileLink, 'meta': this.metaList})
-      } else {
-        this.$emit('file-link', this.fileLink)
-      }
-      this.$emit('select', true)
-    }
+  meta: {
+    type: Array,
+    default: null
+  },
+  metaRequired: Boolean,
+  headers: Object
+})
+
+const emit = defineEmits(['file-link', 'select', 'delete', 'update:modelValue'])
+
+// Refs
+const uploader = ref(null)
+const fileInput = ref(null)
+const showAdd = ref(true)
+const showFile = ref(true)
+const showCrop = ref(false)
+const metaList = ref({})
+const imageStatus = ref('inProgress')
+const fileLink = ref('')
+const file = ref(null)
+const file_type = ref(null)
+const uploadPercentage = ref(0)
+const $axios = inject('axios')
+const $helper = inject('renusify').$helper
+let CancelTokenSource = null
 
+// Computed properties
+const isImg = computed(() => {
+  if (!fileLink.value) return false
+  const p = fileLink.value.split('.')
+  const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp', 'bmp', 'tiff']
+  const extension = p[p.length - 1].toLowerCase()
+  return imageExtensions.includes(extension)
+})
+
+// Methods
+const createCancelToken = () => {
+  if ($axios?.CancelToken) {
+    CancelTokenSource = $axios.CancelToken.source()
   }
 }
-</script>
 
-<style lang="scss">
-@use "../../../style/variables/base";
+const addFile = () => {
+  if (!fileInput.value?.files?.[0]) return
 
-.#{base.$prefix}file-uploader {
-  .image-card {
-    position: relative;
-    width: auto;
-    min-width: 150px;
-    min-height: 200px;
+  createCancelToken()
+  file.value = fileInput.value.files[0]
+  file_type.value = file.value.type
 
-    background-color: white;
+  const imgs = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/bmp', 'image/tiff']
 
+  if (props.wPH === undefined || !imgs.includes(file_type.value)) {
+    checkSave()
+  } else {
+    showCrop.value = true
+  }
 
-    .file-meta {
-      width: 250px;
-    }
+  showAdd.value = false
+}
 
-    .fails {
-      -webkit-filter: grayscale(100%);
-      filter: grayscale(100%);
-    }
+const pickFile = () => {
+  fileInput.value?.click()
+}
 
-    .inProgress {
-      -webkit-filter: blur(2px);
-      filter: blur(2px);
-    }
+const fileDelete = async () => {
+  if (CancelTokenSource) {
+    CancelTokenSource.cancel()
+  }
 
-    .finished {
-      -webkit-filter: blur(0px);
-      filter: blur(0px);
-    }
+  try {
+    await deleteImage()
+    showFile.value = false
+    await nextTick(() => {
+      showFile.value = true
+    })
 
-    .file {
-      left: 0;
-      right: 0;
-      position: absolute;
-      top: 0;
-      bottom: 0;
-    }
+    file.value = null
+    metaList.value = {}
+    uploadPercentage.value = 0
+    showAdd.value = true
 
-    .image {
-      width: auto;
-      min-width: 150px;
-      height: 200px;
-      z-index: -2;
-      opacity: 0.8;
-      max-width: 100%;
-    }
+    emit('delete', true)
+    emit('file-link', null)
+  } catch (error) {
+    console.error('Delete error:', error)
+  }
+}
 
-    .icon-100 {
-      width: 100px;
-      height: 100px;
-    }
+const checkSave = () => {
+  if (!file.value) return
 
-    .image-canvas {
-      width: auto;
-      min-width: 150px;
-      height: 200px;
-      position: relative;
-      background-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+  // Check file size
+  if (props.maxFileSize && file.value.size > props.maxFileSize) {
+    if (CancelTokenSource) {
+      CancelTokenSource.cancel()
     }
+    console.error('max file size must be:', props.maxFileSize)
+    console.error('current file size is:', file.value.size)
 
-    .image-close {
-      cursor: pointer;
-      position: absolute;
-      left: 5px;
-      top: 5px;
-      z-index: 1;
+    // Using $toast via window or global property
+    if (window.$toast || inject('$toast')) {
+      const toast = window.$toast || inject('$toast')
+      const t = window.$t || inject('$t')
+      toast(t(['max_allow_size', [props.maxFileSize / 1024]], 'renusify'))
     }
+    return
+  }
+
+  const imgs = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/bmp', 'image/tiff']
 
-    .image-progress {
-      z-index: 1;
-      position: absolute;
-      right: 5px;
-      top: 5px;
-      color: white;
+  // Check image aspect ratio if needed
+  if (props.wPH !== undefined && imgs.includes(file_type.value)) {
+    const img = new Image()
+    const objectUrl = URL.createObjectURL(file.value)
+
+    // Calculate allowed aspect ratios
+    const allowedWPH = calculateAllowedWPH(props.wPH)
+
+    img.onload = function() {
+      const currentWPH = parseFloat((this.width / this.height).toFixed(4))
+
+      if (!allowedWPH.includes(currentWPH)) {
+        if (CancelTokenSource) {
+          CancelTokenSource.cancel()
+        }
+
+        // Using $toast via window or global property
+        if (window.$toast || inject('$toast')) {
+          const toast = window.$toast || inject('$toast')
+          const t = window.$t || inject('$t')
+          toast(t(['image_w_p_h', [props.wPH]], 'renusify'))
+        }
+
+        console.error('width per height must be:', props.wPH, allowedWPH)
+        console.error('current width per height is:', currentWPH)
+      }
+
+      URL.revokeObjectURL(objectUrl)
+      saveImage()
     }
 
-    .image-copy {
-      z-index: 1;
-      position: absolute;
-      left: 5px;
-      bottom: 5px;
+    img.src = objectUrl
+    return
+  }
+
+  saveImage()
+}
+
+const calculateAllowedWPH = (wphInput) => {
+  const wphArray = []
+
+  if (Array.isArray(wphInput)) {
+    wphInput.forEach((item) => {
+      const strItem = item.toString()
+      if (strItem.includes('/')) {
+        const parts = strItem.split('/')
+        if (parts.length === 2) {
+          wphArray.push(parseFloat(parts[0]) / parseFloat(parts[1]))
+        } else {
+          wphArray.push(parseFloat(strItem))
+        }
+      } else {
+        wphArray.push(parseFloat(strItem))
+      }
+    })
+  } else {
+    const strItem = wphInput.toString()
+    if (strItem.includes('/')) {
+      const parts = strItem.split('/')
+      if (parts.length === 2) {
+        wphArray.push(parseFloat((parseFloat(parts[0]) / parseFloat(parts[1])).toFixed(4)))
+      } else {
+        wphArray.push(parseFloat(strItem))
+      }
+    } else {
+      wphArray.push(parseFloat(strItem))
     }
   }
+
+  return wphArray
+}
+
+const saveImage = async () => {
+  if (!file.value) return
+
+  imageStatus.value = 'inProgress'
+
+  const formData = new FormData()
+  formData.append('file', file.value, file.value.name)
+
+  let headers = props.headers || {}
+  headers['Content-Type'] = 'multipart/form-data'
+
+  let link = props.uploadLink
+  if (props.maxFileSize) {
+    const separator = link.includes('?') ? '&' : '?'
+    link += `${separator}max_size=${props.maxFileSize}`
+  }
+
+  try {
+    const response = await $axios.post(link, formData, {
+      headers,
+      onUploadProgress: (progressEvent) => {
+        if (progressEvent.total) {
+          uploadPercentage.value = Math.min(
+            parseInt(Math.floor((progressEvent.loaded * 100) / progressEvent.total)),
+            98
+          )
+        }
+      },
+      cancelToken: CancelTokenSource?.token
+    })
+
+    fileLink.value = response.data.link
+    uploadPercentage.value = 100
+    emitFileLink()
+    imageStatus.value = 'finished'
+  } catch (error) {
+    imageStatus.value = 'fails'
+    uploadPercentage.value = 0
+    console.error('Upload error:', error)
+  }
 }
-</style>
+
+const deleteImage = async () => {
+  if (!fileLink.value) return
+
+  try {
+    const response = await $axios.delete(props.uploadLink, {
+      data: { link: fileLink.value },
+      headers: props.headers
+    })
+    return response
+  } catch (error) {
+    console.error('Delete request error:', error)
+    throw error
+  }
+}
+
+const handleCropped = (croppedFile) => {
+  file.value = croppedFile
+  showCrop.value = false
+  checkSave()
+}
+
+const setValue = (value) => {
+  if (value) {
+    const fixUrl = $helper?.fix_url || ((url) => url)
+    fileLink.value = props.meta ? fixUrl(value['url']) : fixUrl(value)
+    metaList.value = props.meta ? value['meta'] : {}
+    showAdd.value = false
+    imageStatus.value = 'finished'
+    uploadPercentage.value = 100
+    emitFileLink()
+  }
+}
+
+const getUrl = (value) => {
+  if (props.modelValue) {
+    return fileLink.value
+  } else if (value) {
+    return URL.createObjectURL(value)
+  }
+  return ''
+}
+
+const emitFileLink = () => {
+  if (props.meta) {
+    emit('file-link', { 'url': fileLink.value, 'meta': metaList.value })
+  } else {
+    emit('file-link', fileLink.value)
+  }
+  emit('select', true)
+}
+
+// Watch for modelValue changes
+
+watch(() => props.modelValue, (newVal, oldVal) => {
+  if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
+    setValue(newVal)
+  }
+}, { immediate: true })
+
+// Initialize
+onMounted(() => {
+  createCancelToken()
+})
+
+// Expose methods if needed
+defineExpose({
+  fileDelete,
+  pickFile
+})
+</script>