element-plus/es/components/upload/src/upload-dragger2.mjs.map

A Component Library for Vue 3

{"version":3,"file":"upload-dragger2.mjs","names":[],"sources":["../../../../../../packages/components/upload/src/upload-dragger.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('dragger'), ns.is('dragover', dragover)]\"\n    @drop.prevent=\"onDrop\"\n    @dragover.prevent=\"onDragover\"\n    @dragleave.prevent=\"onDragleave\"\n  >\n    <slot />\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { inject, ref } from 'vue'\nimport { useNamespace } from '@element-plus/hooks'\nimport { useFormDisabled } from '@element-plus/components/form'\nimport { throwError } from '@element-plus/utils/error'\nimport { flatten } from 'lodash-unified'\nimport { uploadContextKey } from './constants'\nimport { uploadDraggerEmits } from './upload-dragger'\n\nimport type { UploadDraggerProps } from './upload-dragger'\nimport type { UploadRawFile } from './upload'\n\nconst COMPONENT_NAME = 'ElUploadDrag'\n\ndefineOptions({\n  name: COMPONENT_NAME,\n})\n\nconst props = withDefaults(defineProps<UploadDraggerProps>(), {\n  disabled: undefined,\n})\nconst emit = defineEmits(uploadDraggerEmits)\n\nconst uploaderContext = inject(uploadContextKey)\nif (!uploaderContext) {\n  throwError(\n    COMPONENT_NAME,\n    'usage: <el-upload><el-upload-dragger /></el-upload>'\n  )\n}\n\nconst ns = useNamespace('upload')\nconst dragover = ref(false)\nconst disabled = useFormDisabled()\n\nconst getFile = (entry: FileSystemFileEntry): Promise<File> => {\n  return new Promise((resolve, reject) => entry.file(resolve, reject))\n}\n\nconst getAllFiles = async (\n  entry: FileSystemEntry\n): Promise<UploadRawFile[]> => {\n  try {\n    if (entry.isFile) {\n      const file = (await getFile(\n        entry as FileSystemFileEntry\n      )) as UploadRawFile\n      file.isDirectory = false\n      return [file]\n    }\n    if (entry.isDirectory) {\n      const dirReader = (entry as FileSystemDirectoryEntry).createReader()\n      const getEntries = (): Promise<FileSystemEntry[]> => {\n        return new Promise((resolve, reject) =>\n          dirReader.readEntries(resolve, reject)\n        )\n      }\n\n      const entries: FileSystemEntry[] = []\n      let readEntries = await getEntries()\n      /**\n       * In Chromium-based browsers, readEntries() will only return the first 100 FileSystemEntry instances.\n       * https://developer.mozilla.org/en-US/docs/Web/API/FileSystemDirectoryReader/readEntries#:~:text=In%20Chromium%2Dbased%20browsers%2C%20readEntries()%20will%20only%20return%20the%20first%20100%20FileSystemEntry%20instances.%20In%20order%20to%20obtain%20all%20of%20the%20instances%2C%20readEntries()%20must%20be%20called%20multiple%20times.\n       */\n      while (readEntries.length > 0) {\n        entries.push(...readEntries)\n        readEntries = await getEntries()\n      }\n\n      const filePromises = entries.map((entry) =>\n        getAllFiles(entry).catch(() => [])\n      )\n\n      const files = await Promise.all(filePromises)\n      return flatten(files)\n    }\n  } catch {\n    return []\n  }\n  return []\n}\n\nconst onDrop = async (e: DragEvent) => {\n  if (disabled.value) return\n  dragover.value = false\n\n  e.stopPropagation()\n\n  const files = Array.from(e.dataTransfer!.files) as UploadRawFile[]\n  const items = e.dataTransfer!.items || []\n\n  if (props.directory) {\n    const entries = Array.from(items)\n      .map((item) => item?.webkitGetAsEntry?.())\n      .filter((entry) => entry) as FileSystemEntry[]\n\n    const allFiles = await Promise.all(entries.map(getAllFiles))\n    emit('file', flatten(allFiles))\n    return\n  }\n\n  files.forEach((file, index) => {\n    const item = items[index]\n    const entry = item?.webkitGetAsEntry?.()\n    if (entry) {\n      file.isDirectory = entry.isDirectory\n    }\n  })\n  emit('file', files)\n}\n\nconst onDragover = () => {\n  if (!disabled.value) dragover.value = true\n}\n\nconst onDragleave = (e: DragEvent) => {\n  if (!(e.currentTarget as Element).contains(e.relatedTarget as Element))\n    dragover.value = false\n}\n</script>\n"],"mappings":""}