FormFileUpload — это компонент WordPress, предназначенный для загрузки файлов с локального устройства пользователя. Этот компонент удобно использовать для создания интерфейса, позволяющего пользователям выбирать и загружать файлы, такие как изображения, видео или документы. FormFileUpload поддерживает различные параметры, такие как ограничение типов файлов, выбор множества файлов и кастомизация пользовательского интерфейса.
Использование FormFileUpload
Пример использования FormFileUpload, в котором пользователи могут загружать изображения.
import { FormFileUpload } from '@wordpress/components';
const MyFormFileUpload = () => (
<FormFileUpload
accept="image/*"
onChange={(event) => console.log(event.currentTarget.files)}
>
Загрузить файл
</FormFileUpload>
);
export default MyFormFileUpload;
Описание Параметров
FormFileUpload предоставляет следующие параметры для настройки. Параметры, не указанные в этом списке, будут переданы компоненту Button, который используется по умолчанию для отображения интерфейса.
1. accept
- Тип: Строка
- Обязательный: Нет
- Описание: Устанавливает допустимые типы файлов, которые может загружать пользователь. Значения передаются в HTML-атрибут
accept, например,image/*,video/*илиapplication/pdf. Можно указать конкретные расширения, такие как.jpg,.png.
accept="image/*"
2. children
- Тип: React-элементы
- Обязательный: Нет
- Описание: Указывает содержимое, отображаемое внутри кнопки загрузки. Чаще всего это текст, но можно использовать и другие React-элементы, чтобы создать более сложный интерфейс.
<FormFileUpload>
Нажмите для загрузки
</FormFileUpload>
3. icon
- Тип: Строка | Функция | Компонент |
null - Обязательный: Нет
- По умолчанию:
null - Описание: Устанавливает иконку, отображаемую на кнопке загрузки. Может принимать значения:
- Строки, указывающие на иконки Dashicons.
- Функции или компоненты, возвращающие кастомные иконки.
null, если иконка не требуется.
icon="upload"
4. multiple
- Тип: Boolean
- Обязательный: Нет
- По умолчанию:
false - Описание: Позволяет пользователю выбрать несколько файлов для загрузки одновременно, если значение
true.
multiple={true}
5. onChange
- Тип: Функция
- Обязательный: Да
- Описание: Функция-обработчик, вызываемая при изменении выбранного файла. Файлы доступны через
event.currentTarget.files, что позволяет легко получить доступ к загруженным файлам.
onChange={(event) => console.log(event.currentTarget.files)}
6. onClick
- Тип: Функция
- Обязательный: Нет
- Описание: Функция, вызываемая при нажатии на кнопку загрузки. Полезна, когда нужно обработать клик по кнопке или сбросить значение
input, чтобы разрешить повторную загрузку того же файла.
onClick={(event) => event.target.value = ''}
7. render
- Тип: Функция
- Обязательный: Нет
- Описание: Позволяет кастомизировать рендеринг компонента. Если передана функция
render, компонент не будет отображать стандартную кнопку и вызовет эту функцию для рендеринга. Функция принимает объект с методомopenFileDialog, открывающим системное окно загрузки файлов.
render={({ openFileDialog }) => (
<button onClick={openFileDialog}>
Загрузить файл
</button>
)}
8. __next40pxDefaultSize
- Тип: Boolean
- Обязательный: Нет
- По умолчанию:
false - Описание: Если установлено в
true, компонент начнет использовать новую увеличенную высоту, которая станет стандартом в будущих версиях.
__next40pxDefaultSize={true}
Пример 1: Загрузка Файлов с Ограничением на Форматы Изображений
Этот пример позволяет пользователю загружать только изображения.
import { FormFileUpload } from '@wordpress/components';
const ImageUploadButton = () => (
<FormFileUpload
accept="image/*"
onChange={(event) => console.log("Загружены файлы:", event.currentTarget.files)}
>
Загрузить изображение
</FormFileUpload>
);
export default ImageUploadButton;
Пример 2: Загрузка Нескольких Видео-Файлов с Иконкой
В этом примере пользователю предоставляется возможность загрузить несколько видеофайлов. Кнопка также содержит иконку для наглядности.
import { FormFileUpload } from '@wordpress/components';
const VideoUploadButton = () => (
<FormFileUpload
accept="video/*"
multiple={true}
onChange={(event) => console.log("Загружены видео:", event.currentTarget.files)}
icon="video-alt3"
>
Загрузить видео
</FormFileUpload>
);
export default VideoUploadButton;
Пример 3: Кастомизированная Кнопка Загрузки с Функцией Сброса
Данный пример добавляет кастомную кнопку с использованием render, и включает onClick, чтобы сбрасывать значение файла перед новой загрузкой.
import { FormFileUpload } from '@wordpress/components';
const ResettableFileUpload = () => (
<FormFileUpload
accept=".pdf"
onClick={(event) => event.target.value = ''}
onChange={(event) => console.log("Загружен файл:", event.currentTarget.files[0])}
render={({ openFileDialog }) => (
<button onClick={openFileDialog}>
Нажмите для загрузки PDF
</button>
)}
/>
);
export default ResettableFileUpload;
Пример 4: Кнопка Загрузки с Пользовательским Интерфейсом и Увеличенной Высотой
В этом примере компонент использует увеличенную высоту (__next40pxDefaultSize), что добавляет к интерфейсу больше пространства.
import { FormFileUpload } from '@wordpress/components';
const TallFileUploadButton = () => (
<FormFileUpload
accept=".doc,.docx"
onChange={(event) => console.log("Загружен документ:", event.currentTarget.files[0])}
__next40pxDefaultSize={true}
>
Загрузить документ
</FormFileUpload>
);
export default TallFileUploadButton;
Заключение
Компонент FormFileUpload предлагает гибкость и функциональность для создания интерфейсов, позволяющих пользователям загружать файлы с их устройств. Благодаря поддержке различных параметров и возможностей кастомизации, этот компонент упрощает процесс настройки взаимодействия с файлами, делая его удобным и интуитивно понятным.