OSCHINA-MIRROR/mirrors-filepond

Библиотека JavaScript, которая может загружать любые файлы, которые вы ей предоставите, оптимизирует изображения для более быстрой загрузки и предлагает отличный, доступный, плавный пользовательский опыт.

npm

Адаптеры для FilePond доступны для React, Vue, Angular, Svelte и jQuery

Пригласите меня на кофе / Используйте FilePond с Pintura / Обновления разработки на Twitter

Основные возможности- Принимает папки, файлы, blobs, локальные URL, удалённые URL и Data URIs.

Перетаскивание файлов, выбор на файловой системе, копирование и вставка файлов, или добавление файлов с помощью API.
Асинхронная загрузка с AJAX, поддерживает частичную загрузку, может кодировать файлы в base64 данные и отправлять вместе с формой.
Доступность, протестировано с программами AT, такими как VoiceOver и JAWS, навигация с клавиатуры.
Оптимизация изображений, автоматическое изменение размера изображений, вырезание, фильтрация и исправление ориентации EXIF.
Адаптивность, автоматически масштабируется под доступное пространство, функционально на устройствах как мобильных, так и десктопных.Узнайте больше о FilePond

Также нужна редактирование изображений? Pintura — современный JavaScript редактор изображений — это то, что вы ищете. Pintura поддерживает установку соотношений сторон при вырезании, изменение размера, поворот, вырезание и переворот изображений. Во-первых, он идеально интегрируется с FilePond.

Узнайте больше о Pintura

Примеры в действии

Адаптеры- React

Бэкенд

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

Установите с помощью npm:

npm install filepond

Затем импортируйте в проект:

import * as FilePond from 'filepond';

// Создайте компонент для множественного загрузки файлов
const pond = FilePond.create({
    multiple: true,
    name: 'filepond',
});

// Добавьте его в DOM
document.body.appendChild(pond.element);

Или получите из CDN:

<!DOCTYPE html>
<html>
    <head>
        <title>FilePond from CDN</title>
```        <!-- Файловая стилистика Filepond -->
        <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet" />
    </head>
    <body>
        <!-- Мы преобразуем этот input в pond -->
        <input type="file" class="filepond" />
    </body>
</html>
``````html
<!-- Загрузка библиотеки FilePond -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script><!-- Преобразование всех элементов ввода файлов в пруды -->
<script>
    FilePond.parse(document.body);
</script>
</body>
</html>

Начало работы с FilePond

Интернационализация

Папка locale содержит файлы на разных языках, PR приветствуются, вы можете использовать файлы локализации следующим образом:

import pt_BR from 'filepond/locale/pt-br.js';

FilePond.setOptions(pt_BR);

Вклад

В данный момент охват тестов не очень высокий, он составляет около 65%. Для принятия pull requests тесты должны быть лучше, любая помощь в улучшении тестов очень ценится.

Тесты основаны на Jest и могут быть запущены с помощью npm run test

Для сборки библиотеки выполните npm run build

Публикации- Использование FilePond с NodeJS

FilePond совместим с широким спектром десктопных и мобильных браузеров, самый старый явно поддерживаемый браузер — IE11. Для наилучшей совместимости с браузерами добавьте FilePond Polyfill и Babel polyfill в ваш проект. Файловый пруд использует BrowserStack для совместимости тестирования.

Лицензия

Пожалуйста, не удаляйте или не изменяйте предупреждения в исходных файлах

Лицензия MIT

Данное соглашение разрешает бесплатно любому лицу, получившему копию этого программного обеспечения и связанных с ним файлов документации («Программное обеспечение»), работать с Программным обеспечением без каких-либо ограничений, включая, но не ограничиваясь, право использовать, копировать, изменять, объединять, публиковать, распространять, предоставлять лицензию на использование, продавать копии Программного обеспечения и разрешать получателям Программного обеспечения делать то же самое, при соблюдении следующих условий:

Вышеуказанное уведомление об авторском праве и данное разрешение должны быть включены во все копии или значительные части Программного обеспечения.ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ ПРЕДОСТАВЛЯЕТСЯ «КАК ЕСТЬ», БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ, ВЫРАЖЕННЫХ ИЛИ ПОДРАЗУМЕВАЕМЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ, ГАРАНТИЯМИ ТОРГОВЛЕНИЯ, ПРИГОДНОСТИ ДЛЯ ОПРЕДЕЛЕННЫХ ЦЕЛЕЙ И НЕНАРУШЕНИЯ ПРАВ. В НИКАКОМ СЛУЧАЕ АВТОРЫ И ДОЛЖНИКИ АВТОРСКИХ ПРАВ НЕ ДОЛЖНЫ БЫТЬ ОТВЕТСТВЕННЫМИ ЗА КАКИЕ-ЛИБО ПОТЕРИ, УЩЕРБ ИЛИ ДРУГИЕ ВОЗМЕЩЕНИЯ (ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯСЬ, ПОТЕРЯМИ ПОДРАЗУМЕВАННЫХ ПРИБЫЛЕЙ ИЛИ ПОТЕРЯМИ ДАННЫХ), ВОЗНИКШИЕ В СВЯЗИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ ИЛИ ИСПОЛЬЗОВАНИЕМ ИЛИ ДРУГИМИ ДЕЙСТВИЯМИ С ПРОГРАММНЫМ ОБЕСПЕЧЕНИЕМ.