boursecu_admin/src/components/ProductUploader/ProductImageUploader.vue

<template>
  <div :class="[prefixCls]">
    <div class="border border-solid border-blue-600 bg-gray-50 w-full rounded-md p-2">
      <div class="flex">
        <AUpload
            class="fix-capture"
            accept="image/*"
            v-model:file-list="fileList"
            name="file"
            list-type="picture-card"
            :show-upload-list="false"
            :action="uploadURL"
            :headers="fileHeader"
            :showUploadList="true"
            :before-upload="beforeUpload"
            @change="handleChange"
        >
          <div>
            <BaseIcon icon="vuesax-linear:add" color="#6B7280"/>
            <div class="text-gray-500 text-center text-xs font-normal">بارگذاری فایل</div>
          </div>
        </AUpload>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {UploadChangeParam, UploadProps} from 'ant-design-vue'
import {message} from 'ant-design-vue'
import {uploadURL} from '@root/config'
import {getToken} from '@/utils'
import {fixFileCapture} from '@/utils/fixFileCapture'
import {normalizeUploadFileResponse} from '@/utils/file'
import {createWebpBeforeUpload} from '@/utils/prepareImageForUpload'
import {usePrefix} from '@core/composable/usePrefix'
import {computed, onMounted, ref} from 'vue'

const {prefixCls} = usePrefix('product-image-uploader')
const loading = ref<boolean>(false)

const fileHeader = {
  Authorization: `Bearer ${getToken()}`
}

interface Props {
  fileList?: Array<FileList>
}

const props = withDefaults(defineProps<Props>(), {})

const emits = defineEmits(['update:fileList', 'ok', 'delete'])

const fileList = computed({
  get() {
    return props.fileList || ([] as Array<FileList>)
  },
  set(value) {
    emits('update:fileList', value)
  }
})

const beforeUpload: UploadProps['beforeUpload'] = createWebpBeforeUpload((msg) =>
  message.error(msg)
)

function handleChange(info: UploadChangeParam) {
  fixFileCapture()

  if (info.file.status === 'uploading') {
    loading.value = true
    return
  }

  if (info.file.status === 'error') {
    loading.value = false
    message.error('خطا در بارگذاری')
  }

  if (info.file.status === 'done') {
    loading.value = false
    const fileResource = normalizeUploadFileResponse(info.file.response)

    if (!fileResource?.id || !fileResource.full_src) {
      fileList.value = fileList.value.filter((item) => item.uid !== info.file.uid)
      message.error('خطا در ساخت آدرس تصویر')
      return
    }

    fileList.value = fileList.value.map((item) =>
      item.uid === info.file.uid
        ? {
            ...item,
            uid: String(fileResource.id),
            status: 'done',
            url: fileResource.full_src,
            thumbUrl: fileResource.full_src,
          }
        : item,
    )
    message.success('تصویر با موفقیت بارگذاری شد')
    emits('ok', fileResource.id, info.file.response)
  }
  if (info.file.status === 'removed') {
    emits('delete', info.file.uid)
  }
}

onMounted(() => {
  fixFileCapture()
})
</script>

<style lang="less">
@prefix: ~'@{prefixCls}-product-image-uploader';

.@{prefix} {
  width: 100%;

  .ant-upload-rtl.ant-upload.ant-upload-select-picture-card {
    margin: 0 !important;
    border: none;
  }

  .ant-upload-picture-card-wrapper {
    width: fit-content;
  }

  .ant-upload {
    width: 78px !important;
    height: 78px !important;
    background-color: #eff6ff;
    border: dashed 1px #93c5fd;
    border-radius: 4px;
  }

  .ant-upload-list-picture-card-container {
    margin: 0;
    width: 78px !important;
    height: 78px !important;
  }

  .ant-upload-list-picture-card .ant-upload-list-item {
    padding: 0;
    border: none;
  }

  .ant-upload-list-picture-card .ant-upload-list-item-info {
    border-radius: 4px;
  }

  .ant-upload-list {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
  }
}
</style>