import _extends from "@babel/runtime/helpers/esm/extends"; import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime"; import _typeof from "@babel/runtime/helpers/esm/typeof"; import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator"; import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray"; import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck"; import _createClass from "@babel/runtime/helpers/esm/createClass"; import _inherits from "@babel/runtime/helpers/esm/inherits"; import _createSuper from "@babel/runtime/helpers/esm/createSuper"; var _excluded = ["component", "prefixCls", "className", "disabled", "id", "style", "multiple", "accept", "capture", "children", "directory", "openFileDialogOnClick", "onMouseEnter", "onMouseLeave"]; import React, { Component } from 'react'; import classNames from 'classnames'; import pickAttrs from "rc-util/es/pickAttrs"; import defaultRequest from './request'; import getUid from './uid'; import attrAccept from './attr-accept'; import traverseFileTree from './traverseFileTree'; var AjaxUploader = /*#__PURE__*/function (_Component) { _inherits(AjaxUploader, _Component); var _super = _createSuper(AjaxUploader); function AjaxUploader() { var _this; _classCallCheck(this, AjaxUploader); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _super.call.apply(_super, [this].concat(args)); _this.state = { uid: getUid() }; _this.reqs = {}; _this.fileInput = void 0; _this._isMounted = void 0; _this.onChange = function (e) { var _this$props = _this.props, accept = _this$props.accept, directory = _this$props.directory; var files = e.target.files; var acceptedFiles = _toConsumableArray(files).filter(function (file) { return !directory || attrAccept(file, accept); }); _this.uploadFiles(acceptedFiles); _this.reset(); }; _this.onClick = function (e) { var el = _this.fileInput; if (!el) { return; } var _this$props2 = _this.props, children = _this$props2.children, onClick = _this$props2.onClick; if (children && children.type === 'button') { var parent = el.parentNode; parent.focus(); parent.querySelector('button').blur(); } el.click(); if (onClick) { onClick(e); } }; _this.onKeyDown = function (e) { if (e.key === 'Enter') { _this.onClick(e); } }; _this.onFileDrop = function (e) { var multiple = _this.props.multiple; e.preventDefault(); if (e.type === 'dragover') { return; } if (_this.props.directory) { traverseFileTree(Array.prototype.slice.call(e.dataTransfer.items), _this.uploadFiles, function (_file) { return attrAccept(_file, _this.props.accept); }); } else { var files = _toConsumableArray(e.dataTransfer.files).filter(function (file) { return attrAccept(file, _this.props.accept); }); if (multiple === false) { files = files.slice(0, 1); } _this.uploadFiles(files); } }; _this.uploadFiles = function (files) { var originFiles = _toConsumableArray(files); var postFiles = originFiles.map(function (file) { // eslint-disable-next-line no-param-reassign file.uid = getUid(); return _this.processFile(file, originFiles); }); // Batch upload files Promise.all(postFiles).then(function (fileList) { var onBatchStart = _this.props.onBatchStart; onBatchStart === null || onBatchStart === void 0 ? void 0 : onBatchStart(fileList.map(function (_ref) { var origin = _ref.origin, parsedFile = _ref.parsedFile; return { file: origin, parsedFile: parsedFile }; })); fileList.filter(function (file) { return file.parsedFile !== null; }).forEach(function (file) { _this.post(file); }); }); }; /** * Process file before upload. When all the file is ready, we start upload. */ _this.processFile = /*#__PURE__*/function () { var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, fileList) { var beforeUpload, transformedFile, action, mergedAction, data, mergedData, parsedData, parsedFile, mergedParsedFile; return _regeneratorRuntime().wrap(function _callee$(_context) { while (1) switch (_context.prev = _context.next) { case 0: beforeUpload = _this.props.beforeUpload; transformedFile = file; if (!beforeUpload) { _context.next = 14; break; } _context.prev = 3; _context.next = 6; return beforeUpload(file, fileList); case 6: transformedFile = _context.sent; _context.next = 12; break; case 9: _context.prev = 9; _context.t0 = _context["catch"](3); // Rejection will also trade as false transformedFile = false; case 12: if (!(transformedFile === false)) { _context.next = 14; break; } return _context.abrupt("return", { origin: file, parsedFile: null, action: null, data: null }); case 14: // Get latest action action = _this.props.action; if (!(typeof action === 'function')) { _context.next = 21; break; } _context.next = 18; return action(file); case 18: mergedAction = _context.sent; _context.next = 22; break; case 21: mergedAction = action; case 22: // Get latest data data = _this.props.data; if (!(typeof data === 'function')) { _context.next = 29; break; } _context.next = 26; return data(file); case 26: mergedData = _context.sent; _context.next = 30; break; case 29: mergedData = data; case 30: parsedData = // string type is from legacy `transformFile`. // Not sure if this will work since no related test case works with it (_typeof(transformedFile) === 'object' || typeof transformedFile === 'string') && transformedFile ? transformedFile : file; if (parsedData instanceof File) { parsedFile = parsedData; } else { parsedFile = new File([parsedData], file.name, { type: file.type }); } mergedParsedFile = parsedFile; mergedParsedFile.uid = file.uid; return _context.abrupt("return", { origin: file, data: mergedData, parsedFile: mergedParsedFile, action: mergedAction }); case 35: case "end": return _context.stop(); } }, _callee, null, [[3, 9]]); })); return function (_x, _x2) { return _ref2.apply(this, arguments); }; }(); _this.saveFileInput = function (node) { _this.fileInput = node; }; return _this; } _createClass(AjaxUploader, [{ key: "componentDidMount", value: function componentDidMount() { this._isMounted = true; } }, { key: "componentWillUnmount", value: function componentWillUnmount() { this._isMounted = false; this.abort(); } }, { key: "post", value: function post(_ref3) { var _this2 = this; var data = _ref3.data, origin = _ref3.origin, action = _ref3.action, parsedFile = _ref3.parsedFile; if (!this._isMounted) { return; } var _this$props3 = this.props, onStart = _this$props3.onStart, customRequest = _this$props3.customRequest, name = _this$props3.name, headers = _this$props3.headers, withCredentials = _this$props3.withCredentials, method = _this$props3.method; var uid = origin.uid; var request = customRequest || defaultRequest; var requestOption = { action: action, filename: name, data: data, file: parsedFile, headers: headers, withCredentials: withCredentials, method: method || 'post', onProgress: function onProgress(e) { var onProgress = _this2.props.onProgress; onProgress === null || onProgress === void 0 ? void 0 : onProgress(e, parsedFile); }, onSuccess: function onSuccess(ret, xhr) { var onSuccess = _this2.props.onSuccess; onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(ret, parsedFile, xhr); delete _this2.reqs[uid]; }, onError: function onError(err, ret) { var onError = _this2.props.onError; onError === null || onError === void 0 ? void 0 : onError(err, ret, parsedFile); delete _this2.reqs[uid]; } }; onStart(origin); this.reqs[uid] = request(requestOption); } }, { key: "reset", value: function reset() { this.setState({ uid: getUid() }); } }, { key: "abort", value: function abort(file) { var reqs = this.reqs; if (file) { var uid = file.uid ? file.uid : file; 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 _this$props4 = this.props, Tag = _this$props4.component, prefixCls = _this$props4.prefixCls, className = _this$props4.className, disabled = _this$props4.disabled, id = _this$props4.id, style = _this$props4.style, multiple = _this$props4.multiple, accept = _this$props4.accept, capture = _this$props4.capture, children = _this$props4.children, directory = _this$props4.directory, openFileDialogOnClick = _this$props4.openFileDialogOnClick, onMouseEnter = _this$props4.onMouseEnter, onMouseLeave = _this$props4.onMouseLeave, otherProps = _objectWithoutProperties(_this$props4, _excluded); var cls = classNames((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, "".concat(prefixCls, "-disabled"), disabled), _defineProperty(_classNames, className, className), _classNames)); // because input don't have directory/webkitdirectory type declaration var dirProps = directory ? { directory: 'directory', webkitdirectory: 'webkitdirectory' } : {}; var events = disabled ? {} : { onClick: openFileDialogOnClick ? this.onClick : function () {}, onKeyDown: openFileDialogOnClick ? this.onKeyDown : function () {}, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onDrop: this.onFileDrop, onDragOver: this.onFileDrop, tabIndex: '0' }; return /*#__PURE__*/React.createElement(Tag, _extends({}, events, { className: cls, role: "button", style: style }), /*#__PURE__*/React.createElement("input", _extends({}, pickAttrs(otherProps, { aria: true, data: true }), { id: id, disabled: disabled, 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 }, dirProps, { multiple: multiple, onChange: this.onChange }, capture != null ? { capture: capture } : {})), children); } }]); return AjaxUploader; }(Component); export default AjaxUploader;