Учебное пособие по быстрой настройке адаптера 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 соответствовал вашим потребностям.

Если у вас есть вопросы, найди меня в Твиттере