Upload.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. Object.defineProperty(exports, "__esModule", {
  4. value: true
  5. });
  6. exports.default = exports.LIST_IGNORE = void 0;
  7. var _vue = require("vue");
  8. var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
  9. var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  10. var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
  11. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  12. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  13. var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
  14. var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
  15. var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
  16. var _vcUpload = _interopRequireDefault(require("../vc-upload"));
  17. var _UploadList = _interopRequireDefault(require("./UploadList"));
  18. var _interface = require("./interface");
  19. var _utils = require("./utils");
  20. var _LocaleReceiver = require("../locale-provider/LocaleReceiver");
  21. var _default3 = _interopRequireDefault(require("../locale/default"));
  22. var _propsUtil = require("../_util/props-util");
  23. var _useMergedState3 = _interopRequireDefault(require("../_util/hooks/useMergedState"));
  24. var _devWarning = _interopRequireDefault(require("../vc-util/devWarning"));
  25. var _useConfigInject2 = _interopRequireDefault(require("../_util/hooks/useConfigInject"));
  26. var _classNames3 = _interopRequireDefault(require("../_util/classNames"));
  27. var _form = require("../form");
  28. var _excluded = ["class", "style"];
  29. var LIST_IGNORE = "__LIST_IGNORE_".concat(Date.now(), "__");
  30. exports.LIST_IGNORE = LIST_IGNORE;
  31. var _default2 = (0, _vue.defineComponent)({
  32. compatConfig: {
  33. MODE: 3
  34. },
  35. name: 'AUpload',
  36. inheritAttrs: false,
  37. props: (0, _propsUtil.initDefaultProps)((0, _interface.uploadProps)(), {
  38. type: 'select',
  39. multiple: false,
  40. action: '',
  41. data: {},
  42. accept: '',
  43. showUploadList: true,
  44. listType: 'text',
  45. disabled: false,
  46. supportServerRender: true
  47. }),
  48. setup: function setup(props, _ref) {
  49. var slots = _ref.slots,
  50. attrs = _ref.attrs,
  51. expose = _ref.expose;
  52. var formItemContext = (0, _form.useInjectFormItemContext)();
  53. var _useMergedState = (0, _useMergedState3.default)(props.defaultFileList || [], {
  54. value: (0, _vue.toRef)(props, 'fileList'),
  55. postState: function postState(list) {
  56. var timestamp = Date.now();
  57. return (list !== null && list !== void 0 ? list : []).map(function (file, index) {
  58. if (!file.uid && !Object.isFrozen(file)) {
  59. file.uid = "__AUTO__".concat(timestamp, "_").concat(index, "__");
  60. }
  61. return file;
  62. });
  63. }
  64. }),
  65. _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
  66. mergedFileList = _useMergedState2[0],
  67. setMergedFileList = _useMergedState2[1];
  68. var dragState = (0, _vue.ref)('drop');
  69. var upload = (0, _vue.ref)();
  70. (0, _vue.onMounted)(function () {
  71. (0, _devWarning.default)(props.fileList !== undefined || attrs.value === undefined, 'Upload', '`value` is not a valid prop, do you mean `fileList`?');
  72. (0, _devWarning.default)(props.transformFile === undefined, 'Upload', '`transformFile` is deprecated. Please use `beforeUpload` directly.');
  73. (0, _devWarning.default)(props.remove === undefined, 'Upload', '`remove` props is deprecated. Please use `remove` event.');
  74. });
  75. var onInternalChange = function onInternalChange(file, changedFileList, event) {
  76. var _props$onUpdateFileL, _props$onChange;
  77. var cloneList = (0, _toConsumableArray2.default)(changedFileList);
  78. // Cut to match count
  79. if (props.maxCount === 1) {
  80. cloneList = cloneList.slice(-1);
  81. } else if (props.maxCount) {
  82. cloneList = cloneList.slice(0, props.maxCount);
  83. }
  84. setMergedFileList(cloneList);
  85. var changeInfo = {
  86. file: file,
  87. fileList: cloneList
  88. };
  89. if (event) {
  90. changeInfo.event = event;
  91. }
  92. (_props$onUpdateFileL = props['onUpdate:fileList']) === null || _props$onUpdateFileL === void 0 ? void 0 : _props$onUpdateFileL.call(props, changeInfo.fileList);
  93. (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, changeInfo);
  94. formItemContext.onFieldChange();
  95. };
  96. var mergedBeforeUpload = /*#__PURE__*/function () {
  97. var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, fileListArgs) {
  98. var beforeUpload, transformFile, parsedFile, result;
  99. return _regenerator.default.wrap(function _callee$(_context) {
  100. while (1) {
  101. switch (_context.prev = _context.next) {
  102. case 0:
  103. beforeUpload = props.beforeUpload, transformFile = props.transformFile;
  104. parsedFile = file;
  105. if (!beforeUpload) {
  106. _context.next = 13;
  107. break;
  108. }
  109. _context.next = 5;
  110. return beforeUpload(file, fileListArgs);
  111. case 5:
  112. result = _context.sent;
  113. if (!(result === false)) {
  114. _context.next = 8;
  115. break;
  116. }
  117. return _context.abrupt("return", false);
  118. case 8:
  119. // Hack for LIST_IGNORE, we add additional info to remove from the list
  120. delete file[LIST_IGNORE];
  121. if (!(result === LIST_IGNORE)) {
  122. _context.next = 12;
  123. break;
  124. }
  125. Object.defineProperty(file, LIST_IGNORE, {
  126. value: true,
  127. configurable: true
  128. });
  129. return _context.abrupt("return", false);
  130. case 12:
  131. if ((0, _typeof2.default)(result) === 'object' && result) {
  132. parsedFile = result;
  133. }
  134. case 13:
  135. if (!transformFile) {
  136. _context.next = 17;
  137. break;
  138. }
  139. _context.next = 16;
  140. return transformFile(parsedFile);
  141. case 16:
  142. parsedFile = _context.sent;
  143. case 17:
  144. return _context.abrupt("return", parsedFile);
  145. case 18:
  146. case "end":
  147. return _context.stop();
  148. }
  149. }
  150. }, _callee);
  151. }));
  152. return function mergedBeforeUpload(_x, _x2) {
  153. return _ref2.apply(this, arguments);
  154. };
  155. }();
  156. var onBatchStart = function onBatchStart(batchFileInfoList) {
  157. // Skip file which marked as `LIST_IGNORE`, these file will not add to file list
  158. var filteredFileInfoList = batchFileInfoList.filter(function (info) {
  159. return !info.file[LIST_IGNORE];
  160. });
  161. // Nothing to do since no file need upload
  162. if (!filteredFileInfoList.length) {
  163. return;
  164. }
  165. var objectFileList = filteredFileInfoList.map(function (info) {
  166. return (0, _utils.file2Obj)(info.file);
  167. });
  168. // Concat new files with prev files
  169. var newFileList = (0, _toConsumableArray2.default)(mergedFileList.value);
  170. objectFileList.forEach(function (fileObj) {
  171. // Replace file if exist
  172. newFileList = (0, _utils.updateFileList)(fileObj, newFileList);
  173. });
  174. objectFileList.forEach(function (fileObj, index) {
  175. // Repeat trigger `onChange` event for compatible
  176. var triggerFileObj = fileObj;
  177. if (!filteredFileInfoList[index].parsedFile) {
  178. // `beforeUpload` return false
  179. var originFileObj = fileObj.originFileObj;
  180. var clone;
  181. try {
  182. clone = new File([originFileObj], originFileObj.name, {
  183. type: originFileObj.type
  184. });
  185. } catch (e) {
  186. clone = new Blob([originFileObj], {
  187. type: originFileObj.type
  188. });
  189. clone.name = originFileObj.name;
  190. clone.lastModifiedDate = new Date();
  191. clone.lastModified = new Date().getTime();
  192. }
  193. clone.uid = fileObj.uid;
  194. triggerFileObj = clone;
  195. } else {
  196. // Inject `uploading` status
  197. fileObj.status = 'uploading';
  198. }
  199. onInternalChange(triggerFileObj, newFileList);
  200. });
  201. };
  202. var onSuccess = function onSuccess(response, file, xhr) {
  203. try {
  204. if (typeof response === 'string') {
  205. response = JSON.parse(response);
  206. }
  207. } catch (e) {
  208. /* do nothing */
  209. }
  210. // removed
  211. if (!(0, _utils.getFileItem)(file, mergedFileList.value)) {
  212. return;
  213. }
  214. var targetItem = (0, _utils.file2Obj)(file);
  215. targetItem.status = 'done';
  216. targetItem.percent = 100;
  217. targetItem.response = response;
  218. targetItem.xhr = xhr;
  219. var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList.value);
  220. onInternalChange(targetItem, nextFileList);
  221. };
  222. var onProgress = function onProgress(e, file) {
  223. // removed
  224. if (!(0, _utils.getFileItem)(file, mergedFileList.value)) {
  225. return;
  226. }
  227. var targetItem = (0, _utils.file2Obj)(file);
  228. targetItem.status = 'uploading';
  229. targetItem.percent = e.percent;
  230. var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList.value);
  231. onInternalChange(targetItem, nextFileList, e);
  232. };
  233. var onError = function onError(error, response, file) {
  234. // removed
  235. if (!(0, _utils.getFileItem)(file, mergedFileList.value)) {
  236. return;
  237. }
  238. var targetItem = (0, _utils.file2Obj)(file);
  239. targetItem.error = error;
  240. targetItem.response = response;
  241. targetItem.status = 'error';
  242. var nextFileList = (0, _utils.updateFileList)(targetItem, mergedFileList.value);
  243. onInternalChange(targetItem, nextFileList);
  244. };
  245. var handleRemove = function handleRemove(file) {
  246. var currentFile;
  247. var mergedRemove = props.onRemove || props.remove;
  248. Promise.resolve(typeof mergedRemove === 'function' ? mergedRemove(file) : mergedRemove).then(function (ret) {
  249. // Prevent removing file
  250. if (ret === false) {
  251. return;
  252. }
  253. var removedFileList = (0, _utils.removeFileItem)(file, mergedFileList.value);
  254. if (removedFileList) {
  255. var _mergedFileList$value, _upload$value;
  256. currentFile = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, file), {}, {
  257. status: 'removed'
  258. });
  259. (_mergedFileList$value = mergedFileList.value) === null || _mergedFileList$value === void 0 ? void 0 : _mergedFileList$value.forEach(function (item) {
  260. var matchKey = currentFile.uid !== undefined ? 'uid' : 'name';
  261. if (item[matchKey] === currentFile[matchKey] && !Object.isFrozen(item)) {
  262. item.status = 'removed';
  263. }
  264. });
  265. (_upload$value = upload.value) === null || _upload$value === void 0 ? void 0 : _upload$value.abort(currentFile);
  266. onInternalChange(currentFile, removedFileList);
  267. }
  268. });
  269. };
  270. var onFileDrop = function onFileDrop(e) {
  271. dragState.value = e.type;
  272. if (e.type === 'drop') {
  273. var _props$onDrop;
  274. (_props$onDrop = props.onDrop) === null || _props$onDrop === void 0 ? void 0 : _props$onDrop.call(props, e);
  275. }
  276. };
  277. expose({
  278. onBatchStart: onBatchStart,
  279. onSuccess: onSuccess,
  280. onProgress: onProgress,
  281. onError: onError,
  282. fileList: mergedFileList,
  283. upload: upload
  284. });
  285. var _useConfigInject = (0, _useConfigInject2.default)('upload', props),
  286. prefixCls = _useConfigInject.prefixCls,
  287. direction = _useConfigInject.direction;
  288. var _useLocaleReceiver = (0, _LocaleReceiver.useLocaleReceiver)('Upload', _default3.default.Upload, (0, _vue.computed)(function () {
  289. return props.locale;
  290. })),
  291. _useLocaleReceiver2 = (0, _slicedToArray2.default)(_useLocaleReceiver, 1),
  292. locale = _useLocaleReceiver2[0];
  293. var renderUploadList = function renderUploadList(button, buttonVisible) {
  294. var removeIcon = props.removeIcon,
  295. previewIcon = props.previewIcon,
  296. downloadIcon = props.downloadIcon,
  297. previewFile = props.previewFile,
  298. onPreview = props.onPreview,
  299. onDownload = props.onDownload,
  300. disabled = props.disabled,
  301. isImageUrl = props.isImageUrl,
  302. progress = props.progress,
  303. itemRender = props.itemRender,
  304. iconRender = props.iconRender,
  305. showUploadList = props.showUploadList;
  306. var _ref3 = typeof showUploadList === 'boolean' ? {} : showUploadList,
  307. showDownloadIcon = _ref3.showDownloadIcon,
  308. showPreviewIcon = _ref3.showPreviewIcon,
  309. showRemoveIcon = _ref3.showRemoveIcon;
  310. return showUploadList ? (0, _vue.createVNode)(_UploadList.default, {
  311. "listType": props.listType,
  312. "items": mergedFileList.value,
  313. "previewFile": previewFile,
  314. "onPreview": onPreview,
  315. "onDownload": onDownload,
  316. "onRemove": handleRemove,
  317. "showRemoveIcon": !disabled && showRemoveIcon,
  318. "showPreviewIcon": showPreviewIcon,
  319. "showDownloadIcon": showDownloadIcon,
  320. "removeIcon": removeIcon,
  321. "previewIcon": previewIcon,
  322. "downloadIcon": downloadIcon,
  323. "iconRender": iconRender,
  324. "locale": locale.value,
  325. "isImageUrl": isImageUrl,
  326. "progress": progress,
  327. "itemRender": itemRender,
  328. "appendActionVisible": buttonVisible,
  329. "appendAction": button
  330. }, (0, _objectSpread2.default)({}, slots)) : button === null || button === void 0 ? void 0 : button();
  331. };
  332. return function () {
  333. var _props$id, _classNames2, _slots$default2;
  334. var listType = props.listType,
  335. disabled = props.disabled,
  336. type = props.type;
  337. var className = attrs.class,
  338. styleName = attrs.style,
  339. transAttrs = (0, _objectWithoutProperties2.default)(attrs, _excluded);
  340. var rcUploadProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
  341. onBatchStart: onBatchStart,
  342. onError: onError,
  343. onProgress: onProgress,
  344. onSuccess: onSuccess
  345. }, transAttrs), props), {}, {
  346. id: (_props$id = props.id) !== null && _props$id !== void 0 ? _props$id : formItemContext.id.value,
  347. prefixCls: prefixCls.value,
  348. beforeUpload: mergedBeforeUpload,
  349. onChange: undefined
  350. });
  351. delete rcUploadProps.remove;
  352. // Remove id to avoid open by label when trigger is hidden
  353. // !children: https://github.com/ant-design/ant-design/issues/14298
  354. // disabled: https://github.com/ant-design/ant-design/issues/16478
  355. // https://github.com/ant-design/ant-design/issues/24197
  356. if (!slots.default || disabled) {
  357. delete rcUploadProps.id;
  358. }
  359. if (type === 'drag') {
  360. var _classNames, _slots$default;
  361. var dragCls = (0, _classNames3.default)(prefixCls.value, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-drag"), true), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-drag-uploading"), mergedFileList.value.some(function (file) {
  362. return file.status === 'uploading';
  363. })), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-drag-hover"), dragState.value === 'dragover'), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames), attrs.class);
  364. return (0, _vue.createVNode)("span", null, [(0, _vue.createVNode)("div", {
  365. "class": dragCls,
  366. "onDrop": onFileDrop,
  367. "onDragover": onFileDrop,
  368. "onDragleave": onFileDrop,
  369. "style": attrs.style
  370. }, [(0, _vue.createVNode)(_vcUpload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rcUploadProps), {}, {
  371. "ref": upload,
  372. "class": "".concat(prefixCls.value, "-btn")
  373. }), (0, _objectSpread2.default)({
  374. default: function _default() {
  375. return [(0, _vue.createVNode)("div", {
  376. "class": "".concat(prefixCls, "-drag-container")
  377. }, [(_slots$default = slots.default) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)])];
  378. }
  379. }, slots))]), renderUploadList()]);
  380. }
  381. var uploadButtonCls = (0, _classNames3.default)(prefixCls.value, (_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls.value, "-select"), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls.value, "-select-").concat(listType), true), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls.value, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames2, "".concat(prefixCls.value, "-rtl"), direction.value === 'rtl'), _classNames2));
  382. var children = (0, _propsUtil.flattenChildren)((_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots));
  383. var renderUploadButton = function renderUploadButton(uploadButtonStyle) {
  384. return (0, _vue.createVNode)("div", {
  385. "class": uploadButtonCls,
  386. "style": uploadButtonStyle
  387. }, [(0, _vue.createVNode)(_vcUpload.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, rcUploadProps), {}, {
  388. "ref": upload
  389. }), slots)]);
  390. };
  391. if (listType === 'picture-card') {
  392. return (0, _vue.createVNode)("span", {
  393. "class": (0, _classNames3.default)("".concat(prefixCls.value, "-picture-card-wrapper"), attrs.class)
  394. }, [renderUploadList(renderUploadButton, !!(children && children.length))]);
  395. }
  396. return (0, _vue.createVNode)("span", {
  397. "class": attrs.class
  398. }, [renderUploadButton(children && children.length ? undefined : {
  399. display: 'none'
  400. }), renderUploadList()]);
  401. };
  402. }
  403. });
  404. exports.default = _default2;