如何修改Ant Design Upload组件的Uploading提示文本？

Hey there! I totally get why you’re stuck—Ant Design’s docs don’t explicitly highlight how to change that "Uploading" text, but I’ve got two solid solutions for you that I’ve used in my own projects.

Option 1: Use the locale Prop (Quick & Simple) #

If you just need to replace the text with a static custom string, the locale prop is your best bet. This prop lets you override all the built-in language text for the Upload component, including the "Uploading" status.

Here’s a quick example:

import { Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

// Define your custom locale object
const uploadLocale = {
  uploading: 'Processing your file...', // Replace this with your desired text
  // You can also override other text like 'remove', 'done', etc., if needed
};

function MyUploadComponent() {
  return (
    <Upload
      action="/your-upload-endpoint"
      locale={uploadLocale}
      fileList={[]}
    >
      <button style={{ border: 'none', padding: '8px 16px' }}>
        <UploadOutlined /> Select File
      </button>
    </Upload>
  );
}

export default MyUploadComponent;

This works seamlessly in both Ant Design 4.x and 5.x, and it’s perfect if you want a consistent text replacement across all upload states.

Option 2: Use itemRender (Full Customization Control) #

If you need more flexibility—like adding extra elements (a progress bar, custom icons) or dynamic text based on upload progress—use the itemRender prop. This lets you fully customize how each file item is rendered, including when it’s in the "uploading" state.

Check out this example:

import { Upload, Progress } from 'antd';
import { UploadOutlined, CloseOutlined } from '@ant-design/icons';

const customItemRenderer = (originNode, file, fileList) => {
  // Check if the file is currently uploading
  if (file.status === 'uploading') {
    return (
      <div style={{ padding: '8px', border: '1px solid #eee', borderRadius: '4px' }}>
        <p>{file.name}</p>
        {/* Add a progress bar */}
        <Progress percent={file.percent || 0} size="small" />
        {/* Your custom uploading text */}
        <span style={{ marginLeft: '8px', color: '#666' }}>Uploading your file, please wait...</span>
        {/* Optional: Add a cancel button */}
        <button 
          onClick={() => console.log('Cancel upload for', file.name)}
          style={{ marginLeft: '12px', border: 'none', background: 'transparent', color: '#ff4d4f' }}
        >
          <CloseOutlined />
        </button>
      </div>
    );
  }
  // For other states (done, error), use the default rendering
  return originNode;
};

function CustomUploadComponent() {
  return (
    <Upload
      action="/your-upload-endpoint"
      itemRender={customItemRenderer}
      fileList={[]}
      onChange={(info) => console.log(info)}
    >
      <button style={{ border: 'none', padding: '8px 16px' }}>
        <UploadOutlined /> Select File
      </button>
    </Upload>
  );
}

export default CustomUploadComponent;

With itemRender, you have full control over the UI—you can tweak the layout, add interactive elements, or even change the text based on the upload percentage.

A Quick Note on Versions #

Both methods work for Ant Design 4.x and 5.x. If you’re on 5.x, the locale prop might be used alongside the global ConfigProvider if you want app-wide language overrides, but the component-level locale still works as shown.

Hope one of these solutions fits your needs! Feel free to ask if you need help tweaking it further.

内容的提问来源于stack exchange，提问作者samane yaghoobi