在蚂蚁设计表单中使用`getValueFromEvent`

Question

i wanted to know how to use ant image picker (or any other component) in ant design form. and if possible i wanted to know how getValueFromEvent will be called and how to change it to make in work.

here is my sample. i think its pretty straight:

https://codesandbox.io/s/antd-reproduction-template-forked-lfk7k?file=/index.js

this section should be trigged in some way.

const normFile = (e) => {
  console.log("Upload event:", e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
};

the only thing i'm not understanding is how the event will be trigged? i'll be thankful for any document or link or ...

Answer 1

In your code you use 'customRequest' documented as such: "Override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest"

So, you'd need to implement your own upload behavior. If that's not what you meant, id suggest using the needed props such as 'action' ('method', etc) to specify where the file should be uploaded to.

Answer 2

Below trick should work to set value to Form.Item for Upload inside Image Crop:

import {
    Form,
    Upload,
} from 'antd';
import ImgCrop from 'antd-img-crop';
import axios from "axios";

const Upload = (props) => {
    const [form] = Form.useForm();

    const uploadImage = async options => {

        const { onSuccess, onError, file, onProgress, category } = options;

        const fmData = new FormData();
        const config = {
            headers: { "content-type": "multipart/form-data" },
            onUploadProgress: event => {
                const percent = Math.floor((event.loaded / event.total) * 100);
                onProgress({ percent: (event.loaded / event.total) * 100 }, file);
            }
        };
        fmData.append("file", file);
        try {
            const res = await axios.post(
                `${API_DOMAIN}/upload`,
                fmData,
                config
            );
            onSuccess("ok", res);
            form.setFieldsValue({ photo: res.data.link })
        } catch (err) {
            console.log("Eroor: ", err);
            const error = new Error("Some error");
            onError({ err });
        }
    }
    return (
        <Form
            {...formItemLayout}
            form={form}
            name="form_name"
            onFinish={onFinish}
            scrollToFirstError
        >

            <Form.Item
                label="Photo"
                name="photo"
            >
                <ImgCrop rotate>
                    <Upload
                        name={'file'}
                        customRequest={uploadImage}
                        listType="picture-card"
                        onChange={onChange}
                        fileList={fileList}
                        onPreview={onPreview}
                        accept={"image/*"}
                    >
                        {fileList.length < 1 && '+ Upload'}
                    </Upload>
                </ImgCrop>
            </Form.Item>
        </Form>
    )

}

Answer 3

To use ImgCrop "antd-img-crop" with ant Form and Upload widget, and get the value with getFieldsValue() I made this code.

import React, { useState } from 'react';
import BasePanel          from '@/containers/BasePanel';
import BaseFormComponent  from '@/formcomponents/BaseFormComponent';
import { Upload, Form, Button, Input, Select } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import ImgCrop from 'antd-img-crop';
const { Option } = Select;

const CroppedInput = ({ value = {}, onChange }) => {
    const [fotos, setfotos] = useState([]);

    const triggerChange = (changedValue) => {
        onChange?.({
            fotos,
            ...value,
            ...changedValue,
        });
    };

    const onChange2 = (file) => {
        console.log(file);
        setfotos(file);

        triggerChange({
            fotos: file.fileList,
        });
    };

    return (
        <ImgCrop>
            <Upload listType="picture-card" maxCount={3} onChange={e => onChange2(e)}>
                <UploadOutlined />
            </Upload>
        </ImgCrop>
    );
};


class FormMultiImage extends BaseFormComponent{
    constructor(props) {
        super(props);

        this.checkValidator = this.checkValidator.bind(this);
    }

    checkValidator (_, value) {
        if (value !== undefined && value.fotos.length > 0) {
            return Promise.resolve();
        }
        return Promise.reject(new Error('Por favor seleccione una imagen'));
    };

    render() {
        return (
            <div>
                <Form.Item
                    label={"label"}
                    name={"name"}
                    rules={[
                        {
                            validator: this.checkValidator,
                        },
                    ]}
                >
                    <CroppedInput />
                </Form.Item>
            </div>
        );
    }
}

export default FormMultiImage;

And call it in your form

<Form>
    <FormMultiImage />
</Form>

Answer 4

import React, { useState } from 'react';
import BasePanel          from '@/containers/BasePanel';
import BaseFormComponent  from '@/formcomponents/BaseFormComponent';
import { Upload, Form, Button, Input, Select } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import ImgCrop from 'antd-img-crop';
const { Option } = Select;

const CroppedInput = ({ value = {}, onChange }) => {
    const [fotos, setfotos] = useState([]);

    const triggerChange = (changedValue) => {
        onChange?.({
            fotos,
            ...value,
            ...changedValue,
        });
    };

    const onChange2 = (file) => {
        console.log(file);
        setfotos(file);

        triggerChange({
            fotos: file.fileList,
        });
    };

    return (
        <ImgCrop>
            <Upload listType="picture-card" maxCount={3} onChange={e => onChange2(e)}>
                <UploadOutlined />
            </Upload>
        </ImgCrop>
    );
};


class FormMultiImage extends React.Component{
    constructor(props) {
        super(props);

        this.checkValidator = this.checkValidator.bind(this);
    }

    checkValidator (_, value) {
        if (value !== undefined && value.fotos.length > 0) {
            return Promise.resolve();
        }
        return Promise.reject(new Error('Por favor seleccione una imagen'));
    };

    render() {
        return (
            <div>
                <Form.Item
                    label={"label"}
                    name={"name"}
                    rules={[
                        {
                            validator: this.checkValidator,
                        },
                    ]}
                >
                    <CroppedInput />
                </Form.Item>
            </div>
        );
    }
}

export default FormMultiImage;

And call it in your form

<Form>
    <FormMultiImage />
</Form>