@rainbow-oh/yee-c 0.9.2 → 0.10.0

package/dist/cjs/Upload/upload.js

@@ -87,26 +87,89 @@ var import_react = __toESM(require("react"));
 var import_uuid = require("uuid");
 var import_Button = __toESM(require("../Button"));
 var import_Config_Provider = require("../Config-Provider");
-var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
-var import_uploaded_list = __toESM(require("./uploaded-list/index"));
 var import_useMergedState = __toESM(require("../hooks/useMergedState"));
 var import_ax = __toESM(require("../utils/ax"));
 var import_folder_scanner = __toESM(require("../utils/folder-scanner"));
+var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
 var import_style = require("./style/index.less");
+var import_uploaded_list = __toESM(require("./uploaded-list/index"));
+var getFileExtension = (fileName) => {
+  const dotIndex = fileName.lastIndexOf(".");
+  return dotIndex > -1 ? fileName.slice(dotIndex + 1).toLowerCase() : "";
+};
 var wrapFile = (file) => {
   return {
     uid: (0, import_uuid.v4)(),
     name: file.name,
     size: file.size,
-    type: typeof (file == null ? void 0 : file.name) === "string" ? file.name.split(".")[1] : "",
+    type: file.type || getFileExtension(file.name),
     percent: 0,
     status: "ready",
     raw: file
   };
 };
+var isSameFile = (left, right) => {
+  if (left.uid && right.uid) {
+    return left.uid === right.uid;
+  }
+  return left === right;
+};
+var matchesAccept = (file, accept) => {
+  if (!accept) {
+    return true;
+  }
+  const fileName = file.name.toLowerCase();
+  const mimeType = file.type.toLowerCase();
+  return accept.split(",").map((item) => item.trim().toLowerCase()).filter(Boolean).some((rule) => {
+    if (rule.startsWith(".")) {
+      return fileName.endsWith(rule);
+    }
+    if (rule.endsWith("/*")) {
+      return mimeType.startsWith(rule.slice(0, -1));
+    }
+    return mimeType === rule;
+  });
+};
+var describeErrorDetail = (detail) => {
+  var _a;
+  if (typeof detail === "string" && detail) {
+    return detail;
+  }
+  try {
+    const text = (_a = JSON.stringify(detail)) != null ? _a : "";
+    return text.length > 200 ? `${text.slice(0, 200)}…` : text;
+  } catch (e) {
+    return String(detail);
+  }
+};
+var toError = (error) => {
+  if (error instanceof Error) {
+    return error;
+  }
+  if (typeof error === "object" && error !== null && "error" in error) {
+    const detail = error.error;
+    if (detail instanceof Error) {
+      return detail;
+    }
+    if (detail !== null && detail !== void 0) {
+      const message = describeErrorDetail(detail);
+      if (message) {
+        return new Error(message);
+      }
+    }
+  }
+  return new Error(typeof error === "string" ? error : "Upload failed");
+};
+var isAbortRejection = (error) => typeof error === "object" && error !== null && error.status === "abort";
+var getAbort = (request) => {
+  if (typeof request === "function") {
+    return request;
+  }
+  return request == null ? void 0 : request.abort;
+};
 var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
-  const { upload } = (0, import_react.useContext)(import_Config_Provider.GlobalContext);
-  const props = (0, import_mergeContextToProps.default)(baseprops, upload);
+  const { upload: uploadConfig } = (0, import_react.useContext)(import_Config_Provider.GlobalContext);
+  const props = (0, import_mergeContextToProps.default)(baseprops, uploadConfig);
   const _a = props, {
     prefixCls = "yee-upload",
     name = "file",
@@ -127,6 +190,7 @@ var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
     accept,
     showUploadList = true,
     progress = true,
+    autoUpload = true,
     maxFileSize,
     maxCount,
     customRequest,
@@ -155,6 +219,7 @@ var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
     "accept",
     "showUploadList",
     "progress",
+    "autoUpload",
     "maxFileSize",
     "maxCount",
     "customRequest",
@@ -165,246 +230,430 @@ var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
     "itemRender"
   ]);
   const inputRef = (0, import_react.useRef)(null);
