'use strict'; 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 _classCallCheck2 = require('babel-runtime/helpers/classCallCheck'); var _classCallCheck3 = _interopRequireDefault(_classCallCheck2); var _createClass2 = require('babel-runtime/helpers/createClass'); var _createClass3 = _interopRequireDefault(_createClass2); var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn'); var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2); var _inherits2 = require('babel-runtime/helpers/inherits'); var _inherits3 = _interopRequireDefault(_inherits2); var _react = require('react'); var _react2 = _interopRequireDefault(_react); var _propTypes = require('prop-types'); var _propTypes2 = _interopRequireDefault(_propTypes); 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); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } var AjaxUploader = function (_Component) { (0, _inherits3['default'])(AjaxUploader, _Component); function AjaxUploader() { var _ref; var _temp, _this, _ret; (0, _classCallCheck3['default'])(this, AjaxUploader); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this = (0, _possibleConstructorReturn3['default'])(this, (_ref = AjaxUploader.__proto__ || Object.getPrototypeOf(AjaxUploader)).call.apply(_ref, [this].concat(args))), _this), _this.state = { uid: (0, _uid2['default'])() }, _this.reqs = {}, _this.onChange = function (e) { var files = e.target.files; _this.uploadFiles(files); _this.reset(); }, _this.onClick = function () { var el = _this.fileInput; if (!el) { return; } el.click(); }, _this.onKeyDown = function (e) { if (e.key === 'Enter') { _this.onClick(); } }, _this.onFileDrop = function (e) { var multiple = _this.props.multiple; e.preventDefault(); if (e.type === 'dragover') { return; } if (_this.props.directory) { (0, _traverseFileTree2['default'])(e.dataTransfer.items, _this.uploadFiles, function (_file) { return (0, _attrAccept2['default'])(_file, _this.props.accept); }); } else { var files = Array.prototype.slice.call(e.dataTransfer.files).filter(function (file) { return (0, _attrAccept2['default'])(file, _this.props.accept); }); if (multiple === false) { files = files.slice(0, 1); } _this.uploadFiles(files); } }, _this.uploadFiles = function (files) { var postFiles = Array.prototype.slice.call(files); postFiles.map(function (file) { file.uid = (0, _uid2['default'])(); return file; }).forEach(function (file) { _this.upload(file, postFiles); }); }, _this.saveFileInput = function (node) { _this.fileInput = node; }, _temp), (0, _possibleConstructorReturn3['default'])(_this, _ret); } (0, _createClass3['default'])(AjaxUploader, [{ key: 'componentDidMount', value: function componentDidMount() { this._isMounted = true; } }, { key: 'componentWillUnmount', value: function componentWillUnmount() { this._isMounted = false; this.abort(); } }, { key: 'upload', value: function upload(file, fileList) { var _this2 = this; var props = this.props; if (!props.beforeUpload) { // always async in case use react state to keep fileList return setTimeout(function () { return _this2.post(file); }, 0); } var before = props.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 _this2.post(processedFile); } return _this2.post(file); })['catch'](function (e) { console && console.log(e); // eslint-disable-line }); } else if (before !== false) { setTimeout(function () { return _this2.post(file); }, 0); } } }, { key: 'post', value: function post(file) { var _this3 = this; if (!this._isMounted) { return; } var props = this.props; var data = props.data; var onStart = props.onStart, onProgress = props.onProgress, _props$transformFile = props.transformFile, transformFile = _props$transformFile === undefined ? function (originFile) { return originFile; } : _props$transformFile; new Promise(function (resolve) { var action = props.action; if (typeof action === 'function') { return resolve(action(file)); } resolve(action); }).then(function (action) { var uid = file.uid; var request = props.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: props.name, data: data, file: transformedFile, headers: props.headers, withCredentials: props.withCredentials, method: props.method || 'post', onProgress: onProgress ? function (e) { onProgress(e, file); } : null, onSuccess: function onSuccess(ret, xhr) { delete _this3.reqs[uid]; props.onSuccess(ret, file, xhr); }, onError: function onError(err, ret) { delete _this3.reqs[uid]; props.onError(err, ret, file); } }; _this3.reqs[uid] = request(requestOption); onStart(file); }); }); } }, { key: 'reset', value: function reset() { this.setState({ uid: (0, _uid2['default'])() }); } }, { key: 'abort', value: 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]; }); } } }, { key: 'render', value: function render() { var _classNames; var _props = this.props, Tag = _props.component, prefixCls = _props.prefixCls, className = _props.className, disabled = _props.disabled, id = _props.id, style = _props.style, multiple = _props.multiple, accept = _props.accept, children = _props.children, 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), (0, _defineProperty3['default'])(_classNames, className, className), _classNames)); var events = disabled ? {} : { onClick: openFileDialogOnClick ? this.onClick : function () {}, onKeyDown: openFileDialogOnClick ? this.onKeyDown : function () {}, onDrop: this.onFileDrop, onDragOver: this.onFileDrop, tabIndex: '0' }; return _react2['default'].createElement( Tag, (0, _extends3['default'])({}, events, { className: cls, role: 'button', style: style }), _react2['default'].createElement('input', { id: id, type: 'file', ref: this.saveFileInput, onClick: function onClick(e) { return e.stopPropagation(); } // https://github.com/ant-design/ant-design/issues/19948 , key: this.state.uid, style: { display: 'none' }, accept: accept, directory: directory ? 'directory' : null, webkitdirectory: directory ? 'webkitdirectory' : null, multiple: multiple, onChange: this.onChange }), children ); } }]); return AjaxUploader; }(_react.Component); /* eslint react/no-is-mounted:0 react/sort-comp:0 */ AjaxUploader.propTypes = { id: _propTypes2['default'].string, component: _propTypes2['default'].string, style: _propTypes2['default'].object, prefixCls: _propTypes2['default'].string, className: _propTypes2['default'].string, multiple: _propTypes2['default'].bool, directory: _propTypes2['default'].bool, disabled: _propTypes2['default'].bool, accept: _propTypes2['default'].string, children: _propTypes2['default'].any, onStart: _propTypes2['default'].func, data: _propTypes2['default'].oneOfType([_propTypes2['default'].object, _propTypes2['default'].func]), action: _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func]), headers: _propTypes2['default'].object, beforeUpload: _propTypes2['default'].func, customRequest: _propTypes2['default'].func, onProgress: _propTypes2['default'].func, withCredentials: _propTypes2['default'].bool, openFileDialogOnClick: _propTypes2['default'].bool, transformFile: _propTypes2['default'].func }; exports['default'] = AjaxUploader; module.exports = exports['default'];