ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
322 lines (277 loc) • 9.48 kB
JavaScript
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends2 = require('babel-runtime/helpers/extends');
var _extends3 = _interopRequireDefault(_extends2);
var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
var _defineProperty3 = _interopRequireDefault(_defineProperty2);
var _vueTypes = require('../../_util/vue-types');
var _vueTypes2 = _interopRequireDefault(_vueTypes);
var _BaseMixin = require('../../_util/BaseMixin');
var _BaseMixin2 = _interopRequireDefault(_BaseMixin);
var _partition = require('lodash/partition');
var _partition2 = _interopRequireDefault(_partition);
var _classnames = require('classnames');
var _classnames2 = _interopRequireDefault(_classnames);
var _request = require('./request');
var _request2 = _interopRequireDefault(_request);
var _uid = require('./uid');
var _uid2 = _interopRequireDefault(_uid);
var _attrAccept = require('./attr-accept');
var _attrAccept2 = _interopRequireDefault(_attrAccept);
var _traverseFileTree = require('./traverseFileTree');
var _traverseFileTree2 = _interopRequireDefault(_traverseFileTree);
var _propsUtil = require('../../_util/props-util');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var upLoadPropTypes = {
componentTag: _vueTypes2['default'].string,
// style: PropTypes.object,
prefixCls: _vueTypes2['default'].string,
name: _vueTypes2['default'].string,
// className: PropTypes.string,
multiple: _vueTypes2['default'].bool,
directory: _vueTypes2['default'].bool,
disabled: _vueTypes2['default'].bool,
accept: _vueTypes2['default'].string,
// children: PropTypes.any,
// onStart: PropTypes.func,
data: _vueTypes2['default'].oneOfType([_vueTypes2['default'].object, _vueTypes2['default'].func]),
action: _vueTypes2['default'].oneOfType([_vueTypes2['default'].string, _vueTypes2['default'].func]),
headers: _vueTypes2['default'].object,
beforeUpload: _vueTypes2['default'].func,
customRequest: _vueTypes2['default'].func,
// onProgress: PropTypes.func,
withCredentials: _vueTypes2['default'].bool,
openFileDialogOnClick: _vueTypes2['default'].bool,
transformFile: _vueTypes2['default'].func,
method: _vueTypes2['default'].string
};
var AjaxUploader = {
inheritAttrs: false,
name: 'ajaxUploader',
mixins: [_BaseMixin2['default']],
props: upLoadPropTypes,
data: function data() {
this.reqs = {};
return {
uid: (0, _uid2['default'])()
};
},
mounted: function mounted() {
this._isMounted = true;
},
beforeDestroy: function beforeDestroy() {
this._isMounted = false;
this.abort();
},
methods: {
onChange: function onChange(e) {
var files = e.target.files;
this.uploadFiles(files);
this.reset();
},
onClick: function onClick() {
var el = this.$refs.fileInputRef;
if (!el) {
return;
}
el.click();
},
onKeyDown: function onKeyDown(e) {
if (e.key === 'Enter') {
this.onClick();
}
},
onFileDrop: function onFileDrop(e) {
var _this = this;
var multiple = this.$props.multiple;
e.preventDefault();
if (e.type === 'dragover') {
return;
}
if (this.directory) {
(0, _traverseFileTree2['default'])(e.dataTransfer.items, this.uploadFiles, function (_file) {
return (0, _attrAccept2['default'])(_file, _this.accept);
});
} else {
var files = (0, _partition2['default'])(Array.prototype.slice.call(e.dataTransfer.files), function (file) {
return (0, _attrAccept2['default'])(file, _this.accept);
});
var successFiles = files[0];
var errorFiles = files[1];
if (multiple === false) {
successFiles = successFiles.slice(0, 1);
}
this.uploadFiles(successFiles);
if (errorFiles.length) {
this.$emit('reject', errorFiles);
}
}
},
uploadFiles: function uploadFiles(files) {
var _this2 = this;
var postFiles = Array.prototype.slice.call(files);
postFiles.map(function (file) {
file.uid = (0, _uid2['default'])();
return file;
}).forEach(function (file) {
_this2.upload(file, postFiles);
});
},
upload: function upload(file, fileList) {
var _this3 = this;
if (!this.beforeUpload) {
// always async in case use react state to keep fileList
return setTimeout(function () {
return _this3.post(file);
}, 0);
}
var before = this.beforeUpload(file, fileList);
if (before && before.then) {
before.then(function (processedFile) {
var processedFileType = Object.prototype.toString.call(processedFile);
if (processedFileType === '[object File]' || processedFileType === '[object Blob]') {
return _this3.post(processedFile);
}
return _this3.post(file);
})['catch'](function (e) {
console && console.log(e); // eslint-disable-line
});
} else if (before !== false) {
setTimeout(function () {
return _this3.post(file);
}, 0);
}
},
post: function post(file) {
var _this4 = this;
if (!this._isMounted) {
return;
}
var props = this.$props;
var data = props.data;
var _props$transformFile = props.transformFile,
transformFile = _props$transformFile === undefined ? function (originFile) {
return originFile;
} : _props$transformFile;
new Promise(function (resolve) {
var action = _this4.action;
if (typeof action === 'function') {
return resolve(action(file));
}
resolve(action);
}).then(function (action) {
var uid = file.uid;
var request = _this4.customRequest || _request2['default'];
var transform = Promise.resolve(transformFile(file))['catch'](function (e) {
console.error(e); // eslint-disable-line no-console
});
transform.then(function (transformedFile) {
if (typeof data === 'function') {
data = data(file);
}
var requestOption = {
action: action,
filename: _this4.name,
data: data,
file: transformedFile,
headers: _this4.headers,
withCredentials: _this4.withCredentials,
method: props.method || 'post',
onProgress: function onProgress(e) {
_this4.$emit('progress', e, file);
},
onSuccess: function onSuccess(ret, xhr) {
delete _this4.reqs[uid];
_this4.$emit('success', ret, file, xhr);
},
onError: function onError(err, ret) {
delete _this4.reqs[uid];
_this4.$emit('error', err, ret, file);
}
};
_this4.reqs[uid] = request(requestOption);
_this4.$emit('start', file);
});
});
},
reset: function reset() {
this.setState({
uid: (0, _uid2['default'])()
});
},
abort: function abort(file) {
var reqs = this.reqs;
if (file) {
var uid = file;
if (file && file.uid) {
uid = file.uid;
}
if (reqs[uid] && reqs[uid].abort) {
reqs[uid].abort();
}
delete reqs[uid];
} else {
Object.keys(reqs).forEach(function (uid) {
if (reqs[uid] && reqs[uid].abort) {
reqs[uid].abort();
}
delete reqs[uid];
});
}
}
},
render: function render() {
var _classNames;
var h = arguments[0];
var $props = this.$props,
$attrs = this.$attrs;
var Tag = $props.componentTag,
prefixCls = $props.prefixCls,
disabled = $props.disabled,
multiple = $props.multiple,
accept = $props.accept,
directory = $props.directory,
openFileDialogOnClick = $props.openFileDialogOnClick;
var cls = (0, _classnames2['default'])((_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls, true), (0, _defineProperty3['default'])(_classNames, prefixCls + '-disabled', disabled), _classNames));
var events = disabled ? {} : {
click: openFileDialogOnClick ? this.onClick : function () {},
keydown: openFileDialogOnClick ? this.onKeyDown : function () {},
drop: this.onFileDrop,
dragover: this.onFileDrop
};
var tagProps = {
on: (0, _extends3['default'])({}, (0, _propsUtil.getListeners)(this), events),
attrs: {
role: 'button',
tabIndex: disabled ? null : '0'
},
'class': cls
};
return h(
Tag,
tagProps,
[h('input', {
attrs: {
id: $attrs.id,
type: 'file',
accept: accept,
directory: directory ? 'directory' : null,
webkitdirectory: directory ? 'webkitdirectory' : null,
multiple: multiple
},
ref: 'fileInputRef',
on: {
'click': function click(e) {
return e.stopPropagation();
},
'change': this.onChange
},
// https://github.com/ant-design/ant-design/issues/19948
key: this.uid,
style: { display: 'none' } }), this.$slots['default']]
);
}
};
exports['default'] = AjaxUploader;
;