Учебное пособие по быстрой настройке адаптера FilePond React.
FilePond - это относительно новая библиотека загрузки файлов JavaScript, в этом руководстве мы настроим новое приложение React, интегрируемся с компонентом FilePond React Adapter и настроим соединение с серверной частью, которая будет получать наши загруженные файлы. .
Мы будем использовать модуль узла Create React App, чтобы быстро собрать наше базовое приложение React. Если вы знакомы с этим процессом, вы, вероятно, можете пропустить раздел Интеграция с FilePond.
Создание базового приложения React
Предполагая, что вы уже установили Node версии 6 или выше, выполните следующую команду со своего терминала (если нет, то сейчас самое время ее установить). Будет создана папка my-app, в которой будет находиться наше приложение для реагирования.
npx create-react-app my-app
Хорошо, у нас есть отправная точка, давайте перейдем в каталог «my-app».
cd my-app
Теперь запустите сервер разработки, он автоматически откроет окно браузера.
npm start
Вы можете остановить приложение из командной строки, нажав одновременно клавишиCTRL
и C
.
Интеграция с FilePond
Теперь, когда наше приложение React запущено, мы можем добавить адаптер FilePond React.
Остановим приложение и установим адаптер.
npm install filepond react-filepond --save
Установив файлы адаптера, давайте снова запустим приложение, чтобы мы могли приступить к внесению изменений.
Мы добавим компонент FilePond на целевую страницу приложения, на самом деле вы, вероятно, переместите его в другое место, но для целей данной статьи этого будет достаточно.
Сначала нам нужно импортировать компонент FilePond
и его файл CSS.
Откройте файл «App.js» и добавьте следующие строки в начало файла.
import { FilePond } from 'react-filepond'; import 'filepond/dist/filepond.min.css';
Следующим шагом будет добавление компонента в HTML. Давайте отредактируем HTML в функции render()
и добавим тег <FilePond/>
.
<div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1 className="App-title">Welcome to React</h1> </header> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> <FilePond/> </div>
Область размещения FilePond должна теперь отображаться под вводным текстом. Это будет выглядеть примерно так:
Теперь мы можем приступить к настройке FilePond в соответствии с нашими пожеланиями.
По умолчанию FilePond принимает только один файл, потому что он расширяет элемент ввода файла по умолчанию и копирует его стандартное поведение.
Чтобы включить режим нескольких файлов, давайте добавим allowMultiple
prop.
<FilePond allowMultiple={true}/>
Перетащите папку или выберите несколько файлов, чтобы увидеть их в действии.
Как и при классическом вводе файлов, файлы загружаются в FilePond, но больше ничего не делают, они просто остаются там. Скорее всего, мы захотим отправить их на наш сервер. Мы сделаем это, снабдив FilePond опорой server
.
Если у вас есть конечная точка сервера, которая может обрабатывать отправляемые на нее файловые объекты, вы, вероятно, можете использовать это, если нет, мы можем настроить FilePond PHP Boilerplate (загрузите репозиторий и запустите vagrant up
).
<FilePond allowMultiple={true} server="http://192.168.33.10"/>
После настройки местоположения сервера FilePond автоматически отправит файлы POST на указанный URL.
Вызовы сервера FilePond по умолчанию описаны в документации по конфигурации сервера. Свойство server
можно точно настроить до самого низкого уровня (см. Документацию), это позволяет интегрировать FilePond практически с любым удаленным или локальным решением для хранения файлов.
Чтобы немного оживить, давайте включим предварительный просмотр изображений.
Начнем с установки плагина предварительного просмотра изображений.
npm install filepond-plugin-image-preview --save
Теперь нам нужно импортировать и зарегистрировать плагин в ядре FilePond. Нам нужно будет изменить импорт FilePond, чтобы также импортировать метод registerPlugin
.
import { FilePond, registerPlugin } from 'react-filepond';
Мы готовы импортировать и зарегистрировать плагин предварительного просмотра изображений.
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'; import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
registerPlugin(FilePondPluginImagePreview);
Выполнено! Давайте перезапустим приложение и поместим изображение.
Вот и все, основы загрузки файлов с помощью FilePond.
Вы можете дополнительно улучшить компонент с помощью таких функций, как автоматическая коррекция ориентации EXIF, обрезка изображения, изменение размера, преобразование изображения на стороне клиента и различные другие плагины.
Существует целый список свойств и событий, которые вы можете настроить, чтобы FilePond соответствовал вашим потребностям.
Если у вас есть вопросы, найди меня в Твиттере