Ant Design Upload show file size with file name

Question

How to display file size with name in antd upload in React.js ? like this is it possible to show the file size without custom code and styling?

if it is not possible so i can show the file Size with custom code but i need to display the file size with antd props or something else

import React from 'react';
import './index.css';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Upload } from 'antd';
import { useState } from 'react';

export default function UploadFile() {
    const [fileList, setFileList] = useState([
        {
            uid: '-1',
            name: 'xxx.png',
            status: 'done',
            url: 'https://reactnative.dev/img/tiny_logo.png',
        },
    ]);

    const props = {
        action: 'https://reactnative.dev/img/tiny_logo.png',
        multiple: true,
    };
    // SAVE FILE IN LOCAL STORAGE
    const onChange = ({ fileList: newFileList }) => {
        setFileList(newFileList);
        localStorage.setItem('image', JSON.stringify(fileList));
    }

    return (
        <Upload
            listType="picture"
            beforeUpload={(fileList) => {
                console.log('FILE', fileList.size);
                return true;
            }
            }
        >
            <Button icon={
                <UploadOutlined />}>Upload</Button >
        </Upload>
    );
}

Answer 1

I don't think AntD supports showing file size on the upload list.

In your case, you can capture the file size using onChange function, which receives not only fileList but also the file object containing the file size in bytes. You can save the file size to state and manually render using the itemRender (example) prop.