@sigmaott/base-next 1.4.0 → 1.4.2

package/src/components/Asset/FormUploadAsset.vue

@@ -1,647 +1,647 @@
-<script setup lang="ts">
-import axios from 'axios'
-import * as R from 'remeda'
-import MediaInfo from 'mediainfo.js'
-import FormUploadAssetProgress from './FormUploadAssetProgress.vue'
-
-const props = withDefaults(
-  defineProps<{ limit?: string[] }>(),
-  {
-    limit: () => ['image', 'video', 'audio'],
-  },
-)
-
-const emit = defineEmits<{
-  (e: 'uploadSuccess', assetId: string): void
-}>()
-
-const { modelValue: visible } = defineModels<{
-  modelValue: boolean
-}>()
-
-function getInitialValues() {
-  return {
-    playlistIds: [],
-    tags: [],
-    category: 'Promo Video',
-    expire: null,
-    files: [],
-    name: '',
-  }
-}
-
-const { assetDomain } = usePickerStore()
-const { t } = useI18n()
-const qc = useQueryClient()
-const isDisabled = ref(false)
-
-const enableAdd = ref(false)
-const SPECIAL_CHARACTERS_NAME_SPACE = /[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/
-const CONTAIN_NAME_SPACE = /^[\w -]*$/
-function validNamePlaylist(value) {
-  if (!value.trim()) {
-    ElMessage.error($t('base.cannot_contain_all_space', { name: 'Name Playlist' }))
-    return false
-  }
-  else if (SPECIAL_CHARACTERS_NAME_SPACE.test(value)) {
-    ElMessage.error($t('base.name_can_not_special_characters', { name: 'Name Playlist' }))
-    return false
-  }
-  else if (!CONTAIN_NAME_SPACE.test(value)) {
-    ElMessage.error($t('base.name_cannot_contain_accented_characters', { name: 'Name Playlist' }))
-    return false
-  }
-  else {
-    return true
-  }
-}
-function checkPlaylists(lists) {
-  return !lists.some(value => !validNamePlaylist(value))
-}
-const { formRef, formValue, handleSubmit, handleValidate, isError, register, registerArray } = useElForm({
-  initialValues: getInitialValues(),
-  async onSubmit(values) {
-    enableAdd.value = checkPlaylists(values.playlistIds)
-    if (enableAdd.value) {
-      isDisabled.value = true
-      setTimeout(() => {
-        showProgress()
-        visible.value = false
-      }, 1000)
-      clearErrorFiles()
-
-      const promises = values.files.map((item, index) => startUpload({
-        ...item,
-        playlistIds: values.playlistIds,
-        tags: values.tags,
-        category: values.category,
-        expire: values.expire ? values.expire * 24 * 60 * 60 : null,
-      }, item.id))
-
-      const res = await Promise.all(promises)
-      const successLength = res.filter(item => Boolean(item)).length
-      qc.invalidateQueries(['api/library/assets'])
-      formValue.value = getInitialValues()
-
-      if (successLength) {
-        ElMessage.success(t('message.success'))
-      }
-
-      isDisabled.value = false
-    }
-  },
-})
-const analyzing = ref(false)
-
-function getProp(path: string) {
-  return path
-}
-const [playlistIdsValue, playlistIdsAttrs] = register<string[]>(getProp('playlistIds'), [])
-const [tagValue, tagAttrs] = register<string[]>(getProp('tags'), [
-  {
-    trigger: ['blur', 'change'],
-    validator: tagValidator(35),
-  },
-])
-const [categoryValue, categoryAttrs] = register<string[]>(getProp('category'), [])
-const [expireDateValue, expireDateAttrs] = register<number>(getProp('expire'), [])
-
-const [filesValue, filesAttrs, { add, remove, addFirst }] = registerArray<{
-  name: string
-  file: File
-  error: string | boolean
-}>(getProp('files'), [])
-
-function clearErrorFiles() {
-  filesValue.value = filesValue.value.filter(file => !file.error)
-}
-
-const { files, open, reset: resetFiles } = useFileDialog({
-  accept: '.png, .jpg, .mp3, .mp4, .wav',
-})
-
-const { ignoreUpdates } = watchIgnorable(files, () => {
-  handleDropFiles(files.value)
-})
-
-async function handleDropFiles(files: FileList | null) {
-  if (!files)
-    return
-
-  const limitFiles = 100
-  let i = 0
-  for (const file of files) {
-    i++
-    if (i > limitFiles) {
-      ElMessage.warning(t('base_library.maximum_files_per_upload_is_100_files'))
-      break
-    }
-    const error = await validateFiles(file)
-    const payload = {
-      file,
-      error,
-      name: file.name,
-      percentage: 0,
-      controller: new AbortController(),
-      aborted: false,
-    }
-    if (!error) {
-      addFirst(payload)
-    }
-    else {
-      add(payload)
-    }
-  }
-
-  ignoreUpdates(() => {
-    resetFiles()
-  })
-  // reset file input
-}
-
-function onDrop(_files: FileList | null) {
-  handleDropFiles(_files)
-  ignoreUpdates(() => {
-    files.value = _files
-  })
-}
-
-const dropZoneRef = ref<HTMLElement>()
-const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
-
-async function validateFiles(file: File) {
-  analyzing.value = true
-  const mediainfo = await MediaInfo({
-    locateFile: () => {
-      // HARD Code media info wasm path
-      return 'https://resource-ott.gviet.vn/sdk/assets/MediaInfoModule.wasm'
-    },
-  })
-
-  const readChunk = file => (chunkSize, offset) =>
-    new Promise((resolve, reject) => {
-      const reader = new FileReader()
-      reader.onload = (event) => {
-        if (event.target.error)
-          reject(event.target.error)
-
-        resolve(new Uint8Array(event.target.result))
-      }
-      reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
-    })
-
-  const result = await mediainfo.analyzeData(() => file?.size, readChunk(file))
-  analyzing.value = false
-
-  let type = result.media.track.find(track => track['@type'] !== 'General')
-  // Video | Image | Audio
-  if (!type) {
-    return t('validate.file.unknown')
-  }
-
-  type = type['@type'].toLowerCase()
-
-  if (!props.limit.includes(type)) {
-    return t('validate.file.unknown')
-  }
-
-  const fileSize = file.size! / (1024 * 1024) // MB
-
-  const sizeErrorMsg = {
-    video: t('validate.file.size.video'),
-    image: t('validate.file.size.image'),
-    audio: t('validate.file.size.audio'),
-  }
-
-  const sizeLimit = {
-    video: 100 * 1024,
-    image: 1024,
-    audio: 100,
-  }
-  if (!sizeLimit[type]) {
-    return t('validate.file.unknown')
-  }
-
-  if (fileSize > sizeLimit[type]) {
-    return sizeErrorMsg[type]
-  }
-  // everything is ok
-
-  return false
-}
-
-const isLoading = ref(false)
-
-function updatePercentageFiles(id: string, percentage: number) {
-  const index = filesValue.value.findIndex(file => file.id === id)
-  if (index !== -1) {
-    filesValue.value[index].percentage = percentage
-  }
-}
-
-async function startUpload(item: any, id: string) {
-  try {
-    isLoading.value = true
-    const data = await $libraryApi('api/library/assets/create-multipart-upload', {
-      method: 'POST',
-      body: {
-        name: item.name,
-        tags: item.tags,
-        originFileName: item.file.name,
-        category: item.category,
-        playlistIds: item.playlistIds,
-        expire: item.expire,
-      },
-      headers: {
-        noLoading: true,
-      },
-    })
-
-    const { assetId, uploadId } = data
-    const index = filesValue.value.findIndex(file => file.id === id)
-    if (index !== -1) {
-      filesValue.value[index].assetId = assetId
-    }
-
-    const res = await uploadMultipartFile(assetId, uploadId, item, id)
-    return res
-  }
-  catch (err) {
-    console.log('[LOG] ~ err:', err)
-  }
-  finally {
-    isLoading.value = false
-  }
-}
-
-async function uploadMultipartFile(assetId: string, uploadId: string, item: any, itemId: string) {
-  try {
-    const FILE_CHUNK_SIZE = 10000000 // 10MB
-    const fileSize = item.file.size
-    const NUM_CHUNKS = Math.floor(fileSize / FILE_CHUNK_SIZE) + 1
-    const promisesArray = []
-    let start, end, blob
-    for (let index = 1; index < NUM_CHUNKS + 1; index++) {
-      start = (index - 1) * FILE_CHUNK_SIZE
-      end = index * FILE_CHUNK_SIZE
-      blob
-        = index < NUM_CHUNKS
-          ? item.file.slice(start, end)
-          : item.file.slice(start)
-
-      // Generate presigned URL for each part
-      const getUploadUrlResp = await $libraryApi('api/library/assets/presign-multipart-upload-url', {
-        method: 'POST',
-        body: {
-          assetId,
-          partNumber: index,
-          uploadId,
-        },
-        headers: {
-          noLoading: true,
-          noNotify: true,
-        },
-        signal: item.controller.signal,
-      })
-
-      const { preSignUrl } = getUploadUrlResp
-
-      const preSignUrlWithHost = getAssetURI(preSignUrl, `${ensureSuffix('/', assetDomain.value)}`)
-
-      // Puts each file part into the storage server
-      const uploadResp = await axios.put(preSignUrlWithHost, blob, {
-        signal: item.controller.signal,
-      })
-
-      updatePercentageFiles(itemId, 25 + Math.floor((index / NUM_CHUNKS) * 50))
-      promisesArray.push(uploadResp)
-    }
-
-    const resolvedArray = await Promise.all(promisesArray)
-    const uploadPartsArray: any[] = []
-    resolvedArray.forEach((resolvedPromise, index) => {
-      uploadPartsArray.push({
-        ETag: resolvedPromise.headers.etag,
-        PartNumber: index + 1,
-      })
-    })
-    updatePercentageFiles(itemId, 99)
-
-    // Calls the CompleteMultipartUpload endpoint in the backend server
-    const completeUploadResp = await $libraryApi('api/library/assets/complete-multipart-upload', {
-      method: 'POST',
-      body: {
-        assetId,
-        uploadId,
-        parts: uploadPartsArray,
-      },
-      headers: {
-        noLoading: true,
-        noNotify: true,
-      },
-      signal: item.controller.signal,
-    })
-
-    updatePercentageFiles(itemId, 100)
-
-    await sleep(1500)
-    return completeUploadResp
-  }
-  catch (err) {
-    const index = filesValue.value.findIndex(file => file.id === itemId)
-    if (index !== -1) {
-      filesValue.value[index].error = 'Upload fail'
-    }
-  }
-}
-const hasExpiration = ref(false)
-
-function handleClose(done: () => void) {
-  if (!R.equals(formValue.value, getInitialValues())) {
-    ElMessageBox.confirm(t('message.close'), t('message.Warning'), {
-      type: 'warning',
-    })
-      .then(() => {
-        formValue.value = getInitialValues()
-        hasExpiration.value = false
-        done()
-      })
-      .catch(() => {
-        // catch error
-      })
-  }
-  else {
-    formValue.value = getInitialValues()
-    hasExpiration.value = false
-    done()
-  }
-}
-
-function onDeleteTag() {
-  formRef.value?.validateField('tags')
-}
-
-const suggestLimit = computed(() => {
-  const suggests = [
-    { label: t('suggest.video'), value: 'video' },
-    { label: t('suggest.image'), value: 'image' },
-    { label: t('suggest.audio'), value: 'audio' },
-  ]
-  return suggests.filter(suggest => props.limit.find(limit => limit === suggest.value))
-})
-
-const categories = computed(() => [
-  'Promo Video',
-  'Film',
-  'Video Short',
-  'Podcast',
-  'Series',
-  'Sport Clip',
-  'Song',
-  'Voice Over',
-  'Graphics File',
-  'Presentation',
-])
-
-const hasFile = computed(() => filesValue.value?.length > 0)
-const errorFiles = computed(() => filesValue.value.filter(file => file.error).length)
-const validFiles = computed(() => filesValue.value.filter(file => !file.error).length)
-
-const { appContext } = getCurrentInstance()!
-
-function showProgress() {
-  ElNotification({
-    message: h(FormUploadAssetProgress, {
-      files: filesValue.value,
-    }),
-    position: 'bottom-right',
-    duration: 0,
-    customClass: 'w-600px! [--el-notification-padding:14px_26px_14px_13px]',
-  }, appContext)
-}
-
-watch(hasExpiration, (newValue) => {
-  expireDateValue.value = newValue ? 365 : null
-})
-</script>
-
-<template>
-  <el-dialog
-    v-model="visible"
-    center
-    :title="t('title')"
-    width="750px"
-    :before-close="handleClose"
-  >
-    <template v-if="!hasFile">
-      <div
-        v-loading="analyzing"
-        class="relative w-full border-1 border-$el-border-color rounded-lg border-dashed p-10"
-        :class="[isOverDropZone ? 'bg-$el-color-info-light-7' : '']"
-      >
-        <div v-if="formValue.file" class="flex items-center justify-center gap-4">
-          <div class="line-clamp-1 flex items-center gap-2 overflow-hidden">
-            <div class="i-carbon:document text-18px" />
-            <span>{{ formValue.file.name }}</span>
-          </div>
-
-          <el-button
-            class=""
-            circle
-            size="small"
-            @click="() => formValue.file = null"
-          >
-            <div class="i-carbon:close" />
-          </el-button>
-        </div>
-        <div v-else class="flex flex-col items-center justify-center gap-4">
-          <div ref="dropZoneRef" class="w-full flex flex-col select-none items-center justify-center gap-2">
-            <div class="i-ri:upload-cloud-2-fill text-7" />
-            <div class="text-base">
-              {{ t('label.dropFile') }}
-            </div>
-          </div>
-
-          <el-button type="primary" @click="open()">
-            {{ t('label.chooseFile') }}
-          </el-button>
-        </div>
-      </div>
-
-      <el-alert show-icon :closable="false" class="mx-auto mt-4 w-1/2">
-        <div class="flex flex-col leading-20px">
-          <div v-for="suggest in suggestLimit" :key="suggest.value">
-            {{ suggest.label }}
-          </div>
-          <div>
-            {{ t('base.maximum_files_per_upload_100_files') }}
-          </div>
-        </div>
-      </el-alert>
-    </template>
-
-    <template v-else>
-      <div class="mb-4 text-center text-balance text-sm font-400">
-        <p class="">
-          {{ $t('base_library.you_have_0_files_ready_to_upload_please_review_your_files_before', [filesValue.length
-            - errorFiles]) }}
-        </p>
-        <p>{{ $t('base_library.the_system_is_ready_to_upload_the_checked_files') }}</p>
-      </div>
-      <DevOnly>
-        <VueJsonPretty :data="formValue" />
-      </DevOnly>
-      <el-form
-        ref="formRef"
-        :model="formValue"
-        label-position="left"
-        label-width="120px"
-        @validate="handleValidate"
-        @submit.prevent
-      >
-        <el-form-item label="Playlist" v-bind="playlistIdsAttrs">
-          <SSAssetPlaylistInfiniteSelect v-model="playlistIdsValue" />
-        </el-form-item>
-        <el-form-item :label="t('label.tag')" v-bind="tagAttrs">
-          <SSInputTags v-model="tagValue" @delete-tag="onDeleteTag" />
-        </el-form-item>
-        <el-form-item label="Category" v-bind="categoryAttrs">
-          <el-select v-model="categoryValue" class="w-full">
-            <el-option
-              v-for="item in categories"
-              :key="item"
-              :label="item"
-              :value="item"
-            />
-          </el-select>
-        </el-form-item>
-        <el-form-item label="Expiration" v-bind="expireDateAttrs">
-          <div class="flex items-center gap-2">
-            <el-switch v-model="hasExpiration" />
-            <template v-if="hasExpiration">
-              <el-input-number
-                v-model="expireDateValue"
-                :min="1"
-                :max="365"
-                :step="1"
-                step-strictly
-                controls-position="right"
-                :clearable="true"
-              />
-              <span class="ml-2 text-sm">
-                Days
-              </span>
-            </template>
-          </div>
-        </el-form-item>
-
-        <p class="my-4 text-sm font-bold">
-          {{ $t('base_library.total') }}: {{ filesValue.length }} files | {{ filesValue.length - errorFiles }} files
-          valid - {{ errorFiles }} file invalid
-        </p>
-        <div class="grid grid-cols-1 max-h-500px items-start gap-x-4 gap-y-2 of-y-auto px-2 py-2">
-          <template v-for="(item, i) in filesValue" :key="item.id">
-            <SSAssetFormUploadAssetItem :item="item" :prop="`files[${i}]`" @remove="remove(item.id)" />
-          </template>
-        </div>
-      </el-form>
-      <span class="flex justify-end">
-        <el-button :disabled="isDisabled" @click="handleClose(() => visible = false)">{{ t('actions.cancel')
-        }}</el-button>
-        <el-button
-          :disabled="isDisabled || validFiles === 0"
-          type="primary"
-          :loading="isLoading"
-          @click="handleSubmit"
-        >{{ t('actions.submit') }}</el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<i18n lang="yaml">
-en:
-  title: Upload multimedia content
-  label:
-    chooseFile: Choose files
-    dropFile: Drag & drog files to upload
-    name: Name
-    tag: Tag
-    file: File
-  placeholder:
-    name: Enter media name
-    tag: New tag
-    file: Choose file asset
-    url: Enter url
-  actions:
-    submit: Submit
-    cancel: Cancel
-  message:
-    close: Are you sure you want to close this?
-    success: Upload success
-    fail: Upload fail
-    uploadLoading: File upload may take await a few minutes. Please await!
-  validate:
-    name:
-      required: Please input name asset
-      length: Length should be 1 to 50 characters
-    file:
-      unknown: File type is not supported
-      required: Please input file asset
-      size:
-        image: Image size should not exceed 100MB!
-        video: Video size should not exceed 100GB!
-        audio: Audio file size should not exceed 1GB!
-    tags:
-      accentedCharacters: The tag cannot contain accented and spaced characters
-      noSpecialCharacters: Tag item can not contain special characters
-      itemLength: Tag item  can not contain more than 35 characters
-      duplicate: Tag item can not contain duplicate
-      limit: The number of tags should not exceed 50
-  suggest:
-    image: 'Maximum image size: 100MB'
-    video: 'Maximum video size: 100GB'
-    audio: 'Maximum audio size: 1GB'
-vi:
-  title: Tải lên nội dung đa phương tiện
-  label:
-    chooseFile: Chọn tệp
-    dropFile: Kéo và thả tệp để tải lên
-    name: Tên
-    tag: Thẻ
-    file: Tệp
-  placeholder:
-    name: Nhập tên đa phương tiện
-    tag: Thẻ mới
-    file: Chọn tệp nội dung
-    url: Nhập liên kết
-  actions:
-    submit: Tải lên
-    cancel: Hủy
-  message:
-    close: Bạn có chắc chắn muốn đóng?
-    success: Tải lên thành công
-    fail: Tải lên thất bại
-    uploadLoading: Tải lên có thể mất một vài phút. Vui lòng đợi!
-  suggest:
-    image: 'Ảnh kích thước tối đa: 100MB'
-    video: 'Video kích thước tối đa: 100GB'
-    audio: 'Âm thanh kích thước tối đa: 1GB'
-  validate:
-    name:
-      required: Vui lòng nhập tên nội dung
-      length: Độ dài phải từ 1 đến 50 ký tự
-    file:
-      unknown: Định dạng tệp không hỗ trợ
-      required: Vui lòng nhập chọn tệp nội dung
-      size:
-        image: Kích thước ảnh không được vượt quá 100MB!
-        video: Kích thước video không được vượt quá 100GB!
-        audio: Kích thước tệp âm thanh không được vượt quá 1GB!
-    tags:
-      accentedCharacters: Thẻ không được chứa ký tự có dấu và khoảng cách
-      noSpecialCharacters: Mục thẻ không được chứa các ký tự đặc biệt
-      itemLength: Mục thẻ không được chứa nhiều hơn 35 ký tự
-      duplicate: Mục thẻ không được chứa trùng lặp
-      limit: Số lượng thẻ không vượt quá 50
-</i18n>
+<script setup lang="ts">
+import axios from 'axios'
+import * as R from 'remeda'
+import MediaInfo from 'mediainfo.js'
+import FormUploadAssetProgress from './FormUploadAssetProgress.vue'
+
+const props = withDefaults(
+  defineProps<{ limit?: string[] }>(),
+  {
+    limit: () => ['image', 'video', 'audio'],
+  },
+)
+
+const emit = defineEmits<{
+  (e: 'uploadSuccess', assetId: string): void
+}>()
+
+const { modelValue: visible } = defineModels<{
+  modelValue: boolean
+}>()
+
+function getInitialValues() {
+  return {
+    playlistIds: [],
+    tags: [],
+    category: 'Promo Video',
+    expire: null,
+    files: [],
+    name: '',
+  }
+}
+
+const { assetDomain } = usePickerStore()
+const { t } = useI18n()
+const qc = useQueryClient()
+const isDisabled = ref(false)
+
+const enableAdd = ref(false)
+const SPECIAL_CHARACTERS_NAME_SPACE = /[`!@#$%^&*()+=[\]{};':"\\|,.<>/?~]/
+const CONTAIN_NAME_SPACE = /^[\w -]*$/
+function validNamePlaylist(value) {
+  if (!value.trim()) {
+    ElMessage.error($t('base.cannot_contain_all_space', { name: 'Name Playlist' }))
+    return false
+  }
+  else if (SPECIAL_CHARACTERS_NAME_SPACE.test(value)) {
+    ElMessage.error($t('base.name_can_not_special_characters', { name: 'Name Playlist' }))
+    return false
+  }
+  else if (!CONTAIN_NAME_SPACE.test(value)) {
+    ElMessage.error($t('base.name_cannot_contain_accented_characters', { name: 'Name Playlist' }))
+    return false
+  }
+  else {
+    return true
+  }
+}
+function checkPlaylists(lists) {
+  return !lists.some(value => !validNamePlaylist(value))
+}
+const { formRef, formValue, handleSubmit, handleValidate, isError, register, registerArray } = useElForm({
+  initialValues: getInitialValues(),
+  async onSubmit(values) {
+    enableAdd.value = checkPlaylists(values.playlistIds)
+    if (enableAdd.value) {
+      isDisabled.value = true
+      setTimeout(() => {
+        showProgress()
+        visible.value = false
+      }, 1000)
+      clearErrorFiles()
+
+      const promises = values.files.map((item, index) => startUpload({
+        ...item,
+        playlistIds: values.playlistIds,
+        tags: values.tags,
+        category: values.category,
+        expire: values.expire ? values.expire * 24 * 60 * 60 : null,
+      }, item.id))
+
+      const res = await Promise.all(promises)
+      const successLength = res.filter(item => Boolean(item)).length
+      qc.invalidateQueries(['api/library/assets'])
+      formValue.value = getInitialValues()
+
+      if (successLength) {
+        ElMessage.success(t('message.success'))
+      }
+
+      isDisabled.value = false
+    }
+  },
+})
+const analyzing = ref(false)
+
+function getProp(path: string) {
+  return path
+}
+const [playlistIdsValue, playlistIdsAttrs] = register<string[]>(getProp('playlistIds'), [])
+const [tagValue, tagAttrs] = register<string[]>(getProp('tags'), [
+  {
+    trigger: ['blur', 'change'],
+    validator: tagValidator(35),
+  },
+])
+const [categoryValue, categoryAttrs] = register<string[]>(getProp('category'), [])
+const [expireDateValue, expireDateAttrs] = register<number>(getProp('expire'), [])
+
+const [filesValue, filesAttrs, { add, remove, addFirst }] = registerArray<{
+  name: string
+  file: File
+  error: string | boolean
+}>(getProp('files'), [])
+
+function clearErrorFiles() {
+  filesValue.value = filesValue.value.filter(file => !file.error)
+}
+
+const { files, open, reset: resetFiles } = useFileDialog({
+  accept: '.png, .jpg, .mp3, .mp4, .wav',
+})
+
+const { ignoreUpdates } = watchIgnorable(files, () => {
+  handleDropFiles(files.value)
+})
+
+async function handleDropFiles(files: FileList | null) {
+  if (!files)
+    return
+
+  const limitFiles = 100
+  let i = 0
+  for (const file of files) {
+    i++
+    if (i > limitFiles) {
+      ElMessage.warning(t('base_library.maximum_files_per_upload_is_100_files'))
+      break
+    }
+    const error = await validateFiles(file)
+    const payload = {
+      file,
+      error,
+      name: file.name,
+      percentage: 0,
+      controller: new AbortController(),
+      aborted: false,
+    }
+    if (!error) {
+      addFirst(payload)
+    }
+    else {
+      add(payload)
+    }
+  }
+
+  ignoreUpdates(() => {
+    resetFiles()
+  })
+  // reset file input
+}
+
+function onDrop(_files: FileList | null) {
+  handleDropFiles(_files)
+  ignoreUpdates(() => {
+    files.value = _files
+  })
+}
+
+const dropZoneRef = ref<HTMLElement>()
+const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
+
+async function validateFiles(file: File) {
+  analyzing.value = true
+  const mediainfo = await MediaInfo({
+    locateFile: () => {
+      // HARD Code media info wasm path
+      return 'https://resource-ott.gviet.vn/sdk/assets/MediaInfoModule.wasm'
+    },
+  })
+
+  const readChunk = file => (chunkSize, offset) =>
+    new Promise((resolve, reject) => {
+      const reader = new FileReader()
+      reader.onload = (event) => {
+        if (event.target.error)
+          reject(event.target.error)
+
+        resolve(new Uint8Array(event.target.result))
+      }
+      reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
+    })
+
+  const result = await mediainfo.analyzeData(() => file?.size, readChunk(file))
+  analyzing.value = false
+
+  let type = result.media.track.find(track => track['@type'] !== 'General')
+  // Video | Image | Audio
+  if (!type) {
+    return t('validate.file.unknown')
+  }
+
+  type = type['@type'].toLowerCase()
+
+  if (!props.limit.includes(type)) {
+    return t('validate.file.unknown')
+  }
+
+  const fileSize = file.size! / (1024 * 1024) // MB
+
+  const sizeErrorMsg = {
+    video: t('validate.file.size.video'),
+    image: t('validate.file.size.image'),
+    audio: t('validate.file.size.audio'),
+  }
+
+  const sizeLimit = {
+    video: 100 * 1024,
+    image: 1024,
+    audio: 100,
+  }
+  if (!sizeLimit[type]) {
+    return t('validate.file.unknown')
+  }
+
+  if (fileSize > sizeLimit[type]) {
+    return sizeErrorMsg[type]
+  }
+  // everything is ok
+
+  return false
+}
+
+const isLoading = ref(false)
+
+function updatePercentageFiles(id: string, percentage: number) {
+  const index = filesValue.value.findIndex(file => file.id === id)
+  if (index !== -1) {
+    filesValue.value[index].percentage = percentage
+  }
+}
+
+async function startUpload(item: any, id: string) {
+  try {
+    isLoading.value = true
+    const data = await $libraryApi('api/library/assets/create-multipart-upload', {
+      method: 'POST',
+      body: {
+        name: item.name,
+        tags: item.tags,
+        originFileName: item.file.name,
+        category: item.category,
+        playlistIds: item.playlistIds,
+        expire: item.expire,
+      },
+      headers: {
+        noLoading: true,
+      },
+    })
+
+    const { assetId, uploadId } = data
+    const index = filesValue.value.findIndex(file => file.id === id)
+    if (index !== -1) {
+      filesValue.value[index].assetId = assetId
+    }
+
+    const res = await uploadMultipartFile(assetId, uploadId, item, id)
+    return res
+  }
+  catch (err) {
+    console.log('[LOG] ~ err:', err)
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+async function uploadMultipartFile(assetId: string, uploadId: string, item: any, itemId: string) {
+  try {
+    const FILE_CHUNK_SIZE = 10000000 // 10MB
+    const fileSize = item.file.size
+    const NUM_CHUNKS = Math.floor(fileSize / FILE_CHUNK_SIZE) + 1
+    const promisesArray = []
+    let start, end, blob
+    for (let index = 1; index < NUM_CHUNKS + 1; index++) {
+      start = (index - 1) * FILE_CHUNK_SIZE
+      end = index * FILE_CHUNK_SIZE
+      blob
+        = index < NUM_CHUNKS
+          ? item.file.slice(start, end)
+          : item.file.slice(start)
+
+      // Generate presigned URL for each part
+      const getUploadUrlResp = await $libraryApi('api/library/assets/presign-multipart-upload-url', {
+        method: 'POST',
+        body: {
+          assetId,
+          partNumber: index,
+          uploadId,
+        },
+        headers: {
+          noLoading: true,
+          noNotify: true,
+        },
+        signal: item.controller.signal,
+      })
+
+      const { preSignUrl } = getUploadUrlResp
+
+      const preSignUrlWithHost = getAssetURI(preSignUrl, `${ensureSuffix('/', assetDomain.value)}`)
+
+      // Puts each file part into the storage server
+      const uploadResp = await axios.put(preSignUrlWithHost, blob, {
+        signal: item.controller.signal,
+      })
+
+      updatePercentageFiles(itemId, 25 + Math.floor((index / NUM_CHUNKS) * 50))
+      promisesArray.push(uploadResp)
+    }
+
+    const resolvedArray = await Promise.all(promisesArray)
+    const uploadPartsArray: any[] = []
+    resolvedArray.forEach((resolvedPromise, index) => {
+      uploadPartsArray.push({
+        ETag: resolvedPromise.headers.etag,
+        PartNumber: index + 1,
+      })
+    })
+    updatePercentageFiles(itemId, 99)
+
+    // Calls the CompleteMultipartUpload endpoint in the backend server
+    const completeUploadResp = await $libraryApi('api/library/assets/complete-multipart-upload', {
+      method: 'POST',
+      body: {
+        assetId,
+        uploadId,
+        parts: uploadPartsArray,
+      },
+      headers: {
+        noLoading: true,
+        noNotify: true,
+      },
+      signal: item.controller.signal,
+    })
+
+    updatePercentageFiles(itemId, 100)
+
+    await sleep(1500)
+    return completeUploadResp
+  }
+  catch (err) {
+    const index = filesValue.value.findIndex(file => file.id === itemId)
+    if (index !== -1) {
+      filesValue.value[index].error = 'Upload fail'
+    }
+  }
+}
+const hasExpiration = ref(false)
+
+function handleClose(done: () => void) {
+  if (!R.equals(formValue.value, getInitialValues())) {
+    ElMessageBox.confirm(t('message.close'), t('message.Warning'), {
+      type: 'warning',
+    })
+      .then(() => {
+        formValue.value = getInitialValues()
+        hasExpiration.value = false
+        done()
+      })
+      .catch(() => {
+        // catch error
+      })
+  }
+  else {
+    formValue.value = getInitialValues()
+    hasExpiration.value = false
+    done()
+  }
+}
+
+function onDeleteTag() {
+  formRef.value?.validateField('tags')
+}
+
+const suggestLimit = computed(() => {
+  const suggests = [
+    { label: t('suggest.video'), value: 'video' },
+    { label: t('suggest.image'), value: 'image' },
+    { label: t('suggest.audio'), value: 'audio' },
+  ]
+  return suggests.filter(suggest => props.limit.find(limit => limit === suggest.value))
+})
+
+const categories = computed(() => [
+  'Promo Video',
+  'Film',
+  'Video Short',
+  'Podcast',
+  'Series',
+  'Sport Clip',
+  'Song',
+  'Voice Over',
+  'Graphics File',
+  'Presentation',
+])
+
+const hasFile = computed(() => filesValue.value?.length > 0)
+const errorFiles = computed(() => filesValue.value.filter(file => file.error).length)
+const validFiles = computed(() => filesValue.value.filter(file => !file.error).length)
+
+const { appContext } = getCurrentInstance()!
+
+function showProgress() {
+  ElNotification({
+    message: h(FormUploadAssetProgress, {
+      files: filesValue.value,
+    }),
+    position: 'bottom-right',
+    duration: 0,
+    customClass: 'w-600px! [--el-notification-padding:14px_26px_14px_13px]',
+  }, appContext)
+}
+
+watch(hasExpiration, (newValue) => {
+  expireDateValue.value = newValue ? 365 : null
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    center
+    :title="t('title')"
+    width="750px"
+    :before-close="handleClose"
+  >
+    <template v-if="!hasFile">
+      <div
+        v-loading="analyzing"
+        class="relative w-full border-1 border-$el-border-color rounded-lg border-dashed p-10"
+        :class="[isOverDropZone ? 'bg-$el-color-info-light-7' : '']"
+      >
+        <div v-if="formValue.file" class="flex items-center justify-center gap-4">
+          <div class="line-clamp-1 flex items-center gap-2 overflow-hidden">
+            <div class="i-carbon:document text-18px" />
+            <span>{{ formValue.file.name }}</span>
+          </div>
+
+          <el-button
+            class=""
+            circle
+            size="small"
+            @click="() => formValue.file = null"
+          >
+            <div class="i-carbon:close" />
+          </el-button>
+        </div>
+        <div v-else class="flex flex-col items-center justify-center gap-4">
+          <div ref="dropZoneRef" class="w-full flex flex-col select-none items-center justify-center gap-2">
+            <div class="i-ri:upload-cloud-2-fill text-7" />
+            <div class="text-base">
+              {{ t('label.dropFile') }}
+            </div>
+          </div>
+
+          <el-button type="primary" @click="open()">
+            {{ t('label.chooseFile') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-alert show-icon :closable="false" class="mx-auto mt-4 w-1/2">
+        <div class="flex flex-col leading-20px">
+          <div v-for="suggest in suggestLimit" :key="suggest.value">
+            {{ suggest.label }}
+          </div>
+          <div>
+            {{ t('base.maximum_files_per_upload_100_files') }}
+          </div>
+        </div>
+      </el-alert>
+    </template>
+
+    <template v-else>
+      <div class="mb-4 text-center text-balance text-sm font-400">
+        <p class="">
+          {{ $t('base_library.you_have_0_files_ready_to_upload_please_review_your_files_before', [filesValue.length
+            - errorFiles]) }}
+        </p>
+        <p>{{ $t('base_library.the_system_is_ready_to_upload_the_checked_files') }}</p>
+      </div>
+      <DevOnly>
+        <VueJsonPretty :data="formValue" />
+      </DevOnly>
+      <el-form
+        ref="formRef"
+        :model="formValue"
+        label-position="left"
+        label-width="120px"
+        @validate="handleValidate"
+        @submit.prevent
+      >
+        <el-form-item label="Playlist" v-bind="playlistIdsAttrs">
+          <SSAssetPlaylistInfiniteSelect v-model="playlistIdsValue" />
+        </el-form-item>
+        <el-form-item :label="t('label.tag')" v-bind="tagAttrs">
+          <SSInputTags v-model="tagValue" @delete-tag="onDeleteTag" />
+        </el-form-item>
+        <el-form-item label="Category" v-bind="categoryAttrs">
+          <el-select v-model="categoryValue" class="w-full">
+            <el-option
+              v-for="item in categories"
+              :key="item"
+              :label="item"
+              :value="item"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="Expiration" v-bind="expireDateAttrs">
+          <div class="flex items-center gap-2">
+            <el-switch v-model="hasExpiration" />
+            <template v-if="hasExpiration">
+              <el-input-number
+                v-model="expireDateValue"
+                :min="1"
+                :max="365"
+                :step="1"
+                step-strictly
+                controls-position="right"
+                :clearable="true"
+              />
+              <span class="ml-2 text-sm">
+                Days
+              </span>
+            </template>
+          </div>
+        </el-form-item>
+
+        <p class="my-4 text-sm font-bold">
+          {{ $t('base_library.total') }}: {{ filesValue.length }} files | {{ filesValue.length - errorFiles }} files
+          valid - {{ errorFiles }} file invalid
+        </p>
+        <div class="grid grid-cols-1 max-h-500px items-start gap-x-4 gap-y-2 of-y-auto px-2 py-2">
+          <template v-for="(item, i) in filesValue" :key="item.id">
+            <SSAssetFormUploadAssetItem :item="item" :prop="`files[${i}]`" @remove="remove(item.id)" />
+          </template>
+        </div>
+      </el-form>
+      <span class="flex justify-end">
+        <el-button :disabled="isDisabled" @click="handleClose(() => visible = false)">{{ t('actions.cancel')
+        }}</el-button>
+        <el-button
+          :disabled="isDisabled || validFiles === 0"
+          type="primary"
+          :loading="isLoading"
+          @click="handleSubmit"
+        >{{ t('actions.submit') }}</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<i18n lang="yaml">
+en:
+  title: Upload multimedia content
+  label:
+    chooseFile: Choose files
+    dropFile: Drag & drog files to upload
+    name: Name
+    tag: Tag
+    file: File
+  placeholder:
+    name: Enter media name
+    tag: New tag
+    file: Choose file asset
+    url: Enter url
+  actions:
+    submit: Submit
+    cancel: Cancel
+  message:
+    close: Are you sure you want to close this?
+    success: Upload success
+    fail: Upload fail
+    uploadLoading: File upload may take await a few minutes. Please await!
+  validate:
+    name:
+      required: Please input name asset
+      length: Length should be 1 to 50 characters
+    file:
+      unknown: File type is not supported
+      required: Please input file asset
+      size:
+        image: Image size should not exceed 100MB!
+        video: Video size should not exceed 100GB!
+        audio: Audio file size should not exceed 1GB!
+    tags:
+      accentedCharacters: The tag cannot contain accented and spaced characters
+      noSpecialCharacters: Tag item can not contain special characters
+      itemLength: Tag item  can not contain more than 35 characters
+      duplicate: Tag item can not contain duplicate
+      limit: The number of tags should not exceed 50
+  suggest:
+    image: 'Maximum image size: 100MB'
+    video: 'Maximum video size: 100GB'
+    audio: 'Maximum audio size: 1GB'
+vi:
+  title: Tải lên nội dung đa phương tiện
+  label:
+    chooseFile: Chọn tệp
+    dropFile: Kéo và thả tệp để tải lên
+    name: Tên
+    tag: Thẻ
+    file: Tệp
+  placeholder:
+    name: Nhập tên đa phương tiện
+    tag: Thẻ mới
+    file: Chọn tệp nội dung
+    url: Nhập liên kết
+  actions:
+    submit: Tải lên
+    cancel: Hủy
+  message:
+    close: Bạn có chắc chắn muốn đóng?
+    success: Tải lên thành công
+    fail: Tải lên thất bại
+    uploadLoading: Tải lên có thể mất một vài phút. Vui lòng đợi!
+  suggest:
+    image: 'Ảnh kích thước tối đa: 100MB'
+    video: 'Video kích thước tối đa: 100GB'
+    audio: 'Âm thanh kích thước tối đa: 1GB'
+  validate:
+    name:
+      required: Vui lòng nhập tên nội dung
+      length: Độ dài phải từ 1 đến 50 ký tự
+    file:
+      unknown: Định dạng tệp không hỗ trợ
+      required: Vui lòng nhập chọn tệp nội dung
+      size:
+        image: Kích thước ảnh không được vượt quá 100MB!
+        video: Kích thước video không được vượt quá 100GB!
+        audio: Kích thước tệp âm thanh không được vượt quá 1GB!
+    tags:
+      accentedCharacters: Thẻ không được chứa ký tự có dấu và khoảng cách
+      noSpecialCharacters: Mục thẻ không được chứa các ký tự đặc biệt
+      itemLength: Mục thẻ không được chứa nhiều hơn 35 ký tự
+      duplicate: Mục thẻ không được chứa trùng lặp
+      limit: Số lượng thẻ không vượt quá 50
+</i18n>