+  const rootRef = (0, import_react.useRef)(null);
+  const activeRequestsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const pendingPreparationsRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const mountedRef = (0, import_react.useRef)(true);
   const [dragState, setDragState] = (0, import_react.useState)(null);
   const [mergedFileList, setMergedFileList] = (0, import_useMergedState.default)([], {
     value: propsFileList,
     defaultValue: defaultFileList
   });
-  let acceptDirectory = {};
-  if (directory) {
-    acceptDirectory = {
-      webkitdirectory: "",
-      directory: "",
-      multiple: ""
+  const fileListRef = (0, import_react.useRef)(mergedFileList);
+  fileListRef.current = mergedFileList;
+  (0, import_react.useEffect)(() => {
+    return () => {
+      mountedRef.current = false;
+      pendingPreparationsRef.current.clear();
+      const activeRequests = Array.from(activeRequestsRef.current.values());
+      activeRequestsRef.current.clear();
+      activeRequests.forEach(({ abort }) => abort == null ? void 0 : abort());
     };
-  }
-  const updateFileList = (file) => {
-    setMergedFileList((state) => {
-      return state.map((item) => {
-        if (item.uid === file.uid) {
-          return file;
-        }
-        return item;
-      });
-    });
+  }, []);
+  const setFileList = (nextFileList) => {
+    fileListRef.current = nextFileList;
+    setMergedFileList(nextFileList);
   };
-  const postFile = (file) => {
-    const formData = new FormData();
-    formData.append(name, file.raw);
-    if (data) {
-      const extraData = typeof data === "function" ? data(file.raw) : data;
-      Object.keys(extraData).forEach((key) => {
-        formData.append(key, extraData[key]);
-      });
+  const emitChange = (file, nextFileList, event) => {
+    setFileList(nextFileList);
+    onChange == null ? void 0 : onChange({ file, fileList: nextFileList, event });
+  };
+  const appendFile = (file, event) => {
+    const nextFileList = [...fileListRef.current, file];
+    emitChange(file, nextFileList, event);
+    return file;
+  };
+  const replaceFile = (target, replacement, event) => {
+    const index = fileListRef.current.findIndex(
+      (item) => isSameFile(item, target)
+    );
+    if (index < 0) {
+      return void 0;
+    }
+    const nextFileList = [...fileListRef.current];
+    nextFileList[index] = replacement;
+    emitChange(replacement, nextFileList, event);
+    return replacement;
+  };
+  const updateFile = (target, patch, event) => {
+    const current = fileListRef.current.find(
+      (item) => isSameFile(item, target)
+    );
+    if (!current) {
+      return void 0;
+    }
+    return replaceFile(target, __spreadValues(__spreadValues({}, current), patch), event);
+  };
+  const abortRequest = (file) => {
+    var _a2;
+    if (!file.uid) {
+      return;
+    }
+    const activeRequest = activeRequestsRef.current.get(file.uid);
+    if (activeRequest) {
+      activeRequestsRef.current.delete(file.uid);
+      (_a2 = activeRequest.abort) == null ? void 0 : _a2.call(activeRequest);
+    }
+  };
+  const postFile = (sourceFile) => {
+    let file = sourceFile;
+    if (!file.uid) {
+      const withUid = __spreadProps(__spreadValues({}, file), { uid: (0, import_uuid.v4)() });
+      file = replaceFile(file, withUid) || withUid;
+    }
+    const requestKey = file.uid;
+    abortRequest(file);
+    const token = Symbol(requestKey);
+    activeRequestsRef.current.set(requestKey, { token });
+    const isActive = () => {
+      var _a2;
+      return ((_a2 = activeRequestsRef.current.get(requestKey)) == null ? void 0 : _a2.token) === token;
+    };
+    const finish = () => {
+      if (isActive()) {
+        activeRequestsRef.current.delete(requestKey);
+      }
+    };
+    const updateIfActive = (patch, event) => {
+      if (!isActive()) {
+        return void 0;
+      }
+      return updateFile(file, patch, event);
+    };
+    const fail = (error) => {
+      if (isAbortRejection(error)) {
+        updateIfActive({ status: "ready", percent: 0 });
+        finish();
+        return;
+      }
+      const normalizedError = toError(error);
+      updateIfActive({ status: "error", error: normalizedError }, error);
+      finish();
+    };
+    updateIfActive({ status: "uploading", percent: 0, error: void 0 });
+    if (!file.raw) {
+      fail(new Error(`File ${file.name} has no source file to upload`));
+      return;
     }
-    const url = typeof action === "function" ? action() : action;
     if (customRequest) {
-      customRequest({
-        file: file.raw,
-        onProgress: (percent) => {
-          const current = __spreadProps(__spreadValues({}, file), { status: "uploading", percent });
-          updateFileList(current);
-          onChange == null ? void 0 : onChange({
-            file: current,
-            fileList: mergedFileList,
-            event: { percent }
-          });
-        },
-        onError: (error) => {
-          const current = __spreadProps(__spreadValues({}, file), { status: "error", error });
-          updateFileList(current);
-          onChange == null ? void 0 : onChange({
-            file: current,
-            fileList: mergedFileList,
-            event: error
-          });
-        },
-        onSuccess: (response) => {
-          const current = __spreadProps(__spreadValues({}, file), { status: "success", response });
-          updateFileList(current);
-          onChange == null ? void 0 : onChange({
-            file: current,
-            fileList: mergedFileList,
-            event: response
-          });
+      try {
+        const request = customRequest({
+          file: file.raw,
+          onProgress: (percent) => {
+            const normalizedPercent = Math.min(100, Math.max(0, percent));
+            updateIfActive(
+              { status: "uploading", percent: normalizedPercent },
+              { percent: normalizedPercent }
+            );
+          },
+          onError: fail,
+          onSuccess: (response) => {
+            updateIfActive(
+              {
+                status: "success",
+                percent: 100,
+                response,
+                error: void 0
+              },
+              response
+            );
+            finish();
+          }
+        });
+        const activeRequest = activeRequestsRef.current.get(requestKey);
+        if ((activeRequest == null ? void 0 : activeRequest.token) === token) {
+          activeRequest.abort = getAbort(request);
         }
-      });
+      } catch (error) {
+        fail(error);
+      }
       return;
     }
-    import_ax.default.post(url, formData, {
-      withCredentials,
-      headers: __spreadValues({}, headers),
-      onUploadProgress: (e) => {
-        const percentage = parseInt(e.loaded / e.total * 100 + "");
-        let current;
-        if (percentage < 100) {
-          current = __spreadProps(__spreadValues({}, file), {
-            status: "uploading",
-            percent: percentage
-          });
-        } else {
-          current = __spreadProps(__spreadValues({}, file), { status: "success", percent: 100 });
-        }
-        updateFileList(current);
-        onChange == null ? void 0 : onChange({
-          file: current,
-          fileList: mergedFileList,
-          event: e
+    try {
+      const url = typeof action === "function" ? action() : action;
+      if (!url) {
+        throw new Error(
+          "Upload action is required when customRequest is not set"
+        );
+      }
+      const formData = new FormData();
+      formData.append(name, file.raw);
+      if (data) {
+        const extraData = typeof data === "function" ? data(file.raw) : data;
+        Object.keys(extraData).forEach((key) => {
+          formData.append(key, extraData[key]);
         });
       }
-    }).then((res) => {
-      const current = __spreadProps(__spreadValues({}, file), { status: "success", response: res });
-      updateFileList(current);
-      onChange == null ? void 0 : onChange({
-        file: current,
-        fileList: mergedFileList,
-        event: res
-      });
-    }).catch((err) => {
-      const current = __spreadProps(__spreadValues({}, file), { status: "error", error: err });
-      updateFileList(current);
-      onChange == null ? void 0 : onChange({
-        file: current,
-        fileList: mergedFileList,
-        event: err
+      const request = import_ax.default.post(url, formData, {
+        withCredentials,
+        headers: __spreadValues({}, headers),
+        onUploadProgress: (event) => {
+          const percentage = event.total ? Math.round(event.loaded / event.total * 100) : 0;
+          updateIfActive({ status: "uploading", percent: percentage }, event);
+        }
       });
-    });
-  };
-  const post = (file) => {
-    setMergedFileList((state) => [...state, file]);
-    postFile(file);
+      const activeRequest = activeRequestsRef.current.get(requestKey);
+      if ((activeRequest == null ? void 0 : activeRequest.token) === token) {
+        activeRequest.abort = request.abort;
+      }
+      request.then((response) => {
+        updateIfActive(
+          {
+            status: "success",
+            percent: 100,
+            response,
+            error: void 0
+          },
+          response
+        );
+        finish();
+      }).catch(fail);
+    } catch (error) {
+      fail(error);
+    }
   };
   const isValidFile = (file) => {
     if (maxFileSize && file.size > maxFileSize) {
       console.warn(`File ${file.name} exceeds maximum size limit`);
       return false;
     }
-    if (maxCount && mergedFileList.length >= maxCount) {
-      console.warn(`Maximum file count (${maxCount}) exceeded`);
+    if (!matchesAccept(file, accept)) {
+      console.warn(`File ${file.name} does not match accepted file types`);
       return false;
     }
     return true;
   };
-  const uploadFiles = (files, e) => {
-    const postFiles = Array.from(files);
-    postFiles.forEach((file) => {
-      if (!isValidFile(file)) {
+  const prepareFile = (file, wrapped, postFiles, preparationToken, event) => __async(void 0, null, function* () {
+    const preparationKey = wrapped.uid;
+    const isActive = () => mountedRef.current && pendingPreparationsRef.current.get(preparationKey) === preparationToken && fileListRef.current.some((item) => isSameFile(item, wrapped));
+    const finish = () => {
+      if (pendingPreparationsRef.current.get(preparationKey) === preparationToken) {
+        pendingPreparationsRef.current.delete(preparationKey);
+      }
+    };
+    try {
+      const result = beforeUpload ? yield Promise.resolve(beforeUpload(file, postFiles)) : true;
+      if (!isActive()) {
+        finish();
         return;
       }
-      const wrapped = wrapFile(file);
-      onChange == null ? void 0 : onChange({
-        file: wrapped,
-        fileList: mergedFileList,
-        event: e
-      });
-      if (beforeUpload) {
-        const res = beforeUpload(file, postFiles);
-        if (res && res instanceof Promise) {
-          res.then((progress2) => {
-            if (progress2 === false) {
-              return;
-            }
-            post(typeof progress2 === "object" ? wrapFile(progress2) : wrapped);
-          });
-        } else if (res !== false) {
-          post(wrapped);
+      if (result === false) {
+        setFileList(
+          fileListRef.current.filter((item) => !isSameFile(item, wrapped))
+        );
+        finish();
+        return;
+      }
+      let nextFile = wrapped;
+      if (result instanceof File) {
+        nextFile = __spreadProps(__spreadValues({}, wrapFile(result)), { uid: wrapped.uid });
+        if (!replaceFile(wrapped, nextFile, event)) {
+          finish();
+          return;
         }
-      } else {
-        post(wrapped);
       }
+      finish();
+      postFile(nextFile);
+    } catch (error) {
+      if (isActive()) {
+        updateFile(wrapped, { status: "error", error: toError(error) }, error);
+      }
+      finish();
+    }
+  });
+  const uploadFiles = (files, event) => {
+    const selectedFiles = Array.from(files);
+    const filesAllowedByMultiple = multiple || directory ? selectedFiles : selectedFiles.slice(0, 1);
+    const validFiles = filesAllowedByMultiple.filter(isValidFile);
+    const remainingCount = typeof maxCount === "number" ? Math.max(0, maxCount - fileListRef.current.length) : validFiles.length;
+    const postFiles = validFiles.slice(0, remainingCount);
+    if (postFiles.length < validFiles.length) {
+      console.warn(`Maximum file count (${maxCount}) exceeded`);
+    }
+    postFiles.forEach((file) => {
+      const wrapped = appendFile(wrapFile(file), event);
+      if (!autoUpload) {
+        return;
+      }
+      const preparationToken = Symbol(wrapped.uid);
+      pendingPreparationsRef.current.set(
+        wrapped.uid,
+        preparationToken
+      );
+      void prepareFile(file, wrapped, postFiles, preparationToken, event);
     });
   };
-  const handleChange = (e) => {
-    const files = e.target.files;
-    if (!files)
+  const upload = (file) => {
+    const requested = file === void 0 ? fileListRef.current : Array.isArray(file) ? file : [file];
+    const readyFiles = requested.filter((item) => item.status === "ready");
+    readyFiles.forEach((item) => {
+      var _a2;
+      let target = item;
+      if (!target.uid) {
+        target = (_a2 = replaceFile(item, __spreadProps(__spreadValues({}, item), { uid: (0, import_uuid.v4)() }))) != null ? _a2 : item;
+      }
+      if (!target.raw) {
+        updateFile(target, {
+          status: "error",
+          error: new Error(`File ${target.name} has no source file to upload`)
+        });
+        return;
+      }
+      const preparationToken = Symbol(target.uid);
+      pendingPreparationsRef.current.set(
+        target.uid,
+        preparationToken
+      );
+      void prepareFile(
+        target.raw,
+        target,
+        readyFiles.map((ready) => ready.raw).filter((raw) => raw instanceof File),
+        preparationToken
+      );
+    });
+  };
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => {
+      var _a2;
+      return Object.assign((_a2 = rootRef.current) != null ? _a2 : document.createElement("div"), {
+        upload
+      });
+    },
+    [upload]
+  );
+  const handleChange = (event) => {
+    const files = event.target.files;
+    if (!files) {
       return;
-    uploadFiles(files, e);
-    if (inputRef.current) {
-      inputRef.current.value = "";
     }
+    uploadFiles(files, event);
+    event.target.value = "";
   };
-  const handleClick = () => {
-    var _a2;
+  const handleDragOver = (event) => {
+    event.preventDefault();
     if (!disabled) {
-      (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+      setDragState("dragover");
     }
   };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    if (disabled)
-      return;
-    setDragState("dragover");
-  };
-  const handleDragLeave = (e) => {
-    e.preventDefault();
+  const handleDragLeave = (event) => {
+    event.preventDefault();
     setDragState(null);
   };
-  const handleDrop = (e) => __async(void 0, null, function* () {
-    e.preventDefault();
-    if (disabled)
+  const handleDrop = (event) => __async(void 0, null, function* () {
+    event.preventDefault();
+    if (disabled) {
       return;
+    }
     setDragState("drop");
-    const { files, items } = e.dataTransfer;
-    if (files.length === 1) {
-      const item = items[0].webkitGetAsEntry();
-      if (item == null ? void 0 : item.isDirectory) {
-        const folderFiles = yield (0, import_folder_scanner.default)(item, []);
-        uploadFiles(folderFiles, e);
-      } else if (item == null ? void 0 : item.isFile) {
-        uploadFiles(files, e);
+    try {
+      const entries = Array.from(event.dataTransfer.items).map((item) => {
+        var _a2;
+        return (_a2 = item.webkitGetAsEntry) == null ? void 0 : _a2.call(item);
+      }).filter(
+        (entry) => entry !== null && entry !== void 0
+      );
+      if (entries.some((entry) => entry.isDirectory)) {
+        const nestedFiles = yield Promise.all(
+          entries.map((entry) => (0, import_folder_scanner.default)(entry, []))
+        );
+        uploadFiles(nestedFiles.flat(), event);
+      } else {
+        uploadFiles(event.dataTransfer.files, event);
+      }
+    } catch (error) {
+      console.warn("Failed to scan dropped files", error);
+    } finally {
+      setDragState(null);
+    }
+  });
+  const handleRemove = (file) => __async(void 0, null, function* () {
+    if (file.uid) {
+      pendingPreparationsRef.current.delete(file.uid);
+    }
+    try {
+      const shouldRemove = onRemove ? yield Promise.resolve(onRemove(file)) : true;
+      if (shouldRemove === false) {
+        return;
       }
-    } else if (files.length > 1) {
-      uploadFiles(files, e);
+      abortRequest(file);
+      setFileList(
+        fileListRef.current.filter((item) => !isSameFile(item, file))
+      );
+    } catch (error) {
+      console.warn(`Failed to remove file ${file.name}`, error);
     }
   });
+  const handleReUpload = (file) => {
+    if (file.uid) {
+      pendingPreparationsRef.current.delete(file.uid);
+    }
+    abortRequest(file);
+    const nextFile = updateFile(file, {
+      uid: file.uid || (0, import_uuid.v4)(),
+      status: "ready",
+      percent: 0,
+      error: void 0,
+      response: void 0
+    });
+    if (nextFile) {
+      postFile(nextFile);
+    }
+  };
+  const handlePreview = (file) => {
+    if (onPreview) {
+      onPreview(file);
+      return;
+    }
+    if (file.url) {
+      window.open(file.url, "_blank", "noopener,noreferrer");
+      return;
+    }
+    if (!file.raw) {
+      return;
+    }
+    const url = URL.createObjectURL(file.raw);
+    const previewWindow = window.open(url, "_blank");
+    if (!previewWindow) {
+      URL.revokeObjectURL(url);
+      return;
+    }
+    const cleanup = () => URL.revokeObjectURL(url);
+    previewWindow.addEventListener("load", cleanup, { once: true });
+    window.setTimeout(cleanup, 6e4);
+  };
   const renderUploadTrigger = () => {
+    const acceptDirectory = directory ? { webkitdirectory: "", directory: "" } : {};
     return /* @__PURE__ */ import_react.default.createElement(
       "span",
       {
         className: (0, import_clsx.default)(`${prefixCls}-input`, {
           [`${prefixCls}-input-disabled`]: disabled
         }),
-        onClick: handleClick
+        onClick: (event) => {
+          var _a2;
+          if (!disabled && event.target !== inputRef.current) {
+            (_a2 = inputRef.current) == null ? void 0 : _a2.click();
+          }
+        }
       },
       /* @__PURE__ */ import_react.default.createElement(
         "input",
         __spreadProps(__spreadValues({
           type: "file",
+          "aria-label": "Upload file",
+          className: `${prefixCls}-native-input`,
           disabled
         }, acceptDirectory), {
-          multiple,
+          multiple: Boolean(multiple || directory),
           accept,
           onChange: handleChange,
-          style: { display: "none" },
           ref: inputRef
         })
       ),
-      children ? children : listType === "picture-wall" ? /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-picture-wall-trigger` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, null)) : /* @__PURE__ */ import_react.default.createElement(import_Button.default, { disabled }, "Upload")
+      children ? children : listType === "picture-wall" ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-picture-wall-trigger` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Plus, null)) : /* @__PURE__ */ import_react.default.createElement(import_Button.default, { disabled }, "Upload")
     );
   };
-  const handleRemove = (file) => __async(void 0, null, function* () {
-    const promise = onRemove == null ? void 0 : onRemove(file);
-    const shouldRemove = promise instanceof Promise ? yield promise : promise !== false;
-    if (shouldRemove !== false) {
-      setMergedFileList(
-        (state) => state.filter((item) => item.uid !== file.uid)
-      );
-    }
-  });
-  const handleReUpload = (file) => {
-    const newFile = __spreadProps(__spreadValues({}, file), { status: "ready", percent: 0 });
-    updateFileList(newFile);
-    postFile(newFile);
-  };
-  const handlePreview = (file) => {
-    if (onPreview) {
-      onPreview(file);
-    } else if (file.raw) {
-      const url = URL.createObjectURL(file.raw);
-      window.open(url);
-      setTimeout(() => URL.revokeObjectURL(url), 100);
-    }
-  };
   const renderUploadList = (extraProps) => {
     if (!showUploadList) {
       return null;
@@ -420,7 +669,8 @@ var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
         itemRender,
         onRemove: handleRemove,
         onReUpload: handleReUpload,
-        onPreview: handlePreview
+        onPreview: handlePreview,
+        isPreviewable: (file) => Boolean(onPreview || file.url || file.raw)
       }, extraProps)
     );
   };
@@ -428,7 +678,7 @@ var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       __spreadProps(__spreadValues({
-        ref
+        ref: rootRef
       }, rest), {
         className: (0, import_clsx.default)(
           prefixCls,
@@ -444,7 +694,7 @@ var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
       /* @__PURE__ */ import_react.default.createElement(
         "div",
         {
-          className: (0, import_clsx.default)(`${prefixCls}-drag-container`),
+          className: `${prefixCls}-drag-container`,
           onDrop: handleDrop,
           onDragOver: handleDragOver,
           onDragLeave: handleDragLeave
@@ -458,7 +708,7 @@ var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       __spreadProps(__spreadValues({
-        ref
+        ref: rootRef
       }, rest), {
         className: (0, import_clsx.default)(prefixCls, `${prefixCls}-picture-wall`, className),
         style
@@ -469,7 +719,7 @@ var Upload = (0, import_react.forwardRef)((baseprops, ref) => {
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     __spreadProps(__spreadValues({
-      ref
+      ref: rootRef
     }, rest), {
       className: (0, import_clsx.default)(
         prefixCls,