383 lines
15 KiB
JavaScript
383 lines
15 KiB
JavaScript
|
"use strict";
|
||
|
|
|
||
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
||
|
|
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.default = void 0;
|
||
|
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
||
|
|
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
|
||
|
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
||
|
|
var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
|
||
|
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
||
|
|
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
||
|
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
||
|
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
||
|
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
||
|
|
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
||
|
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
||
|
|
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
|
||
|
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
||
|
|
var _classnames = _interopRequireDefault(require("classnames"));
|
||
|
|
var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
|
||
|
|
var _react = _interopRequireWildcard(require("react"));
|
||
|
|
var _attrAccept = _interopRequireDefault(require("./attr-accept"));
|
||
|
|
var _request = _interopRequireDefault(require("./request"));
|
||
|
|
var _traverseFileTree = _interopRequireDefault(require("./traverseFileTree"));
|
||
|
|
var _uid = _interopRequireDefault(require("./uid"));
|
||
|
|
var _excluded = ["component", "prefixCls", "className", "classNames", "disabled", "id", "style", "styles", "multiple", "accept", "capture", "children", "directory", "openFileDialogOnClick", "onMouseEnter", "onMouseLeave", "hasControlInside"];
|
||
|
|
/* eslint react/no-is-mounted:0,react/sort-comp:0,react/prop-types:0 */
|
||
|
|
var AjaxUploader = /*#__PURE__*/function (_Component) {
|
||
|
|
(0, _inherits2.default)(AjaxUploader, _Component);
|
||
|
|
var _super = (0, _createSuper2.default)(AjaxUploader);
|
||
|
|
function AjaxUploader() {
|
||
|
|
var _this;
|
||
|
|
(0, _classCallCheck2.default)(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));
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
|
||
|
|
uid: (0, _uid.default)()
|
||
|
|
});
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "reqs", {});
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fileInput", void 0);
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "_isMounted", void 0);
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (e) {
|
||
|
|
var _this$props = _this.props,
|
||
|
|
accept = _this$props.accept,
|
||
|
|
directory = _this$props.directory;
|
||
|
|
var files = e.target.files;
|
||
|
|
var acceptedFiles = (0, _toConsumableArray2.default)(files).filter(function (file) {
|
||
|
|
return !directory || (0, _attrAccept.default)(file, accept);
|
||
|
|
});
|
||
|
|
_this.uploadFiles(acceptedFiles);
|
||
|
|
_this.reset();
|
||
|
|
});
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function (event) {
|
||
|
|
var el = _this.fileInput;
|
||
|
|
if (!el) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var target = event.target;
|
||
|
|
var onClick = _this.props.onClick;
|
||
|
|
if (target && target.tagName === 'BUTTON') {
|
||
|
|
var parent = el.parentNode;
|
||
|
|
parent.focus();
|
||
|
|
target.blur();
|
||
|
|
}
|
||
|
|
el.click();
|
||
|
|
if (onClick) {
|
||
|
|
onClick(event);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (e) {
|
||
|
|
if (e.key === 'Enter') {
|
||
|
|
_this.onClick(e);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onFileDrop", function (e) {
|
||
|
|
var multiple = _this.props.multiple;
|
||
|
|
e.preventDefault();
|
||
|
|
if (e.type === 'dragover') {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (_this.props.directory) {
|
||
|
|
(0, _traverseFileTree.default)(Array.prototype.slice.call(e.dataTransfer.items), _this.uploadFiles, function (_file) {
|
||
|
|
return (0, _attrAccept.default)(_file, _this.props.accept);
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
var files = (0, _toConsumableArray2.default)(e.dataTransfer.files).filter(function (file) {
|
||
|
|
return (0, _attrAccept.default)(file, _this.props.accept);
|
||
|
|
});
|
||
|
|
if (multiple === false) {
|
||
|
|
files = files.slice(0, 1);
|
||
|
|
}
|
||
|
|
_this.uploadFiles(files);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "uploadFiles", function (files) {
|
||
|
|
var originFiles = (0, _toConsumableArray2.default)(files);
|
||
|
|
var postFiles = originFiles.map(function (file) {
|
||
|
|
// eslint-disable-next-line no-param-reassign
|
||
|
|
file.uid = (0, _uid.default)();
|
||
|
|
return _this.processFile(file, originFiles);
|
||
|
|
});
|
||
|
|
|
||
|
|
// Batch upload files
|
||
|
|
Promise.all(postFiles).then(function (fileList) {
|
||
|
|
var onBatchStart = _this.props.onBatchStart;
|
||
|
|
onBatchStart === null || onBatchStart === 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.
|
||
|
|
*/
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "processFile", /*#__PURE__*/function () {
|
||
|
|
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(file, fileList) {
|
||
|
|
var beforeUpload, transformedFile, action, mergedAction, data, mergedData, parsedData, parsedFile, mergedParsedFile;
|
||
|
|
return (0, _regeneratorRuntime2.default)().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
|
||
|
|
((0, _typeof2.default)(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);
|
||
|
|
};
|
||
|
|
}());
|
||
|
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "saveFileInput", function (node) {
|
||
|
|
_this.fileInput = node;
|
||
|
|
});
|
||
|
|
return _this;
|
||
|
|
}
|
||
|
|
(0, _createClass2.default)(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$props2 = this.props,
|
||
|
|
onStart = _this$props2.onStart,
|
||
|
|
customRequest = _this$props2.customRequest,
|
||
|
|
name = _this$props2.name,
|
||
|
|
headers = _this$props2.headers,
|
||
|
|
withCredentials = _this$props2.withCredentials,
|
||
|
|
method = _this$props2.method;
|
||
|
|
var uid = origin.uid;
|
||
|
|
var request = customRequest || _request.default;
|
||
|
|
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 || onProgress(e, parsedFile);
|
||
|
|
},
|
||
|
|
onSuccess: function onSuccess(ret, xhr) {
|
||
|
|
var onSuccess = _this2.props.onSuccess;
|
||
|
|
onSuccess === null || onSuccess === 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 || onError(err, ret, parsedFile);
|
||
|
|
delete _this2.reqs[uid];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
onStart(origin);
|
||
|
|
this.reqs[uid] = request(requestOption);
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
key: "reset",
|
||
|
|
value: function reset() {
|
||
|
|
this.setState({
|
||
|
|
uid: (0, _uid.default)()
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, {
|
||
|
|
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 _this$props3 = this.props,
|
||
|
|
Tag = _this$props3.component,
|
||
|
|
prefixCls = _this$props3.prefixCls,
|
||
|
|
className = _this$props3.className,
|
||
|
|
_this$props3$classNam = _this$props3.classNames,
|
||
|
|
classNames = _this$props3$classNam === void 0 ? {} : _this$props3$classNam,
|
||
|
|
disabled = _this$props3.disabled,
|
||
|
|
id = _this$props3.id,
|
||
|
|
style = _this$props3.style,
|
||
|
|
_this$props3$styles = _this$props3.styles,
|
||
|
|
styles = _this$props3$styles === void 0 ? {} : _this$props3$styles,
|
||
|
|
multiple = _this$props3.multiple,
|
||
|
|
accept = _this$props3.accept,
|
||
|
|
capture = _this$props3.capture,
|
||
|
|
children = _this$props3.children,
|
||
|
|
directory = _this$props3.directory,
|
||
|
|
openFileDialogOnClick = _this$props3.openFileDialogOnClick,
|
||
|
|
onMouseEnter = _this$props3.onMouseEnter,
|
||
|
|
onMouseLeave = _this$props3.onMouseLeave,
|
||
|
|
hasControlInside = _this$props3.hasControlInside,
|
||
|
|
otherProps = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
||
|
|
var cls = (0, _classnames.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, prefixCls, true), "".concat(prefixCls, "-disabled"), disabled), className, className));
|
||
|
|
// 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: hasControlInside ? undefined : '0'
|
||
|
|
};
|
||
|
|
return /*#__PURE__*/_react.default.createElement(Tag, (0, _extends2.default)({}, events, {
|
||
|
|
className: cls,
|
||
|
|
role: hasControlInside ? undefined : 'button',
|
||
|
|
style: style
|
||
|
|
}), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, (0, _pickAttrs.default)(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: (0, _objectSpread2.default)({
|
||
|
|
display: 'none'
|
||
|
|
}, styles.input),
|
||
|
|
className: classNames.input,
|
||
|
|
accept: accept
|
||
|
|
}, dirProps, {
|
||
|
|
multiple: multiple,
|
||
|
|
onChange: this.onChange
|
||
|
|
}, capture != null ? {
|
||
|
|
capture: capture
|
||
|
|
} : {})), children);
|
||
|
|
}
|
||
|
|
}]);
|
||
|
|
return AjaxUploader;
|
||
|
|
}(_react.Component);
|
||
|
|
var _default = exports.default = AjaxUploader;
|