@rainbow-oh/yee-c 0.9.2 → 0.11.0

package/dist/esm/Upload/upload.js

@@ -1,18 +1,17 @@
-var _excluded = ["prefixCls", "name", "action", "children", "data", "headers", "defaultFileList", "fileList", "withCredentials", "className", "style", "disabled", "listType", "type", "directory", "multiple", "accept", "showUploadList", "progress", "maxFileSize", "maxCount", "customRequest", "onChange", "beforeUpload", "onPreview", "onRemove", "itemRender"];
+var _excluded = ["prefixCls", "name", "action", "children", "data", "headers", "defaultFileList", "fileList", "withCredentials", "className", "style", "disabled", "listType", "type", "directory", "multiple", "accept", "showUploadList", "progress", "autoUpload", "maxFileSize", "maxCount", "customRequest", "onChange", "beforeUpload", "onPreview", "onRemove", "itemRender"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw new Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator.return && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw new Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, catch: function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw new Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -21,33 +20,104 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 import clsx from 'clsx';
 import { Plus } from 'lucide-react';
-import React, { forwardRef, useContext, useRef, useState } from 'react';
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import Button from "../Button";
 import { GlobalContext } from "../Config-Provider";
-import mergeContextToProps from "../utils/mergeContextToProps";
-import UploadList from "./uploaded-list/index";
 import useMergedState from "../hooks/useMergedState";
 import ax from "../utils/ax";
 import folderScanner from "../utils/folder-scanner";
+import mergeContextToProps from "../utils/mergeContextToProps";
 import "./style/index.less";
+import UploadList from "./uploaded-list/index";
+var getFileExtension = function getFileExtension(fileName) {
+  var dotIndex = fileName.lastIndexOf('.');
+  return dotIndex > -1 ? fileName.slice(dotIndex + 1).toLowerCase() : '';
+};
 var wrapFile = function wrapFile(file) {
   return {
     uid: uuidv4(),
     name: file.name,
     size: file.size,
-    type: typeof (file === null || file === void 0 ? void 0 : file.name) === 'string' ? file.name.split('.')[1] : '',
+    type: file.type || getFileExtension(file.name),
     percent: 0,
     status: 'ready',
     raw: file
   };
 };
+var isSameFile = function isSameFile(left, right) {
+  if (left.uid && right.uid) {
+    return left.uid === right.uid;
+  }
+  return left === right;
+};
+var matchesAccept = function matchesAccept(file, accept) {
+  if (!accept) {
+    return true;
+  }
+  var fileName = file.name.toLowerCase();
+  var mimeType = file.type.toLowerCase();
+  return accept.split(',').map(function (item) {
+    return item.trim().toLowerCase();
+  }).filter(Boolean).some(function (rule) {
+    if (rule.startsWith('.')) {
+      return fileName.endsWith(rule);
+    }
+    if (rule.endsWith('/*')) {
+      return mimeType.startsWith(rule.slice(0, -1));
+    }
+    return mimeType === rule;
+  });
+};
+var describeErrorDetail = function describeErrorDetail(detail) {
+  if (typeof detail === 'string' && detail) {
+    return detail;
+  }
+  try {
+    var _JSON$stringify;
+    var text = (_JSON$stringify = JSON.stringify(detail)) !== null && _JSON$stringify !== void 0 ? _JSON$stringify : '';
+    return text.length > 200 ? "".concat(text.slice(0, 200), "\u2026") : text;
+  } catch (_unused) {
+    return String(detail);
+  }
+};
+var toError = function toError(error) {
+  if (error instanceof Error) {
+    return error;
+  }
+  if (_typeof(error) === 'object' && error !== null && 'error' in error) {
+    var detail = error.error;
+    if (detail instanceof Error) {
+      return detail;
+    }
+    if (detail !== null && detail !== undefined) {
+      // e.g. ax rejects { status: 'error', error: xhr.response }
+      var message = describeErrorDetail(detail);
+      if (message) {
+        return new Error(message);
+      }
+    }
+  }
+  return new Error(typeof error === 'string' ? error : 'Upload failed');
+};
+
+// ax rejects aborts as { status: 'abort', error: event }
+var isAbortRejection = function isAbortRejection(error) {
+  return _typeof(error) === 'object' && error !== null && error.status === 'abort';
+};
+var getAbort = function getAbort(request) {
+  if (typeof request === 'function') {
+    return request;
+  }
+  return request === null || request === void 0 ? void 0 : request.abort;
+};
 var Upload = /*#__PURE__*/forwardRef(function (baseprops, ref) {
   var _useContext = useContext(GlobalContext),
-    upload = _useContext.upload;
-  var props = mergeContextToProps(baseprops, upload);
+    uploadConfig = _useContext.upload;
+  var props = mergeContextToProps(baseprops, uploadConfig);
   var _props$prefixCls = props.prefixCls,
     prefixCls = _props$prefixCls === void 0 ? 'yee-upload' : _props$prefixCls,
     _props$name = props.name,
@@ -72,6 +142,8 @@ var Upload = /*#__PURE__*/forwardRef(function (baseprops, ref) {
     showUploadList = _props$showUploadList === void 0 ? true : _props$showUploadList,
     _props$progress = props.progress,
     progress = _props$progress === void 0 ? true : _props$progress,
+    _props$autoUpload = props.autoUpload,
+    autoUpload = _props$autoUpload === void 0 ? true : _props$autoUpload,
     maxFileSize = props.maxFileSize,
     maxCount = props.maxCount,
     customRequest = props.customRequest,
@@ -82,6 +154,10 @@ var Upload = /*#__PURE__*/forwardRef(function (baseprops, ref) {
     itemRender = props.itemRender,
     rest = _objectWithoutProperties(props, _excluded);
   var inputRef = useRef(null);
+  var rootRef = useRef(null);
+  var activeRequestsRef = useRef(new Map());
+  var pendingPreparationsRef = useRef(new Map());
+  var mountedRef = useRef(true);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     dragState = _useState2[0],
@@ -93,333 +169,556 @@ var Upload = /*#__PURE__*/forwardRef(function (baseprops, ref) {
     _useMergedState2 = _slicedToArray(_useMergedState, 2),
     mergedFileList = _useMergedState2[0],
     setMergedFileList = _useMergedState2[1];
-  var acceptDirectory = {};
-  if (directory) {
-    acceptDirectory = {
-      webkitdirectory: '',
-      directory: '',
-      multiple: ''
-    };
-  }
-  var updateFileList = function updateFileList(file) {
-    setMergedFileList(function (state) {
-      return state.map(function (item) {
-        if (item.uid === file.uid) {
-          return file;
-        }
-        return item;
+  var fileListRef = useRef(mergedFileList);
+  fileListRef.current = mergedFileList;
+  useEffect(function () {
+    return function () {
+      mountedRef.current = false;
+      pendingPreparationsRef.current.clear();
+      var activeRequests = Array.from(activeRequestsRef.current.values());
+      activeRequestsRef.current.clear();
+      activeRequests.forEach(function (_ref) {
+        var abort = _ref.abort;
+        return abort === null || abort === void 0 ? void 0 : abort();
       });
+    };
+  }, []);
+  var setFileList = function setFileList(nextFileList) {
+    fileListRef.current = nextFileList;
+    setMergedFileList(nextFileList);
+  };
+  var emitChange = function emitChange(file, nextFileList, event) {
+    setFileList(nextFileList);
+    onChange === null || onChange === void 0 || onChange({
+      file: file,
+      fileList: nextFileList,
+      event: event
+    });
+  };
+  var appendFile = function appendFile(file, event) {
+    var nextFileList = [].concat(_toConsumableArray(fileListRef.current), [file]);
+    emitChange(file, nextFileList, event);
+    return file;
+  };
+  var replaceFile = function replaceFile(target, replacement, event) {
+    var index = fileListRef.current.findIndex(function (item) {
+      return isSameFile(item, target);
+    });
+    if (index < 0) {
+      return undefined;
+    }
+    var nextFileList = _toConsumableArray(fileListRef.current);
+    nextFileList[index] = replacement;
+    emitChange(replacement, nextFileList, event);
+    return replacement;
+  };
+  var updateFile = function updateFile(target, patch, event) {
+    var current = fileListRef.current.find(function (item) {
+      return isSameFile(item, target);
     });
+    if (!current) {
+      return undefined;
+    }
+    return replaceFile(target, _objectSpread(_objectSpread({}, current), patch), event);
+  };
+  var abortRequest = function abortRequest(file) {
+    if (!file.uid) {
+      return;
+    }
+    var activeRequest = activeRequestsRef.current.get(file.uid);
+    if (activeRequest) {
+      var _activeRequest$abort;
+      activeRequestsRef.current.delete(file.uid);
+      (_activeRequest$abort = activeRequest.abort) === null || _activeRequest$abort === void 0 || _activeRequest$abort.call(activeRequest);
+    }
   };
-  var postFile = function postFile(file) {
-    var formData = new FormData();
-    formData.append(name, file.raw);
-    if (data) {
-      var extraData = typeof data === 'function' ? data(file.raw) : data;
-      Object.keys(extraData).forEach(function (key) {
-        formData.append(key, extraData[key]);
+  var postFile = function postFile(sourceFile) {
+    var file = sourceFile;
+    if (!file.uid) {
+      var withUid = _objectSpread(_objectSpread({}, file), {}, {
+        uid: uuidv4()
       });
+      file = replaceFile(file, withUid) || withUid;
+    }
+    var requestKey = file.uid;
+    abortRequest(file);
+    var token = Symbol(requestKey);
+    activeRequestsRef.current.set(requestKey, {
+      token: token
+    });
+    var isActive = function isActive() {
+      var _activeRequestsRef$cu;
+      return ((_activeRequestsRef$cu = activeRequestsRef.current.get(requestKey)) === null || _activeRequestsRef$cu === void 0 ? void 0 : _activeRequestsRef$cu.token) === token;
+    };
+    var finish = function finish() {
+      if (isActive()) {
+        activeRequestsRef.current.delete(requestKey);
+      }
+    };
+    var updateIfActive = function updateIfActive(patch, event) {
+      if (!isActive()) {
+        return undefined;
+      }
+      return updateFile(file, patch, event);
+    };
+    var fail = function fail(error) {
+      // Requests aborted outside of remove/retry/unmount (e.g. by the browser)
+      // go back to 'ready' instead of showing an error
+      if (isAbortRejection(error)) {
+        updateIfActive({
+          status: 'ready',
+          percent: 0
+        });
+        finish();
+        return;
+      }
+      var normalizedError = toError(error);
+      updateIfActive({
+        status: 'error',
+        error: normalizedError
+      }, error);
+      finish();
+    };
+    updateIfActive({
+      status: 'uploading',
+      percent: 0,
+      error: undefined
+    });
+    if (!file.raw) {
+      fail(new Error("File ".concat(file.name, " has no source file to upload")));
+      return;
     }
-    var url = typeof action === 'function' ? action() : action;
-
-    // Use custom upload
     if (customRequest) {
-      customRequest({
-        file: file.raw,
-        onProgress: function onProgress(percent) {
-          var current = _objectSpread(_objectSpread({}, file), {}, {
-            status: 'uploading',
-            percent: percent
-          });
-          updateFileList(current);
-          onChange === null || onChange === void 0 || onChange({
-            file: current,
-            fileList: mergedFileList,
-            event: {
-              percent: percent
-            }
-          });
-        },
-        onError: function onError(error) {
-          var current = _objectSpread(_objectSpread({}, file), {}, {
-            status: 'error',
-            error: error
-          });
-          updateFileList(current);
-          onChange === null || onChange === void 0 || onChange({
-            file: current,
-            fileList: mergedFileList,
-            event: error
-          });
-        },
-        onSuccess: function onSuccess(response) {
-          var current = _objectSpread(_objectSpread({}, file), {}, {
-            status: 'success',
-            response: response
-          });
-          updateFileList(current);
-          onChange === null || onChange === void 0 || onChange({
-            file: current,
-            fileList: mergedFileList,
-            event: response
-          });
+      try {
+        var request = customRequest({
+          file: file.raw,
+          onProgress: function onProgress(percent) {
+            var normalizedPercent = Math.min(100, Math.max(0, percent));
+            updateIfActive({
+              status: 'uploading',
+              percent: normalizedPercent
+            }, {
+              percent: normalizedPercent
+            });
+          },
+          onError: fail,
+          onSuccess: function onSuccess(response) {
+            updateIfActive({
+              status: 'success',
+              percent: 100,
+              response: response,
+              error: undefined
+            }, response);
+            finish();
+          }
+        });
+        var activeRequest = activeRequestsRef.current.get(requestKey);
+        if ((activeRequest === null || activeRequest === void 0 ? void 0 : activeRequest.token) === token) {
+          activeRequest.abort = getAbort(request);
         }
-      });
+      } catch (error) {
+        fail(error);
+      }
       return;
     }
-
-    // Default upload
-    // @ts-ignore
-    ax.post(url, formData, {
-      withCredentials: withCredentials,
-      headers: _objectSpread({}, headers),
-      onUploadProgress: function onUploadProgress(e) {
-        var percentage = parseInt(e.loaded / e.total * 100 + '');
-        var current;
-        if (percentage < 100) {
-          current = _objectSpread(_objectSpread({}, file), {}, {
+    try {
+      var url = typeof action === 'function' ? action() : action;
+      if (!url) {
+        throw new Error('Upload action is required when customRequest is not set');
+      }
+      var formData = new FormData();
+      formData.append(name, file.raw);
+      if (data) {
+        var extraData = typeof data === 'function' ? data(file.raw) : data;
+        Object.keys(extraData).forEach(function (key) {
+          formData.append(key, extraData[key]);
+        });
+      }
+      var _request = ax.post(url, formData, {
+        withCredentials: withCredentials,
+        headers: _objectSpread({}, headers),
+        onUploadProgress: function onUploadProgress(event) {
+          var percentage = event.total ? Math.round(event.loaded / event.total * 100) : 0;
+          updateIfActive({
             status: 'uploading',
             percent: percentage
-          });
-        } else {
-          current = _objectSpread(_objectSpread({}, file), {}, {
-            status: 'success',
-            percent: 100
-          });
+          }, event);
         }
-        updateFileList(current);
-        onChange === null || onChange === void 0 || onChange({
-          file: current,
-          fileList: mergedFileList,
-          event: e
-        });
-      }
-    }).then(function (res) {
-      var current = _objectSpread(_objectSpread({}, file), {}, {
-        status: 'success',
-        response: res
-      });
-      updateFileList(current);
-      onChange === null || onChange === void 0 || onChange({
-        file: current,
-        fileList: mergedFileList,
-        event: res
-      });
-    }).catch(function (err) {
-      var current = _objectSpread(_objectSpread({}, file), {}, {
-        status: 'error',
-        error: err
       });
-      updateFileList(current);
-      onChange === null || onChange === void 0 || onChange({
-        file: current,
-        fileList: mergedFileList,
-        event: err
-      });
-    });
-  };
-  var post = function post(file) {
-    setMergedFileList(function (state) {
-      return [].concat(_toConsumableArray(state), [file]);
-    });
-    postFile(file);
+      var _activeRequest = activeRequestsRef.current.get(requestKey);
+      if ((_activeRequest === null || _activeRequest === void 0 ? void 0 : _activeRequest.token) === token) {
+        _activeRequest.abort = _request.abort;
+      }
+      _request.then(function (response) {
+        updateIfActive({
+          status: 'success',
+          percent: 100,
+          response: response,
+          error: undefined
+        }, response);
+        finish();
+      }).catch(fail);
+    } catch (error) {
+      fail(error);
+    }
   };
   var isValidFile = function isValidFile(file) {
-    // Check file size
     if (maxFileSize && file.size > maxFileSize) {
       console.warn("File ".concat(file.name, " exceeds maximum size limit"));
       return false;
     }
-
-    // Check file count
-    if (maxCount && mergedFileList.length >= maxCount) {
-      console.warn("Maximum file count (".concat(maxCount, ") exceeded"));
+    if (!matchesAccept(file, accept)) {
+      console.warn("File ".concat(file.name, " does not match accepted file types"));
       return false;
     }
     return true;
   };
-  var uploadFiles = function uploadFiles(files, e) {
-    var postFiles = Array.from(files);
+  var prepareFile = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file, wrapped, postFiles, preparationToken, event) {
+      var preparationKey, isActive, finish, result, nextFile;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            preparationKey = wrapped.uid;
+            isActive = function isActive() {
+              return mountedRef.current && pendingPreparationsRef.current.get(preparationKey) === preparationToken && fileListRef.current.some(function (item) {
+                return isSameFile(item, wrapped);
+              });
+            };
+            finish = function finish() {
+              if (pendingPreparationsRef.current.get(preparationKey) === preparationToken) {
+                pendingPreparationsRef.current.delete(preparationKey);
+              }
+            };
+            _context.prev = 3;
+            if (!beforeUpload) {
+              _context.next = 10;
+              break;
+            }
+            _context.next = 7;
+            return Promise.resolve(beforeUpload(file, postFiles));
+          case 7:
+            _context.t0 = _context.sent;
+            _context.next = 11;
+            break;
+          case 10:
+            _context.t0 = true;
+          case 11:
+            result = _context.t0;
+            if (isActive()) {
+              _context.next = 15;
+              break;
+            }
+            finish();
+            return _context.abrupt("return");
+          case 15:
+            if (!(result === false)) {
+              _context.next = 19;
+              break;
+            }
+            // beforeUpload rejected the file: drop it from the list
+            setFileList(fileListRef.current.filter(function (item) {
+              return !isSameFile(item, wrapped);
+            }));
+            finish();
+            return _context.abrupt("return");
+          case 19:
+            nextFile = wrapped;
+            if (!(result instanceof File)) {
+              _context.next = 25;
+              break;
+            }
+            nextFile = _objectSpread(_objectSpread({}, wrapFile(result)), {}, {
+              uid: wrapped.uid
+            });
+            if (replaceFile(wrapped, nextFile, event)) {
+              _context.next = 25;
+              break;
+            }
+            finish();
+            return _context.abrupt("return");
+          case 25:
+            finish();
+            postFile(nextFile);
+            _context.next = 33;
+            break;
+          case 29:
+            _context.prev = 29;
+            _context.t1 = _context["catch"](3);
+            if (isActive()) {
+              updateFile(wrapped, {
+                status: 'error',
+                error: toError(_context.t1)
+              }, _context.t1);
+            }
+            finish();
+          case 33:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee, null, [[3, 29]]);
+    }));
+    return function prepareFile(_x, _x2, _x3, _x4, _x5) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var uploadFiles = function uploadFiles(files, event) {
+    var selectedFiles = Array.from(files);
+    var filesAllowedByMultiple = multiple || directory ? selectedFiles : selectedFiles.slice(0, 1);
+    var validFiles = filesAllowedByMultiple.filter(isValidFile);
+    var remainingCount = typeof maxCount === 'number' ? Math.max(0, maxCount - fileListRef.current.length) : validFiles.length;
+    var postFiles = validFiles.slice(0, remainingCount);
+    if (postFiles.length < validFiles.length) {
+      console.warn("Maximum file count (".concat(maxCount, ") exceeded"));
+    }
     postFiles.forEach(function (file) {
-      if (!isValidFile(file)) {
+      var wrapped = appendFile(wrapFile(file), event);
+
+      // Manual mode: files only join the list and wait for upload()
+      if (!autoUpload) {
         return;
       }
-      var wrapped = wrapFile(file);
-      onChange === null || onChange === void 0 || onChange({
-        file: wrapped,
-        fileList: mergedFileList,
-        event: e
-      });
-      if (beforeUpload) {
-        var res = beforeUpload(file, postFiles);
-        if (res && res instanceof Promise) {
-          res.then(function (progress) {
-            if (progress === false) {
-              return;
-            }
-            post(_typeof(progress) === 'object' ? wrapFile(progress) : wrapped);
-          });
-        } else if (res !== false) {
-          post(wrapped);
-        }
-      } else {
-        post(wrapped);
+      var preparationToken = Symbol(wrapped.uid);
+      pendingPreparationsRef.current.set(wrapped.uid, preparationToken);
+      void prepareFile(file, wrapped, postFiles, preparationToken, event);
+    });
+  };
+
+  // Instance method: upload files waiting in the list (status 'ready')
+  var upload = function upload(file) {
+    var requested = file === undefined ? fileListRef.current : Array.isArray(file) ? file : [file];
+    var readyFiles = requested.filter(function (item) {
+      return item.status === 'ready';
+    });
+    readyFiles.forEach(function (item) {
+      var target = item;
+      if (!target.uid) {
+        var _replaceFile;
+        target = (_replaceFile = replaceFile(item, _objectSpread(_objectSpread({}, item), {}, {
+          uid: uuidv4()
+        }))) !== null && _replaceFile !== void 0 ? _replaceFile : item;
+      }
+      if (!target.raw) {
+        updateFile(target, {
+          status: 'error',
+          error: new Error("File ".concat(target.name, " has no source file to upload"))
+        });
+        return;
       }
+      var preparationToken = Symbol(target.uid);
+      pendingPreparationsRef.current.set(target.uid, preparationToken);
+      void prepareFile(target.raw, target, readyFiles.map(function (ready) {
+        return ready.raw;
+      }).filter(function (raw) {
+        return raw instanceof File;
+      }), preparationToken);
     });
   };
-  var handleChange = function handleChange(e) {
-    var files = e.target.files;
-    if (!files) return;
-    uploadFiles(files, e);
-    if (inputRef.current) {
-      inputRef.current.value = '';
+
+  // Expose the root element plus the upload() method on the ref
+  useImperativeHandle(ref, function () {
+    var _rootRef$current;
+    return Object.assign((_rootRef$current = rootRef.current) !== null && _rootRef$current !== void 0 ? _rootRef$current : document.createElement('div'), {
+      upload: upload
+    });
+  }, [upload]);
+  var handleChange = function handleChange(event) {
+    var files = event.target.files;
+    if (!files) {
+      return;
     }
+    uploadFiles(files, event);
+    event.target.value = '';
   };
-  var handleClick = function handleClick() {
+  var handleDragOver = function handleDragOver(event) {
+    event.preventDefault();
     if (!disabled) {
-      var _inputRef$current;
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();
+      setDragState('dragover');
     }
   };
-  var handleDragOver = function handleDragOver(e) {
-    e.preventDefault();
-    if (disabled) return;
-    setDragState('dragover');
-  };
-  var handleDragLeave = function handleDragLeave(e) {
-    e.preventDefault();
+  var handleDragLeave = function handleDragLeave(event) {
+    event.preventDefault();
     setDragState(null);
   };
   var handleDrop = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
-      var _e$dataTransfer, files, items, item, folderFiles;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
+      var entries, nestedFiles;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
-            e.preventDefault();
+            event.preventDefault();
             if (!disabled) {
-              _context.next = 3;
+              _context2.next = 3;
               break;
             }
-            return _context.abrupt("return");
+            return _context2.abrupt("return");
           case 3:
             setDragState('drop');
-            _e$dataTransfer = e.dataTransfer, files = _e$dataTransfer.files, items = _e$dataTransfer.items;
-            if (!(files.length === 1)) {
-              _context.next = 17;
+            _context2.prev = 4;
+            entries = Array.from(event.dataTransfer.items).map(function (item) {
+              var _item$webkitGetAsEntr;
+              return (_item$webkitGetAsEntr = item.webkitGetAsEntry) === null || _item$webkitGetAsEntr === void 0 ? void 0 : _item$webkitGetAsEntr.call(item);
+            }).filter(function (entry) {
+              return entry !== null && entry !== undefined;
+            });
+            if (!entries.some(function (entry) {
+              return entry.isDirectory;
+            })) {
+              _context2.next = 13;
               break;
             }
-            item = items[0].webkitGetAsEntry(); // Dropped item is a folder
-            if (!(item !== null && item !== void 0 && item.isDirectory)) {
-              _context.next = 14;
-              break;
-            }
-            _context.next = 10;
-            return folderScanner(item, []);
-          case 10:
-            folderFiles = _context.sent;
-            uploadFiles(folderFiles, e);
-            _context.next = 15;
+            _context2.next = 9;
+            return Promise.all(entries.map(function (entry) {
+              return folderScanner(entry, []);
+            }));
+          case 9:
+            nestedFiles = _context2.sent;
+            uploadFiles(nestedFiles.flat(), event);
+            _context2.next = 14;
             break;
+          case 13:
+            uploadFiles(event.dataTransfer.files, event);
           case 14:
-            if (item !== null && item !== void 0 && item.isFile) {
-              uploadFiles(files, e);
-            }
-          case 15:
-            _context.next = 18;
+            _context2.next = 19;
             break;
-          case 17:
-            if (files.length > 1) {
-              uploadFiles(files, e);
-            }
-          case 18:
+          case 16:
+            _context2.prev = 16;
+            _context2.t0 = _context2["catch"](4);
+            console.warn('Failed to scan dropped files', _context2.t0);
+          case 19:
+            _context2.prev = 19;
+            setDragState(null);
+            return _context2.finish(19);
+          case 22:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2, null, [[4, 16, 19, 22]]);
     }));
-    return function handleDrop(_x) {
-      return _ref.apply(this, arguments);
+    return function handleDrop(_x6) {
+      return _ref3.apply(this, arguments);
     };
   }();
-  var renderUploadTrigger = function renderUploadTrigger() {
-    return /*#__PURE__*/React.createElement("span", {
-      className: clsx("".concat(prefixCls, "-input"), _defineProperty({}, "".concat(prefixCls, "-input-disabled"), disabled)),
-      onClick: handleClick
-    }, /*#__PURE__*/React.createElement("input", _extends({
-      type: "file",
-      disabled: disabled
-    }, acceptDirectory, {
-      multiple: multiple,
-      accept: accept,
-      onChange: handleChange,
-      style: {
-        display: 'none'
-      },
-      ref: inputRef
-    })), children ? children : listType === 'picture-wall' ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(prefixCls, "-picture-wall-trigger")
-    }, /*#__PURE__*/React.createElement(Plus, null)) : /*#__PURE__*/React.createElement(Button, {
-      disabled: disabled
-    }, "Upload"));
-  };
   var handleRemove = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file) {
-      var promise, shouldRemove;
-      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-        while (1) switch (_context2.prev = _context2.next) {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(file) {
+      var shouldRemove;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
           case 0:
-            promise = onRemove === null || onRemove === void 0 ? void 0 : onRemove(file);
-            if (!(promise instanceof Promise)) {
-              _context2.next = 7;
+            if (file.uid) {
+              pendingPreparationsRef.current.delete(file.uid);
+            }
+            _context3.prev = 1;
+            if (!onRemove) {
+              _context3.next = 8;
               break;
             }
-            _context2.next = 4;
-            return promise;
-          case 4:
-            _context2.t0 = _context2.sent;
-            _context2.next = 8;
+            _context3.next = 5;
+            return Promise.resolve(onRemove(file));
+          case 5:
+            _context3.t0 = _context3.sent;
+            _context3.next = 9;
             break;
-          case 7:
-            _context2.t0 = promise !== false;
           case 8:
-            shouldRemove = _context2.t0;
-            if (shouldRemove !== false) {
-              setMergedFileList(function (state) {
-                return state.filter(function (item) {
-                  return item.uid !== file.uid;
-                });
-              });
+            _context3.t0 = true;
+          case 9:
+            shouldRemove = _context3.t0;
+            if (!(shouldRemove === false)) {
+              _context3.next = 12;
+              break;
             }
-          case 10:
+            return _context3.abrupt("return");
+          case 12:
+            abortRequest(file);
+            setFileList(fileListRef.current.filter(function (item) {
+              return !isSameFile(item, file);
+            }));
+            _context3.next = 19;
+            break;
+          case 16:
+            _context3.prev = 16;
+            _context3.t1 = _context3["catch"](1);
+            console.warn("Failed to remove file ".concat(file.name), _context3.t1);
+          case 19:
           case "end":
-            return _context2.stop();
+            return _context3.stop();
         }
-      }, _callee2);
+      }, _callee3, null, [[1, 16]]);
     }));
-    return function handleRemove(_x2) {
-      return _ref2.apply(this, arguments);
+    return function handleRemove(_x7) {
+      return _ref4.apply(this, arguments);
     };
   }();
   var handleReUpload = function handleReUpload(file) {
-    var newFile = _objectSpread(_objectSpread({}, file), {}, {
+    if (file.uid) {
+      pendingPreparationsRef.current.delete(file.uid);
+    }
+    abortRequest(file);
+    var nextFile = updateFile(file, {
+      uid: file.uid || uuidv4(),
       status: 'ready',
-      percent: 0
+      percent: 0,
+      error: undefined,
+      response: undefined
     });
-    updateFileList(newFile);
-    postFile(newFile);
+    if (nextFile) {
+      postFile(nextFile);
+    }
   };
   var handlePreview = function handlePreview(file) {
     if (onPreview) {
       onPreview(file);
-    } else if (file.raw) {
-      // Default preview behavior: open in new window
-      var url = URL.createObjectURL(file.raw);
-      window.open(url);
-      setTimeout(function () {
-        return URL.revokeObjectURL(url);
-      }, 100);
+      return;
+    }
+    if (file.url) {
+      window.open(file.url, '_blank', 'noopener,noreferrer');
+      return;
     }
+    if (!file.raw) {
+      return;
+    }
+    var url = URL.createObjectURL(file.raw);
+    var previewWindow = window.open(url, '_blank');
+    if (!previewWindow) {
+      URL.revokeObjectURL(url);
+      return;
+    }
+    var cleanup = function cleanup() {
+      return URL.revokeObjectURL(url);
+    };
+    previewWindow.addEventListener('load', cleanup, {
+      once: true
+    });
+    window.setTimeout(cleanup, 60000);
+  };
+  var renderUploadTrigger = function renderUploadTrigger() {
+    var acceptDirectory = directory ? {
+      webkitdirectory: '',
+      directory: ''
+    } : {};
+    return /*#__PURE__*/React.createElement("span", {
+      className: clsx("".concat(prefixCls, "-input"), _defineProperty({}, "".concat(prefixCls, "-input-disabled"), disabled)),
+      onClick: function onClick(event) {
+        if (!disabled && event.target !== inputRef.current) {
+          var _inputRef$current;
+          (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.click();
+        }
+      }
+    }, /*#__PURE__*/React.createElement("input", _extends({
+      type: "file",
+      "aria-label": "Upload file",
+      className: "".concat(prefixCls, "-native-input"),
+      disabled: disabled
+    }, acceptDirectory, {
+      multiple: Boolean(multiple || directory),
+      accept: accept,
+      onChange: handleChange,
+      ref: inputRef
+    })), children ? children : listType === 'picture-wall' ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-picture-wall-trigger")
+    }, /*#__PURE__*/React.createElement(Plus, null)) : /*#__PURE__*/React.createElement(Button, {
+      disabled: disabled
+    }, "Upload"));
   };
   var renderUploadList = function renderUploadList(extraProps) {
     if (!showUploadList) {
@@ -434,17 +733,20 @@ var Upload = /*#__PURE__*/forwardRef(function (baseprops, ref) {
       itemRender: itemRender,
       onRemove: handleRemove,
       onReUpload: handleReUpload,
-      onPreview: handlePreview
+      onPreview: handlePreview,
+      isPreviewable: function isPreviewable(file) {
+        return Boolean(onPreview || file.url || file.raw);
+      }
     }, extraProps));
   };
   if (type === 'drag') {
     return /*#__PURE__*/React.createElement("div", _extends({
-      ref: ref
+      ref: rootRef
     }, rest, {
       className: clsx(prefixCls, "".concat(prefixCls, "-drag"), _defineProperty(_defineProperty({}, "".concat(prefixCls, "-drag-hover"), dragState === 'dragover'), "".concat(prefixCls, "-disabled"), disabled), className),
       style: style
     }), /*#__PURE__*/React.createElement("div", {
-      className: clsx("".concat(prefixCls, "-drag-container")),
+      className: "".concat(prefixCls, "-drag-container"),
       onDrop: handleDrop,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave
@@ -454,7 +756,7 @@ var Upload = /*#__PURE__*/forwardRef(function (baseprops, ref) {
   }
   if (listType === 'picture-wall') {
     return /*#__PURE__*/React.createElement("div", _extends({
-      ref: ref
+      ref: rootRef
     }, rest, {
       className: clsx(prefixCls, "".concat(prefixCls, "-picture-wall"), className),
       style: style
@@ -463,7 +765,7 @@ var Upload = /*#__PURE__*/forwardRef(function (baseprops, ref) {
     }));
   }
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: ref
+    ref: rootRef
   }, rest, {
     className: clsx(prefixCls, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-picture-list"), listType === 'picture-list'), "".concat(prefixCls, "-disabled"), disabled), className),
     style: style