Как в Ant Design вывести ошибку в Upload?

Question

подскажите пожалуйста. При удалении файла в поле upload, у файла статус меняется на removed. Но при сабмите формы, файл все равно отправляется. Как можно сделать, чтобы если фото удалено, то под полем с upload при сабмите выводилась ошибка.

const {
  Form,
  Input,
  Button,
  Upload
} = antd;

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

  const handleSubmit = (data) => {
    console.log(data);
  };

  const onChange = (file) => {
    console.log(file);
  };

  return ( <
    Form initialValues = {
      {
        remember: true
      }
    }
    layout = "horizontal"
    form = {
      form
    }
    scrollToFirstError = "true"
    onFinish = {
      handleSubmit
    } >
    <
    Form.Item label = "Email"
    name = 'email'
    rules = {
      [{
        required: true,
        message: "Введите корректный email"
      }]
    } >
    <
    Input placeholder = "[email protected]"
    required /
    >
    <
    /Form.Item> <
    Form.Item label = "Фото"
    name = "photo"
    rules = {
      [{
        required: true,
        message: "Выберите фото"
      }]
    } >
    <
    Upload customRequest = {
      ({
        onSuccess
      }) => onSuccess("ok")
    }
    status = "done"
    listType = "picture"
    accept = "image/jpeg,image/png"
    maxCount = {
      1
    }
    onChange = {
      (e) => onChange(e)
    } >
    <
    Button > Выберите фото < /Button> < /
    Upload > <
    /Form.Item> <
    Form.Item >
    <
    Button type = "primary"
    htmlType = "submit" >
    Отправить <
    /Button> < /
    Form.Item > <
    /Form>
  );
};

ReactDOM.render( < UploadForm / > , mountNode);

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta name="theme-color" content="#000000" />
</head>

<body>
  <div id="container" style="padding: 24px;" />
  <script>
    var mountNode = document.getElementById("container");
  </script>
  <script src="https://unpkg.com/[email protected]/umd/ReactRouter.min.js"></script>
  <script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
  <script src="https://unpkg.com/@ant-design/icons/dist/index.umd.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/antd-with-locales.js"></script>
  <script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
</body>

</html>

https://codepen.io/imp3l/pen/BadjEPp?editors=0010

Answer 1

Ссылка на Stackblitz

Нужно вытаскивать фото из эвента, переопределяя метод getValueFromEvent

БЛОГ НА HUSL

Как в Ant Design вывести ошибку в Upload?

Ответы (1 шт):