@fesjs/fes-design/es/input-file/useFileDrop.js

fes-design for PC

import { ref } from 'vue';
import { matchType } from '../upload/utils';

const useFileDrop = _ref => {
  let {
    accept,
    multiple,
    disabled,
    afterDrop,
    onFileTypeInvalid
  } = _ref;
  const isHovering = ref(false);
  const handleEnter = event => {
    if (disabled.value) {
      return;
    }
    event.preventDefault();
    isHovering.value = true;
  };
  const handleLeave = event => {
    if (disabled.value) {
      return;
    }
    event.preventDefault();
    isHovering.value = false;
  };
  const handleOver = event => {
    if (disabled.value) {
      return;
    }
    event.preventDefault();
  };
  const handleDrop = event => {
    if (disabled.value) {
      return;
    }
    event.preventDefault();
    isHovering.value = false;
    let files = Array.from(event.dataTransfer.files);
    if (!files.length) {
      return;
    }
    if (!multiple.value) {
      files = files.slice(0, 1);
    }
    const filterFiles = accept.value.length ? files.filter(file => {
      return matchType(file.name, file.type, accept.value);
    }) : files;
    if (filterFiles.length !== files.length) {
      onFileTypeInvalid === null || onFileTypeInvalid === void 0 || onFileTypeInvalid(files.filter(file => {
        return !matchType(file.name, file.type, accept.value);
      }));
    }
    afterDrop(files);
  };
  return {
    isHovering,
    handleEnter,
    handleLeave,
    handleOver,
    handleDrop
  };
};

export { useFileDrop };