javascript - How to correctly use ANT upload and display image thumbnails

Question

I am currently trying to incorporate an ANT design image upload component for a project. I have been struggling to find a way to get the component to behave how I want. I have found a work around, but I was wondering if anyone has a better way of doing this (I'm very new to React and ANTd).

In a nutshell, I am creating a form which will contain various text inputs plus the ANT image upload component. I want the user to be able to see thumbnail previews of the images as they are adding them to the form. Once the entire form is filled, then the information including all images will be submitted.

The code below does exactly what I want however I feel that this is badly written and would like some possible suggestions on improvement. The badly written parts I am referring to are:

function normFile(e), and onChange: inside of 'props'. I am having to perform filtering twice in order to display and submit the images that fit into the conditions I want (jpeg/png and less than 2mb). Thanks

import React, { useState } from 'react';
import { Upload, Button, message, Form} from 'antd';

function checkJpeg(file) {
    return (file.type  === 'image/jpeg' || file.type === 'image/png') 
        && (file.size / 1024 / 1024 < 2)
}

    const Uploader = () => {
    const [fileList, updateFileList] = useState([]);

    const onFinish = (values) => {
        console.log('Success:', values);
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    }

    const normFile = (e) => {
        return e.fileList.filter(checkJpeg);
    };

    const props = {
        fileList,

        listType: "picture-card",

        onRemove: file => {
            const index = fileList.indexOf(file);
            const newFileList = fileList.slice();
            newFileList.splice(index, 1);
            updateFileList(newFileList);
        },

        beforeUpload: file => {
            const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
            if(!isJpgOrPng) message.error('You can only upload JPG/PNG file!');

            const isLt2M = file.size / 1024 / 1024 < 2;
            if(!isLt2M) message.error('Image must smaller than 2MB!');
            return false;
        },

        onChange: (info) => {
            const temp = info.fileList.filter(checkJpeg);
            updateFileList(temp);
            info.fileList = temp;
        }
      };

      return (
        <div>
            <Form
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
            >
                <Form.Item 
                    name="p_image_uri"
                    getValueFromEvent={normFile}                                      //this name is subject to change
                    rules={[
                        {
                            validator: async () => {
                                if (fileList <= 0) return Promise.reject(new Error('Please upload an image'));
                            }
                        }
                    ]}>
                    <Upload {...props}>
                        {fileList.length < 4 && '+ Upload'}
                    </Upload>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit"><b>Add Product</b></Button>
                </Form.Item>
            </Form>
        </div>
      );
    }

Answer 1

等待大神答复