Встраиваем в форму drug-n-drop загрузчик файлов

Загрузка файлов, наверное, самая сложная тема при работе с формами в веб-приложениях. Стандартный элемент формы <input> для загрузки файла, его внешний вид, и тем более функционал давно не устраивают разработчиков.

Раньше были очень популярны flash-формы. Они избавляли сайт от недостатков стандартного загрузчика, но, в последнее время, в связи с отказом от продолжения развития flash-технологии и отсутствия поддержки её на android платформе, это решение теряет популярность.

Сейчас появились качественные js-script-ы, которые помогают решить задачу. Об одном из них я и расскажу дальше.

DropZone.js — drag & drop загрузчик файлов  с пред-просмотром картинок

Описание проекта на github.

DropZone позволяет превратить в загрузчик файлов любой элемент документа, в том числе и не являющийся частью контейнера form.

Внешне зона, куда сбрасываются файлы выглядит вот так:

Её можно настроить на ваш вкус, используя CSS и инициализацию объекта. Файловый диалог откроется в том числе и по клику.

Если файлы не загрузились по каким либо причинам, то они отмечается крестом, а в подсказке выводится сообщение с расшифровкой ошибки.

Как работает DropZone?

Скрипт отправляет файлы по ajax на сервер сразу, не дожидаясь отправки всех данных формы. Вы должны сами решить, что с ними делать. DropZone обеспечивает только фронт-энд составляющую.

Вообще, скрипт вырван из контекста формы, используя у формы только параметр action, чтобы взять url для отправки данных по ajax.

Инициализация

Подключаем файлы скрипта и стили

Возможно, вы захотите работать с dropzone как с плагином jQuery. Тогда добавьте ещё один небольшой файл вот из этого проекта — jquery.dropzone.

Скрипт по-умолчанию обрабатывает контейнеры, отмеченные классом .dropzone. Но чаще всего инициализацию проводят программно, чтобы настроить работу так, как требует ситуация.

Пример инициализации контейнера по id:

Можно передать все необходимые опции ещё до инициализации — через глобальный объект Dropzone.options.

Пример такой инициализации:

Событие accept возникает уже после всех проверок, в том числе и на тип файла, если он задан как параметр, к примеру, вот так:

В accept вы можете добавить финальные штрихи к проверке, уже зная данные о файле.

Отправка файлов в dropzone

При минимальных настройках, вы можете понять назначение отправленных файлов только по адресу скрипта-обработчика. Этого мало, чтобы организовать полноценную работу. Потому следующий шаг заключается в том, чтобы сопроводить отправку файлов по ajax дополнительными маркерами, данными.

Так как я много пишу на Drupal, то обычно использую уникальный код формы, который подцепляется drupal form api к каждой форме — form_build_id. У вас это может быть какой то другой маркер, в зависимости от CMS или framework, который вы используете.

Без этого будет сложно понять кто и зачем передавал данные. :)

Организация работы dropzone со стороны сервера

Типично возникает три подзадачи:

  1. Прием данных от dropzone;
  2. Связывание полученных из dropzone файлов с данными формы;
  3. Инициализация списка файлов уже находящихся на сервере для отображения в контейнере .dropzone.

Прием данных от dropzone на сервере

По указанному в настройках URL скрипт направляет файлы. Если вы настроили отправку по одному файлу за раз, то получите примерно вот такой массив $_FILES на входе:

Все проверки на кол-во, размеры и типы на сервере придется продублировать.

Файлы нужно будет где то временно сохранить, до тех пор пока не придут данные формы, с которыми файлы ассоциированы логикой программы.

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

Инициализация списка файлов

Эта задача возникает при работе с формой по ajax и сложных взаимодействиях пользователя с веб-приложением.

По этому поводу есть хорошая статья, от которой я отталкивался в своей работе. Рекомендую ознакомиться — dropzonejs-php-how-to-display-existing-files-on-server.

Написать комментарий

Мало букафф? Читайте есчо !

Цепляем js-код после ajax в Drupal 7, продолжение экспериментов

Май 6, 2017 г.

Я нашел некоторые особенности того примера, что я давал вчера. Потому я решил немного ещё поэкспериментировать, чтобы дать более качественное решение. ...

Читать

Премудрости ng repeat в Angular

Ноябрь 25, 2016 г.

ngRepeat - рабочая лошадка в шаблонах, используемых при работе с AngularJS. Цикл имеет множество опций, работает с фильтрами и сортировкой, может подключать ...

Читать

 

Комментарии к «Встраиваем в форму drug-n-drop загрузчик файлов»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: