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 Собрали билд без исходников — тут

    Similar posts

    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 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 ещё не прикрутили? Вопрос по вставке картинок, там ожидается строка, передаётся объект. Демка то вроде уже работает на сайте.

                                                                  Only users with full accounts can post comments. Log in, please.