Change file object to normal object in React

You are sending a file object. You need to use FormData to send files. It allows you to set key/value pairs. I have created a small example with complete form submission. Also attach some screenshot.

import { useState, useMemo } from 'react';
import { Upload, Button, message, Form, Input } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { UploadFile } from 'antd/lib/upload/interface';
import { RcFile } from 'rc-upload/lib/interface';
import { POST } from '../../../utils/https';
import axios from 'axios';

interface FormRule {
    title: string;
    attachment?: { file: RcFile; fileList: RcFile[] };
}

const Uploader = () => {
    const [fileList, setFileList] = useState<UploadFile<any>[]>([]);
    const [form] = Form.useForm<FormRule>();

    const validateFileType = ({ type, name }: UploadFile, allowedTypes: string[] = ['image/png', 'image/jpeg']) => {
        return allowedTypes.includes(type!);
    };

    const uploadProps = useMemo(
        () => ({
            multiple: true,
            beforeUpload: (file: UploadFile) => {
                const isAllowedType = validateFileType(file);
                if (!isAllowedType) {
                    message.error(`${file.name} is not PNG file`);
                    return false;
                }
                setFileList((prev) => [...prev, file]);
                return false;
            },
            onRemove: (file: UploadFile) => {
                setFileList((prev) => prev.filter((item) => item.uid !== file.uid));
            }
        }),
        []
    );

    const onSubmit = async (data: FormRule) => {
        // You cannot send files like normal data. You need to convert it into buffer...
        // Use FormData and attach everything you want to send to send to backend
        // If you are using node.js, use multer or any other package of your choice to get all files
        // and get Files from req.files and data from req.body
        let formData = new FormData();
        formData.append('title', data.title);

        // Don't get attachment files from data, use fileList State because
        // it you use attachment from data, it will have all the files that
        // should be not accepted. For example, upload one png file and 1 file other than png or jpeg i.e. txt,
        // it will have txt file + png file.
        if (!!fileList.length) {
            for (const item of fileList) {
                formData.append('attachment', new Blob([item as any]));
            }
        }

        // await axios('..', { data: formData, method: 'POST' });
    };

    return (
        <Form form={form} onFinish={onSubmit} layout='vertical'>
            <Form.Item label='Title' name='title' rules={[{ required: true }]}>
                <Input />
            </Form.Item>
            <Form.Item name='attachment' rules={[{ required: true }]}>
                <Upload {...uploadProps} fileList={fileList}>
                    <Button icon={<UploadOutlined />}>Upload png only</Button>
                </Upload>
            </Form.Item>

            <Button type='primary' htmlType='submit'>
                Submit
            </Button>
        </Form>
    );
};

export default Uploader;