elFinder 2.0 beta. Don't panic!

    «Для многих цивилизаций Восточного Завитка Галактики, не столь церемонных, elFinder уже с успехом заменил прочие web файловые менеджеры и стал общепринятым, поскольку, хотя в нем и встречаются редкие баги, но зато у него есть два больших преимущества.
    Во-первых, он дешевле;
    а во-вторых, у него есть большая красная кнопка, на которой большими веселыми
    буквами написан дружеский совет: Don't panic!»


    Сегодня у меня по настоящему счастливый день!
    Несколько месяцев крайне напряженной, но невероятно приятной работы позади.
    И я с удовольствием представляю — файловый менеджер для web elFinder 2.0 beta!

    Хочу выразить огромную благодарность всему сообществу за помощь, патчи и переводы.
    Коллегам по студии — спасибо, что взяли на себя всю текучку, чтобы освободить меня для этого проекта.
    И хочу представить нового разработчика elFinder — 667bdrm. Он же автор модуля для drupal.
    И еще, нам всем очень приятно, что сейчас нет практически ни одного фреймворка, в который бы не был интегрирован elFinder. Кстати, одними из первых это сделали РБК Софт.


    Прежде чем прейти к описанию новшеств объясню, почему 2.0, а не продолжение ветки 1.х.
    Дело в том, что ветка 1.х имеет 2 больших недостатка,
    которые не могут быть исправлены рефакторингом/дописыванием — низкая производительность и отсутствие полноценного API.
    Именно по этому elFinder и был переписан с нуля.
    Как неизбежное следствие — обновился протокол передачи данных.
    Но новый клиент без проблем работает со старыми коннекторами.

    Давайте же посмотрим, что у нас получилось.

    Производительность


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

    Замена кодирования пути к файлу с md5 на base64 + шифрование — ускорила все операции с файлами.
    Конечно, base64 не в коем случае не надежный способ скрыть путь к файлу,
    но кодируется путь относительно корневой директории, что не дает достаточно информации о его реальном положении.
    Шифрование пути будет добавлено в будущем (для параноиков).

    Значительно уменьшен размер json, передаваемый коннектором.
    В старой версии отдельно передается дерево директорий, отдельно — содержимое текущей директории.
    В новой — все данные передаются в одном объекте без дублирования, что экономит около 30%.
    Замена булевых типов на int также дала немалый выигрыш в размере.

    Большое количество файлов представляет собой проблему не только для сервера, но и для клиента.
    Создание DOM с 2000 элементами «вымораживало» firefox на несколько минут (у сафари/хром этот порог начинается с 5000).
    Можно, конечно, решить, что это очень редкий случай, но мой опыт говорит, что есть компании, которым и с хранилищами и на 7000 папок необходимо работать.
    Спасибо коллеге из Чехии за идею — а почему бы не добавлять новые элементы в DOM по требованию, наподобие того, как подгружаются картинки в поиске google?
    Дополнительная выгода — за превьюшками картинок обращаемся только, когда они действительно необходимы.

    API


    elFinder теперь имеет полноценный API не только для клиентской, но и для серверной части.
    Обе построены на event-driven модели.
    Серверное api имеет возможность изменения данных перед отправкой клиенту, что может быть полезно, например, для автоматического переименования файлов, ресайза загружаемых картинок и тд.

    А теперь — самое вкусное


    Multiroots + любые типы хранилищ данных.
    Если одним предложением — elFinder поддерживает любое количество корневых директорий и они могут быть не только папками на файловой системе.
    Каждая корневая директория «монтируется» при помощи своего «драйвера».
    Архитектура коннектора содержит 3 слоя.
    1. Слой приложения. Собственно сам класс elFinder. «Монтирует» корневые директории с помощью объектов-«драйверов».
      Транслирует запросы клиента в методы конкретного драйвера.
    2. Абстрактный драйвер. Преобразует запросы elFinder в обращения к хранилищу.
      Знает какие данные нужно вернуть, но абсолютно не осведомлен о том, как данные хранятся/извлекаются.
    3. Драйвер конкретного хранилища.
      Вообще ни о ком ничего на знает, умеет совершать только простые операции с данными.

    Таким образом, чтобы добавить поддержку нового типа хранилища, достаточно написать довольно простой класс, который реализует базовые операции с «файлами».

    На данный момент есть 2 драйвера
    • для локальной файловой системы
    • для хранения файлов в mysql.
      Хотя этот драйвер вполне работоспособен (за некоторыми исключениями), не думаю, что такой способ хранения данных подходит для продакшн. Написан был, в основном, для проверки концепции.

    Чтобы окончательно снести крышечку, добавлю, что клиент больше не привязан к jQuery.ajax как единственному транспорту данных.
    То есть, теперь можно реализовать общение с коннекторами, расположенными на разных серверах, использовать web sockets и тд.
    И multiroots можно реализовать таким же образом.
    Также можно преобразовывать данные в формат понятный для клиентской части elFinder.
    Именно таким образом сделана поддержка протокола старых коннекторов.
    А прямо сейчас мы работаем над реализацией прокси для webdav/svn для одной шведской компании.

    Поиск.
    elFinder стал настоящим файндером :)
    Поиск осуществляется во всех папках. Ограничить поиск определенными папками пока нет возможности.

    Фильтрация по типам файлов.
    Достаточно указать в настройках список типов файлов и пользователь будет видеть только их.

    Сортировка файлов.
    Вся сортировка происходит на клиенте. Возможны 6 типов сортировки — по имени/типу/размеру и тоже самое с папками вначале. Настраивается в конфиге, но возможно и сделать кнопку для смены сортировки на лету.

    Новые атрибуты файлов.
    • «locked» — пришел на замену атрибуту «rm», запрещающему удаление. По аналогии атрибутом в macos — запрещает удаление и переименование файла.
    • «hidden» — делает файл невидимым. Не запрещает запись/удаление.

    Контроль доступа к файлам.
    В прежней версии был только один способ — описание правил на основе регэкспов от пути к файлу.
    С появлением новых типов хранилищ этого становится недостаточно.
    Например, для файла в БД путем (id) будет число и тут возникает масса проблем.
    Мы по прежнему, считаем, что авторизация/права доступа и пр — не относятся к компетенции самого файлового менеджера. Он должен получить корректные опции и этого достаточно, чтобы реализовать любые возможности по доступу. Поэтому мы добавили возможность передать при инициализации функцию или объект/метод, которые и будут «толковать» права доступа к конкретному файлу.
    Для каждой корневой директории можно использовать свой контроль доступа.

    Контроль перезаписи существующих файлов.
    Возможно настроить так, что при загрузке/перемещении файлов в папку, где файлы с такими именами существуют, новые файлы будут сохранены с добавлением суффикса к их именам.

    Операции с файлами больше не блокируют интерфейс пользователя
    Думая, как сделать интерфейс elFinder возможно более схожим с интерфейсом десктопных файловых менеджеров,
    мы покусились на самое святое для web 2,3,4.0 — мы убили аякс спиннеры и оверлей :)
    Бросьте десяток файлов в згрузку, а пока они грузятся — переименуйте файл и создайте пару новых папок.
    Если общение с сервером по конкретной операции длится дольше установленного промежутка времени (по умолчанию — пол секунды) вы увидите окно уведомления о том, чем он сейчас занят.
    Каюсь, слукавил, спиннеры не убили совсем, а лишь творчески переработав, запихнули в окошки уведомлений.
    И оверлей выжил, но лишь в эпизодической роли, да еще прозрачный весь — кто его заметит?

    Drag&drop everywhere.
    Копировать/перемещать файлы теперь можно в/из дерева директорий. Если перетащить файл на папку в дереве и задержаться ненадолго, она услужливо раскроется, давая вам возможность кинуть файл в ее подпапки.
    Загрузка с drag&drop — просто киньте файл в текущую директорию (если ваш браузер это поддерживает).
    Вид группы переносимых файлов стал более компактным.

    Выделение файлов.
    В режиме отображения текущей директории как иконки — стрелки вверх/вниз работают, так как от них и ожидается (и с зажатым shift тоже).

    Просмотр файлов.
    Наш любимый quicklook, также получил обновления:
    • иконки для перемещения к след/пред файлу.
    • полноэкраный режим
    • просмотр аудио/видео через html5

    Диалог «Свойства».
    Для группы файлов показывает одно окно с суммарной информацией. Так же показывает размер папки/группы файлов

    Реакция на нажатие клавиши «enter» в зависимости от операционной системы.
    Для macos — переименовать файл, для остальных — открыть файл/папку.

    Работа в связке с wysiwyg редакторами и пр.
    Вместо URL файла в callback возвращается объект со всеми свойствами файла, в том числе и с размерами картинки.
    Также может возвращать информацию о нескольких файлах и директориях.

    Контекстное меню в дереве директорий.

    Улучшена поддержка symlinks.
    Ссылки-директории отображаются в дереве.

    Улучшена поддержка mime-типов
    При способе определения типов «internal» используется файл mimes.type из Линукса.

    Настройки генерации превьюшек.
    Можно указать — делать или нет crop и цвет фона.

    Интеграция в другие системы.
    Класс elFinder реализован в виде библиотеки для включения в другие программные продукты.

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

    Уменьшена зависимость от компонентов jquery UI.
    Теперь необходимы только selectable/draggable/droppable. Resizable — опционально.

    Theme roller suport.
    Внешний вид elFinder целиком зависит от текущей темы jquery UI.
    В дистрибутив включен файл theme.css, который в комплекте с темой «smoothness» делает elFinnder максимально похожим на finder macos.

    RTL support
    Для нас с вами не актуально, но пользователи из стран, где пишут справа на лево, надеюсь, оценят.
    Поддержка пока экспериментальная, коллега из Сирии ее тестирует.

    Небольшая ложка дегтя
    Минимальная необходимая версия jquery — 1.6.1. Я понимаю, что не все могут в своих проектах так легко обновить jquery, но мы смотрим в будущее и $.Deferred — наше все:)

    Дальнейшие планы


    • плагин для drupal позволяющий работать с базой данных файлов. Насколько я в курсе — уже скоро.
    • клиентский прокси для работы сразу с несколькими коннекторами на разных серверах.
    • коннектор и, возможно клиентский прокси, для работы с webdav.

    Возможно некоторые из этих новых расширений уже будут коммерческими.
    В любом случае, коммерческие расширения для elFinder появятся.
    Сразу оговорюсь, что весь функционал, который есть сейчас — останется свободным.
    Коммерческими будут функции, которые не всем нужны.
    Сейчас уже есть одно такое расширение для просмотра аудио/видео не поддерживаемого html5 с помощью flash.
    Возможно еще будет расширения для подсветки кода при редактировании файлов.
    Надеюсь, сообщество отнесется с пониманием и поддержит нас.

    Послесловие


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

    «По мотивам» работы над этим проектом я написал пару статей,
    но, возможно, еще есть какие-то аспекты о которых вы хотели бы узнать поподробней — спрашивайте.

    Вот вроде и все. Спасибо за внимание и не забывайте свое полотенце :)

    Проект на github

    Up Небольшая просьба — пожалуйста, не материтесь в демо
    Up 2 Не забывайте, что это только beta — баги там просто обязаны быть и нам очень нужны баг-репорты о них.
    Up 3 Собрали билд без исходников — тут
    Поделиться публикацией
    Комментарии 73
      +11
      Друзья, да я вас просто расцелую за такую радость :)
        0
        Сделайте в демо стоп-слова, ато я мягко сказать удивился когда увидел содержимое общедоступной папки
          +2
          Я, надо признать тоже :(
          Но это не форум и стоп слова не предусмотрены. Попробуем на время запретить русские буквы в именах файлов
            0
            Очень впечатляюще выглядит! Я правильно понимаю что это кусок eldorado-cms www.eldorado-cms.ru/?
              +2
              Она там родилась:) Но уже давно живет свой собственной жизнью и вполне успешно.
              Кажется, кто-то из 37-signals говорил о важности побочных продуктов. elFinder — побочный продукт побочного продукта :)
              +4
              Извиняюсь, но на время запретили русские буквы в именах файлов. Когда некоторые горячие головы остынут — снова разрешим.
                0
                Очень, очень, очень и очень
                  +2
                  В IE 8 не отображаются иконки действий
                    0
                    Проблема с пожатым css — вылечили
                      0
                      За что минусы, не понял!
                        0
                        за IE очевидно =))
                          +2
                          IE радует тем, что это единственный браузер на компе, при запуске которого не открывается 20+ закладок с прошлой сессии и ты не попадаешь в круг вчерашних дел ;-)
                            0
                            Ещё файрфокс
                      0
                      ммм. давно уже пользуюсь в своих проектах связкой Elrte для работы с текстом и Elfinder для файлов. большое спасибо разрабам.

                      Это только у меня на гите есть доступ только к elfinder-1.2? А где двойку выдают, есть желание попробовать уже и на сайт поставить.
                        0
                          0
                          elfinder-1.2
                          elfinder-1.1
                          elfinder-1.0.1

                          elFinder 2.0 beta не вижу…
                            0
                            Просто нажмите Download.tar.gz или Download.zip
                              0
                              что значит не вижу? справа от кнопки download надпись Branch 2.x
                                0
                                Don't panic!

                                Сбивало с толку, что файл звучит так: Studio-42-elFinder-elfinder-1.1-655-g4a6f536.tar.gz.
                          +2
                          Мега-штука. Спасибо.
                          Вдвойне обрадовался, когда понял, что автор — тот самый Дима, с которым мы катали на двух колёсах в ярославскую область :)
                            0
                            Чъёрд! Мега рад от тебя такое услышать!
                            +1
                            В опере не работает контекстно меню по ПКМ :(
                              0
                              В опере оно всегда было с ctrl
                                +1
                                даже с Ctrl.
                                В «Настройки для сайта...», вкладка Скрипты, галочка напротив «Позволить контролировать ПКМ» стоит. В гугл.доках работает ПКМ просто.
                                Информация о версии Opera:
                                Версия: 11.50
                                Сборка: 1074
                                Платформа: Win32
                                Система: Windows 7
                                Модуль XHTML+Voice: Плагин не загружен
                              0
                              Спасибо за проделанную работу.
                              На сколько новая версия совместима с документацией от прошлой? Подходят ли client options?
                                0
                                Почти не совместима. Документацию постараемся поскорее обновить.
                                Новые опции пока можно посмотреть тут github.com/Studio-42/elFinder/blob/2.x/js/elFinder.options.js
                                  +1
                                  уже ознакомился, прикрутил к своему сайту, работает замечательно!
                                  Еще раз спасибо!
                                    +1
                                    Быстрый вы! :)
                                0
                                Feature request:
                                Я залил 2 аудио (mp3) файла. Сейчас есть возможность прослушать любой из них (Preview). Хотелось бы иметь возможность прослушать их все по очереди… Например залил 15 дорожек диска, и слушай весь диск.

                                Надо посмотреть, если несложно, может я сам допилю. Ткните пальцем, в каком месте это надо добавлять…
                                  0
                                  Ну вообще-то это файловый менеджер, а не медиа-галерея. Но почему-то я ожидал такой хотелки :)
                                  Пилить в районе quicklook.js quicklook.plugins.js, только вот думаю будут проблемы с поиском след файла
                                  +1
                                  Вижу в коде, только коннектор к PHP, интересует интеграция с django… нашел проекты на гите — django-elrte сам редактор… и djelfinder сам коннектор(но он в альфе, и не рекомендуется к использованию в реальных проектах)

                                  Может быть есть более менее новая версия коннектора для Django? может кто-то у себя уже интегрировал.

                                  p.s. очень хочется воспользоваться в проекте.
                                    0
                                    Для 2-ой версии протокола коннектор только на пхп. У нас нет возможности писать их на всех языках :(
                                    Думаю сегодня закончу документировать протокол и вы сможете сами написать коннектор
                                    +2
                                    Как-то на дипломную надо было сделать веб-интерфейс до профилей в Windows-домене. Перебрал штук 30 всевозможных клиентов, выбор на elFinder. Очень понравилось — как изнутри, так и интерфейс. Так что приношу благодарность за столь хороший и простой в использовании продукт.
                                      +1
                                      Если открыть картинку с помощью «Preview» то не работают кнопочки вправо-влево
                                        0
                                        Если на клавиатуре нажимать, то работают
                                        0
                                        А как определяются стороны света у галактики? :)
                                          +1
                                          Это к автору текста — Дугласу Адамсу :)
                                          +1
                                          >Are you shure you want to remove files?
                                          Shure → sure.

                                          Вопрос: как программа справляется с загрузкой больших файлов? Скажем, больше 150МБ.
                                            0
                                            Как и любая веб форма для загрузки файлов
                                            0
                                            Не нашел в настройках такой опции: если я загружаю два файла с одинаковыми названиями, чтобы они друг друга не заменяли. Чтобы к новому в название дописывалась дата или какой то другой бред. Есть такая возможность?
                                              0
                                              В коннекторе «copyOverwrite» и «uploadOverwrite»
                                                0
                                                Первого в коннекторе нет, второй есть. Спасибо.
                                                  0
                                                  смотрите в elFinderVolumeDriver.class.php — там все опции
                                              0
                                              Было бы неплохо добавить сортировку при виде таблицей =) И кнопочка удалить имеет очень странную иконку.
                                                0
                                                Я писал, что можно сделать такую кнопку, у нас пока руки не дошли, возьметесь? :)
                                                  0
                                                  Не надо кнопку, по заголовку надо тыкать колонки. Я попробую, но обещать не буду =) Я лентяй.
                                                    0
                                                    По заголовку это конечно хорошо, но тогда в большом списке чтобы поменять сортировку надо будет прокручивать до верха, может это и не страшно конечно…
                                                      0
                                                      Да, при клике желательно прокручивать к самому верху. Программно это абсолютно безболезненное решение, а в виде юзабилити к этому все привыкли уже.
                                                        0
                                                        Я имел ввиду несколько другое. Вид списком — это таблица и если пользователь прокрутил вниз — он должен будет прокручивать наверх, чтобы поменять сортировку
                                                          0
                                                          =) да, я и не заметил что заголовки не остаются при прокрутке, это плохо, было бы замечательно если бы они оставались на месте
                                                            0
                                                            Ну если вы предложите кроссбраузерное css-решение
                                                              0
                                                              Единственное что я могу предложить — вынести thead за див, но, увы, тогда придется подгонять ширину колонок исходя из данных, хотя можно поэксперементировать с позишином абсолют, но я плохо верстаю увы, толкаю идеи лучше :(
                                                                0
                                                                И я о том же, синхронизация ширины колонок. даже с js пока не нахожу адекватного решения :(
                                                0
                                                FTP-коннектор будет?
                                                  0
                                                  Если кто-нибудь напишет. Вот только схема все равно потребует промежуточного сервера с http. js не умеет по фтп общаться (или я ошибаюсь?)
                                                    0
                                                    я думаю автор комментария имел ввиду драйвер, чтобы фтп использовать как хранилище
                                                      0
                                                      Ну, это понятно, будет еще какой-то промежуточный скрипт на чем-то, который будет ломиться по ФТП на другой сервер. P.S. терминами ошибся, драйвер, по-вашему.
                                                        0
                                                        Да, такое возможно, и даже можно объединить несколько разных фтп
                                                    +4
                                                    Вот она, настоящая воскресная радость!) Спасибо за Ваш труд, это действительно долгожданное событие!
                                                      0
                                                      Отдельно на страницу как в примере он ставится, а интеграции с Elrte ещё нет? Как подключить, старый способ что то не работает, менеджер не открываются при нажатии в диалоге добавить изображение посмотреть в папке.
                                                        +1
                                                        editorCallback заменен на getFileCallback и получает не урл к файлу, а всю инфу о файле
                                                          0
                                                          Я не о том, я про elrte.org/redmine/projects/elfinder/wiki/Integration_RU#elRTE

                                                          я делаю согласно этому описанию, и при нажатии на добавление картинки в редакторе окно Изображение открывается, но, по клику на иконку рядом с урлом ничего не происходит… Менеджер не открывается.
                                                            0
                                                            Есть такое — подключение elFinder теперь чуть по другому происходит — посмотрите в elfinder.src.html там есть пример открытия в диалоге.
                                                            Простите, но мы не успеваем с документацией :(
                                                              0
                                                              Здесь без документации не разобраться. Менеджер в итоге появляется но, если кнопка его вызова находится в 1-2 прокрутках экрана, он появится где то сверху, можно только случайно заметить. Если при этом ещё нажать на просмотр изображения, то оно открывается уже над кнопкой вызова.

                                                              В примере файлы, который вы дали, так и не нашел, а как обратно сам адрес файла получить? Я сделал сейчас так:

                                                              $('.dialog_images').click(function() {
                                                              var id = $(this).attr(«rel»);
                                                              $('').dialogelfinder({
                                                              url: path+'admin/elfinder/php/connector.php',
                                                              lang: 'ru',
                                                              width: 1100,
                                                              modal: true,
                                                              title: 'Файловый менеджер',
                                                              getFileCallback: function(files, fm) {
                                                              document.getElementById(«imm_»+id).innerHTML = "";
                                                              },
                                                              commandsOptions: {
                                                              getfile: {
                                                              oncomplete: 'close',
                                                              folders: true
                                                              }
                                                              }
                                                              })
                                                              })
                                                                0
                                                                getFileCallback: function(files, fm)
                                                                files — это объект с инф о файле или массив таких объектов если разрешен выбор нескольких
                                                                  0
                                                                  да, уже разобрался с этим моментом. А в редакторе в поле URL каким образом в таком случае возвращается адрес?
                                                        +4
                                                        Поймали того мелкого пакостника — его ip 109.173.47.190
                                                          +1
                                                          Да у Вас Дуглас Адамс головного мозга.
                                                          Я говорю об этом не так, как будто это что-то плохое.
                                                            0
                                                            клевая штука
                                                            обязательно применю в своем проекте
                                                            делаю фотогаллерею: думаю их скрестить
                                                              +1
                                                              когда-то в качестве тестового задания тоже делал файловый менеджер,
                                                              но в этом сильно попахивает Маком
                                                              а я ♡ image
                                                                0
                                                                мой файловый менеджер больше походил на mc консоль
                                                                  0
                                                                  А мы и не скрываем — на старом сайте elrte.org/elfinder/ об этом прямым текстом написано
                                                                  0
                                                                  Интеграцию с elrte ещё не прикрутили? Вопрос по вставке картинок, там ожидается строка, передаётся объект. Демка то вроде уже работает на сайте.

                                                                  Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                  Самое читаемое