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"
            :custom-request="customRequest"
            @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 {
  createImageBeforeUpload,
  createImageCustomRequest
} 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 = computed(() => ({
  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'] = createImageBeforeUpload((msg) =>
  message.error(msg)
)

function applyUploadedProductImage(body: unknown, meta: { uid?: string }) {
  loading.value = false
  const fileResource = normalizeUploadFileResponse(body)

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

  const doneItem = {
    uid: String(fileResource.id),
    name: fileResource.name || 'image',
    status: 'done' as const,
    url: fileResource.full_src,
    thumbUrl: fileResource.full_src,
    response: body
  }

  const matched = meta.uid && fileList.value.some((item) => item.uid === meta.uid)
  fileList.value = matched
    ? fileList.value.map((item) => (item.uid === meta.uid ? doneItem : item))
    : [
        ...fileList.value.filter((item) => item.status !== 'uploading'),
        doneItem
      ]

  message.success('تصویر با موفقیت بارگذاری شد')
  emits('ok', fileResource.id, body)
}

const customRequest: UploadProps['customRequest'] = createImageCustomRequest({
  action: () => uploadURL,
  getHeaders: () => fileHeader.value,
  messageError: (msg) => message.error(msg),
  onStarted: () => {
    loading.value = true
  },
  onUploaded: applyUploadedProductImage,
  onFailed: (_err, meta) => {
    loading.value = false
    if (meta.uid) {
      fileList.value = fileList.value.filter((item) => item.uid !== meta.uid)
    }
  }
})

function handleChange(info: UploadChangeParam) {
  fixFileCapture()

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

  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>