vue-simple/lib/upload/fileSelector.js

Use Vue in the simplest and easiest way, contain more than one of plugins and other to do that, i hope you will like it.

import FileOpenerBinder from './selector/opener';
import FileDraggerBinder from './selector/dragger';
import * as EventTypes from './events';

var FileSelector = function FileSelector(Vue) {
  var selector = null;

  Vue.directive('fileSelector', {
    // 初始化参数
    bind: function bind(el, binding) {
      var args = binding.value;
      args.type = args.type || 'input';
    },


    // 创建功能绑定实例
    inserted: function inserted(el, binding, vnode) {
      var args = binding.value;

      // function _changer(files) {
      //   if (vnode.$emit) {
      //     vnode.$emit(FILE_CHANGED, files);
      //   }
      //   else {
      //     const handler = vnode.data.on[FILE_CHANGED];
      //     if (typeof handler === 'function') handler.call(vnode, files);
      //   }
      // }

      // 通过 eventType 封装回调函数壳
      function _handler(type) {
        if (vnode.$emit) {
          return function (datas) {
            vnode.$emit(type, datas);
          };
        }

        return function (datas) {
          var handler = vnode.data.on[type];
          if (typeof handler === 'function') handler.call(vnode, datas);
        };
      }

      // 创建文件选择器
      if (args.type === 'drag') {
        // mouse of drag
        selector = new FileDraggerBinder({
          el: el,
          multiple: args.multiple,
          accept: args.accept,
          change: _handler(EventTypes.FILE_CHANGED),
          enter: _handler(EventTypes.DRAG_ENTER),
          dragover: _handler(EventTypes.DRAG_OVER),
          leave: _handler(EventTypes.DRAG_LEAVE)
        });
      } else {
        // open of input
        selector = new FileOpenerBinder({
          el: el,
          multiple: args.multiple,
          accept: args.accept,
          change: _handler(EventTypes.FILE_CHANGED)
        });
      }

      // 初始化
      selector.init();
    },


    // 清除选择器
    unbind: function unbind() {
      if (selector) {
        selector.destory();
        selector = null;
      }
    }
  });
};

export default FileSelector;