Обработка файлов

Для работы с файлами в Ant Design используется компонент Upload. Он предоставляет гибкий интерфейс для загрузки файлов как на стороне клиента, так и на сервер. Подключение компонента осуществляется следующим образом:

import { Upload, Button, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

Компонент Upload поддерживает несколько режимов загрузки:

  • Дискретная загрузка – через кнопку, по клику на которую открывается диалог выбора файлов.
  • Drag & Drop – перетаскивание файлов на область загрузки.
  • Автоматическая загрузка – файлы отправляются на сервер сразу после выбора.

Простейший пример дискретной загрузки:

<Upload
  name="file"
  action="/upload.do"
  onCha nge={(info) => {
    if (info.file.status === 'done') {
      message.success(`${info.file.name} успешно загружен`);
    } else if (info.file.status === 'error') {
      message.error(`${info.file.name} не удалось загрузить`);
    }
  }}
>
  <Button icon={<UploadOutlined />}>Загрузить файл</Button>
</Upload>

Ключевые свойства компонента Upload

  • action – URL, куда будут отправляться файлы.
  • name – имя поля файла при отправке на сервер.
  • multiple – разрешает выбор нескольких файлов.
  • accept – фильтр по типам файлов, например "image/*".
  • beforeUpload – функция, вызываемая перед загрузкой, может блокировать загрузку или изменять файл.
  • onChange – обработчик событий загрузки, возвращает объект info с состоянием файла.
  • fileList – массив файлов, контролируемый состоянием компонента.

Использование beforeUpload позволяет проверять размер и тип файла:

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('Можно загружать только JPG или PNG');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Файл должен быть меньше 2MB');
  }
  return isJpgOrPng && isLt2M;
};

<Upload
  name="file"
  action="/upload.do"
  beforeUpload={beforeUpload}
>
  <Button icon={<UploadOutlined />}>Загрузить изображение</Button>
</Upload>

Поддержка перетаскивания файлов (Drag & Drop)

Ant Design предоставляет компонент Dragger, который расширяет Upload для удобного Drag & Drop интерфейса:

import { Upload } from 'antd';
const { Dragger } = Upload;

<Dragger
  name="file"
  action="/upload.do"
  multiple
  onCha nge={(info) => {
    const { status } = info.file;
    if (status === 'done') {
      message.success(`${info.file.name} загружен успешно`);
    } else if (status === 'error') {
      message.error(`${info.file.name} загрузить не удалось`);
    }
  }}
>
  <p className="ant-upload-drag-icon">
    <UploadOutlined />
  </p>
  <p className="ant-upload-text">Перетащите файл сюда или нажмите для выбора</p>
  <p className="ant-upload-hint">Поддерживаются несколько файлов одновременно</p>
</Dragger>

Управление списком файлов

Состояние загруженных файлов можно контролировать через fileList:

const [fileList, setFileList] = React.useState([]);

<Upload
  action="/upload.do"
  fileList={fileList}
  onCha nge={({ fileList: newFileList }) => setFileList(newFileList)}
>
  <Button icon={<UploadOutlined />}>Загрузить файлы</Button>
</Upload>

Такой подход позволяет:

  • Удалять файлы из списка.
  • Отображать прогресс загрузки.
  • Получать информацию о каждом файле (имя, статус, URL после загрузки).

Настройка отображения прогресса

Свойство progress позволяет кастомизировать индикатор загрузки:

<Upload
  action="/upload.do"
  showUploadList={{ showRemoveIcon: true }}
  progress={{ strokeColor: { '0%': '#108ee9', '100%': '#87d068' }, strokeWidth: 3, format: percent => `${parseFloat(percent.toFixed(2))}%` }}
>
  <Button icon={<UploadOutlined />}>Загрузить с прогрессом</Button>
</Upload>

Загрузка на сервер с использованием fetch или axios

Для большей гибкости можно отключить автоматическую загрузку и отправлять файлы вручную:

const customRequest = ({ file, onSuccess, onError }) => {
  const formData = new FormData();
  formData.append('file', file);

  axios.post('/upload', formData)
    .then(() => onSuccess('ok'))
    .catch(() => onError('Ошибка загрузки'));
};

<Upload customRequest={customRequest}>
  <Button icon={<UploadOutlined />}>Загрузить файл вручную</Button>
</Upload>

Обработка изображений и предварительный просмотр

Для изображений Ant Design предоставляет возможность предварительного просмотра с помощью метода previewFile и события onPreview:

<Upload
  listType="picture-card"
  action="/upload.do"
  onPrev iew={async file => {
    const src = file.url || await getBase64(file.originFileObj);
    const imageWindow = window.open(src);
    imageWindow.document.write(`<img src="${src}" />`);
  }}
>
  <div>
    <UploadOutlined />
    <div style={{ marginTop: 8 }}>Загрузить</div>
  </div>
</Upload>

Вспомогательная функция для преобразования файла в Base64:

const getBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onl oad = () => resolve(reader.result);
    reader.oner ror = error => reject(error);
  });
};

Поддержка различных форматов и ограничений

Ant Design позволяет комбинировать проверки beforeUpload с accept для строгого контроля типов и размеров файлов. Например:

  • Только PDF: accept="application/pdf"
  • Только изображения: accept="image/*"
  • Ограничение размера до 5 МБ через beforeUpload.

Советы по интеграции

  • Использовать контролируемый fileList для динамического управления состоянием.
  • Комбинировать onChange и message для отображения статусов загрузки.
  • Для больших файлов применять chunk upload через ручную отправку (customRequest).
  • При работе с изображениями применять listType="picture-card" для удобного визуального представления.

Ant Design предоставляет полный набор инструментов для гибкой загрузки файлов, управления их списком и визуального контроля процесса, что позволяет создавать интерфейсы на уровне профессиональных веб-приложений.

Оглавление