pqina/filepond

Что это?

Ключевые возможности

• 01Принимает файлы, папки, удалённые URL и Data URI через drag-and-drop, выбор файлов, вставку из буфера обмена или API.
• 02Поддерживает загрузку по частям и через AJAX, а также необязательное кодирование в base64 при отправке формы.
• 03Перед загрузкой изменяет размер и обрезает изображения, применяет к ним фильтры и корректирует ориентацию по EXIF.
• 04Поддерживает управление с клавиатуры и протестирован со скринридерами, включая VoiceOver и JAWS.
• 05Расширяется с помощью плагинов для предпросмотра, проверки файлов и работы с метаданными.

Сценарии использования

• Добавление в веб-приложение загрузки аватаров или фотографий с изменением размера на стороне клиента.
• Создание формы для загрузки нескольких файлов в проектах на React, Vue, Angular или Svelte.
• Загрузка больших файлов из браузера на серверную часть по частям.
• Добавление доступного виджета загрузки для пользователей скринридеров.

Быстрый старт

1. 1

   Установите FilePond через npm

   npm install filepond
2. 2

   Импортируйте FilePond и создайте компонент для загрузки нескольких файлов

   import * as FilePond from 'filepond';
3. 3

   Добавьте компонент в DOM

Что важно знать

• !Код Quick Start — это набросок; для приёма загружаемых файлов вам также понадобится бэкенд-эндпоинт.
• !Согласно README, покрытие тестами составляет около 65%.
• !Для тестирования доступна альфа-версия v5, поэтому основной API может измениться.

В подборках

Темы

Частые вопросы

Что такое filepond?

JavaScript-библиотека для загрузки файлов: drag-and-drop, оптимизация изображений, загрузка частями и адаптеры для React, Vue, Angular и Svelte. FilePond — JavaScript-библиотека для загрузки файлов в браузере. Пользователи могут перетаскивать файлы, выбирать их в файловой системе, вставлять из буфера обмена или добавлять через API. Компонент также принимает в качестве входных данных папки, Blob-объекты, удалённые URL и Data URI.

filepond можно использовать бесплатно? Какая у него лицензия?

filepond распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.

filepond всё ещё поддерживается?

Активно поддерживается. Последний коммит в filepond — 28 окт. 2026 г..

Для чего можно использовать filepond?

Добавление в веб-приложение загрузки аватаров или фотографий с изменением размера на стороне клиента. Создание формы для загрузки нескольких файлов в проектах на React, Vue, Angular или Svelte. Загрузка больших файлов из браузера на серверную часть по частям. Добавление доступного виджета загрузки для пользователей скринридеров.

Как установить filepond?

Установите FilePond через npm: npm install filepond Импортируйте FilePond и создайте компонент для загрузки нескольких файлов: import * as FilePond from 'filepond'; Добавьте компонент в DOM

Где скачать filepond?

Исходный код и инструкции по установке — на GitHub: https://github.com/pqina/filepond