18 февраля 2012 г.

Файловый обозреватель на сервере, с ASP.Net MVC

Думаю, многим знакома ситуация, когда пользователь загружает на сервер какие-то свои файлы. Но что же происходит с этими файлами дальше? Обычно, они используются строго по-назначению: под аватар, как фото для галереи, как приложение к письму и прочее. Но иногда нужно дать пользователю некое хранилище, с полной свободой действий в нем.

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

Как это будет выглядеть?
На нашем сервере будет конкретная папка, к которой у юзеров будет полный доступ посредством файлменеджера.

Касаемо самого файл-менеджера.
Будем использовать чудесный плагин от Simogeo. Этот Jquery-плагин довольно прост в использовании, прилично выглядит, и имеет широкий набор функционала.

Первое, что нам нужно сделать - скачать архив плагина, распаковать, и скопировать все это дело в наш проект. Теперь необходимо немного почистить составляющие.

В папке Connectors оставим лишь подпапку ashx:


Далее, в папке Scripts/Languages/ оставим необходимые нам файлы локализации:

Полностью удаляем папку userfiles. Это демонстрационная папка, и она нам совсем не нужна.

Теперь необходимо сконфигурировать плагин. Для этого переименуем файл filemanager.config.js.default в filemanager.config.js и откроем его на редактирование. Этот файл - конфигуратор плагина, в котором задаются все начальные настройки.
Для нашего случая будет что-то такое:
   1:  /*---------------------------------------------------------
   2:    Configuration
   3:  ---------------------------------------------------------*/
   4:   
   5:  // Set culture to display localized messages
   6:  var culture = 'ru';
   7:   
   8:  // Set default view mode : 'grid' or 'list'
   9:  var defaultViewMode = 'grid';
  10:   
  11:  // Autoload text in GUI
  12:  // If set to false, set values manually into the HTML file
  13:  var autoload = true;
  14:   
  15:  // Display full path - default : false
  16:  var showFullPath = false;
  17:   
  18:  // Browse only - default : false
  19:  var browseOnly = false;
  20:   
  21:  // Set this to the server side language you wish to use.
  22:  var lang = 'ashx'; // options: php, jsp, lasso, asp, cfm, ashx, asp // we are looking for contributors for lasso, python connectors (partially developed)
  23:   
  24:  // Set this to the directory you wish to manage.
  25:  var fileRoot = '/Storage/';
  26:   
  27:  //Path to the manage directory on the HTTP server
  28:  var relPath = window.location.protocol + '//' + document.domain;
  29:   
  30:  // Show image previews in grid views?
  31:  var showThumbs = true;
  32:   
  33:  // Allowed image extensions when type is 'image'
  34:  var imagesExt = ['jpg', 'jpeg', 'gif', 'png'];

Коротко о внесенных изменениях.

В 6-й строке мы указали необходимую нам локализацию.
В 22-й указали какой коннектор использовать (мы оставили только коннектор ashx).

24-я строка - путь к папке серверного хранилища. В данном случае мы жестко указали необходимый путь. В реальности же, ничто не мешает сделать из яваскрипта AJAX-запрос на сервер, где определить текущего пользователя (например из сессии), и вернуть в скрипт путь к его личному хранилищу.

С настройками все. Теперь поговорим о коннекторах.
По сути, коннектором у нас выступает HttpHandler filemanager.ashx. Он нужен для выполнения всех файловых операций на сервере. Тоесть, мы делаем чего-то там в файлменеджере, яваскрипт говорит коннектору, что необходимо сделать, и уже сам коннектор берет на себя всю работу.

То, что для этого плагина есть реализация коннектора в виде хендлера, и то, что доступны исходники этого самого хендлера, дает нам массу возможностей. Выходит, мы можем внедрять в  filemanager.ashx  какой-то свой код, и полностью контролировать все операции. Например, мы можем запретить работать с какой-то конкретной папкой, запретить операции для конкретного пользователя и прочие разности.

На данный момент, единственное что нам нужно подправить в  filemanager.ashx, так это строку с конфигурацией пути к папке иконок:
   1:  //===================================================================
   2:      //==================== EDIT CONFIGURE HERE ==========================
   3:      //===================================================================
   4:   
   5:      public string IconDirectory = "/Scripts/simogeoFilemanager/images/fileicons/"; // Icon directory for filemanager. [string]
   6:      public string[] imgExtensions = new string[] { ".jpg", ".png", ".jpeg", ".gif", ".bmp" }; // Only allow this image extensions. [string]
   7:   
   8:      //===================================================================
   9:      //========================== END EDIT ===============================
  10:      //===================================================================       

С интеграцией плагина мы закончили. Теперь осталось лишь вызвать его с какой-нибудь страницы. Вызываться файл-менеджер должен в отдельном окне. Реализуем это в представлении Index.aspx:
   1:  <p>
   2:          <input type="button" value="Open File Manager" onclick="OpenFileMngr();" />
   3:      </p>
   4:      <script type="text/javascript">
   5:          function OpenFileMngr() {
   6:              var mngrWnd = window.open("/Scripts/simogeoFilemanager/index.html", "File Manager", 'location=no,toolbar=no,menubar=no,directories=no,status=no,resizable=yes,scrollbars=yes,height=600,width=750, false');
   7:          };
   8:      </script>

Здесь мы просто по клику вызываем страницу инициализации плагина в новом окне.

Итак, мы это сделали. По клику на кнопку у нас открывается окно - файловый обозреватель:

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

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

На этом все.
_____
Исходники