Browse Source

HUE-4270 [fb] Enable S3 on the file pickers

Enrico Berti 9 years ago
parent
commit
95ff8b3014

+ 4 - 4
desktop/core/src/desktop/static/desktop/ext/css/fileuploader.css

@@ -27,9 +27,9 @@
     border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
     border-color: #e6e6e6 #e6e6e6 #bfbfbf;
     border-bottom-color: #b3b3b3;
-    -webkit-border-radius: 4px;
-    -moz-border-radius: 4px;
-    border-radius: 4px;
+    -webkit-border-radius: 2px;
+    -moz-border-radius: 2px;
+    border-radius: 2px;
     filter: progid:dximagetransform.microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#e6e6e6', GradientType = 0);
     filter: progid:dximagetransform.microsoft.gradient(enabled = false);
     *zoom: 1;
@@ -54,7 +54,7 @@
 }
 
 .qq-upload-button-focus {
-    outline: 1px dotted #666666;
+    outline: none;
 }
 
 .qq-upload-drop-area {

+ 373 - 309
desktop/core/src/desktop/static/desktop/js/jquery.filechooser.js

@@ -19,337 +19,401 @@
 ;
 (function ($, window, document, undefined) {
 
-    var pluginName = "jHueFileChooser",
-        // global variables (jHueFileChooserGlobals, useful for i18n) can be set on
-        // desktop/templates/common_header.mako
-        defaults = {
-            initialPath:"",
-            forceRefresh:false,
-            errorRedirectPath:"",
-            createFolder:true,
-            uploadFile:true,
-            selectFolder:false,
-            suppressErrors:false,
-            showExtraHome:false,
-            extraHomeProperties:{},
-            filterExtensions:"",
-            labels: {
-                BACK: "Back",
-                SELECT_FOLDER: "Select this folder",
-                CREATE_FOLDER: "Create folder",
-                FOLDER_NAME: "Folder name",
-                CANCEL: "Cancel",
-                FILE_NOT_FOUND: "The file has not been found",
-                UPLOAD_FILE: "Upload a file",
-                FAILED: "Failed",
-                HOME: "Home"
-            },
-            user: "",
-            onFileChoose:function () {
-            },
-            onFolderChoose:function () {
-            },
-            onFolderChange:function () {
-            },
-            onError:function () {
-            }
-        },
-        STORAGE_PREFIX = "hueFileBrowserLastPathForUser_";
+  var pluginName = "jHueFileChooser",
+  // global variables (jHueFileChooserGlobals, useful for i18n) can be set on
+  // desktop/templates/common_header.mako
+    defaults = {
+      initialPath: "",
+      forceRefresh: false,
+      errorRedirectPath: "",
+      createFolder: true,
+      uploadFile: true,
+      selectFolder: false,
+      suppressErrors: false,
+      showExtraHome: false,
+      extraHomeProperties: {},
+      filterExtensions: "",
+      labels: {
+        BACK: "Back",
+        SELECT_FOLDER: "Select this folder",
+        CREATE_FOLDER: "Create folder",
+        FOLDER_NAME: "Folder name",
+        CANCEL: "Cancel",
+        FILE_NOT_FOUND: "The file has not been found",
+        UPLOAD_FILE: "Upload a file",
+        FAILED: "Failed",
+        HOME: "Home"
+      },
+      filesystems: ['hdfs'],
+      fsSelected: 'hdfs',
+      user: "",
+      onFileChoose: function () {
+      },
+      onFolderChoose: function () {
+      },
+      onFolderChange: function () {
+      },
+      onError: function () {
+      }
+    },
+    STORAGE_PREFIX = "hueFileBrowserLastPathForUser_";
 
-    function Plugin(element, options) {
-        this.element = element;
-        if (typeof jHueFileChooserGlobals != 'undefined') {
-            var extendedDefaults = $.extend({}, defaults, jHueFileChooserGlobals);
-            extendedDefaults.labels = $.extend({}, defaults.labels, jHueFileChooserGlobals.labels);
-            this.options = $.extend({}, extendedDefaults, options);
-            if (options != null){
-                this.options.labels = $.extend({}, extendedDefaults.labels, options.labels);
-            }
-        }
-        else {
-            this.options = $.extend({}, defaults, options);
-            if (options != null){
-                this.options.labels = $.extend({}, defaults.labels, options.labels);
-            }
-        }
-        this._defaults = defaults;
-        this._name = pluginName;
-        this.previousPath = "";
-        this.init();
+  function Plugin(element, options) {
+    this.element = element;
+    if (typeof jHueFileChooserGlobals != 'undefined') {
+      var extendedDefaults = $.extend({}, defaults, jHueFileChooserGlobals);
+      extendedDefaults.labels = $.extend({}, defaults.labels, jHueFileChooserGlobals.labels);
+      this.options = $.extend({}, extendedDefaults, options);
+      if (options != null) {
+        this.options.labels = $.extend({}, extendedDefaults.labels, options.labels);
+      }
+    }
+    else {
+      this.options = $.extend({}, defaults, options);
+      if (options != null) {
+        this.options.labels = $.extend({}, defaults.labels, options.labels);
+      }
     }
+    this._defaults = defaults;
+    this._name = pluginName;
+    this.previousPath = "";
+    this.init();
+  }
 
-    Plugin.prototype.setOptions = function (options) {
-        this.options = $.extend({}, defaults, options);
-        if (this.options.forceRefresh){
-          if ($.trim(this.options.initialPath) != "") {
-            this.navigateTo(this.options.initialPath);
-          }
-          else if ($.totalStorage(STORAGE_PREFIX + this.options.user) != null) {
-            this.navigateTo($.totalStorage(STORAGE_PREFIX + this.options.user));
+  Plugin.prototype.setOptions = function (options) {
+    var self = this;
+    self.options = $.extend({}, defaults, options);
+
+    var initialPath = $.trim(self.options.initialPath);
+    if (initialPath && initialPath.toLowerCase().indexOf('s3') > -1 && self.options.filesystems.indexOf('s3') > -1) {
+      self.options.fsSelected = 's3';
+    }
+
+    $(self.element).find('.filechooser-services li').removeClass('active');
+    $(self.element).find('.filechooser-services li[data-fs="' + self.options.fsSelected + '"]').addClass('active');
+
+    if (self.options.forceRefresh) {
+      if (initialPath != "") {
+        self.navigateTo(self.options.initialPath);
+      }
+      else if ($.totalStorage(STORAGE_PREFIX + self.options.user + self.options.fsSelected) != null) {
+        self.navigateTo($.totalStorage(STORAGE_PREFIX + self.options.user + self.options.fsSelected));
+      }
+      else {
+        self.navigateTo("/?default_to_home");
+      }
+    }
+    else {
+      if (initialPath != "") {
+        self.navigateTo(self.options.initialPath);
+      }
+    }
+  };
+
+  Plugin.prototype.setFileSystems = function (filesystems) {
+    var self = this;
+    self.options.filesystems = [];
+    Object.keys(filesystems).forEach(function (k) {
+      if (filesystems[k]) {
+        self.options.filesystems.push(k);
+      }
+    });
+    self.options.filesystems.sort();
+    if (self.options.filesystems.length > 1) {
+      var $ul = $('<ul>').addClass('nav nav-list').css('border', 'none');
+      self.options.filesystems.forEach(function (fs) {
+        var $li = $('<li>').attr('data-fs', fs).addClass(self.options.fsSelected === fs ? 'active' : '').html('<a class="pointer" style="padding-left: 6px">' + fs.toUpperCase() + '</a>');
+        $li.on('click', function () {
+          $(this).siblings().removeClass('active');
+          $(this).addClass('active');
+          self.options.fsSelected = fs;
+          var storedPath = $.totalStorage(STORAGE_PREFIX + self.options.user + self.options.fsSelected);
+          if (storedPath !== null) {
+            if (fs === 's3' && storedPath.toLowerCase().indexOf('s3') === -1) {
+              self.navigateTo('S3://');
+            }
+            else if (fs !== 's3' && storedPath.toLowerCase().indexOf('s3') > -1) {
+              self.navigateTo('');
+            }
+            else {
+              self.navigateTo(storedPath)
+            }
           }
           else {
-            this.navigateTo("/?default_to_home");
-          }
-        }
-        else {
-          if ($.trim(this.options.initialPath) != "") {
-            this.navigateTo(this.options.initialPath);
+            self.navigateTo(fs === 's3' ? 'S3://' : '');
           }
+        });
+        $li.appendTo($ul);
+      });
+      $(self.element).find('.filechooser-services').empty().width(80);
+      $(self.element).find('.filechooser-tree').width(450).css('paddingLeft', '6px').css('borderLeft', '1px solid #EEE').css('marginLeft', '80px');
+      $ul.appendTo($(self.element).find('.filechooser-services'));
+    }
+  };
+
+  Plugin.prototype.navigateTo = function (path) {
+    var _parent = this;
+    $(_parent.element).find('.filechooser-tree').html("<i style=\"font-size: 24px; color: #DDD\" class=\"fa fa-spinner fa-spin\"></i>");
+    $.getJSON("/filebrowser/chooser=" + path, function (data) {
+      $(_parent.element).find('.filechooser-tree').empty();
+
+      path = data.current_dir_path; // use real path.
+      var _flist = $("<ul>").addClass("unstyled").css("margin-left", "2px");
+      if (data.title != null && data.title == "Error") {
+        var _errorMsg = $("<div>").addClass("alert").addClass("alert-error").text(data.message);
+        _errorMsg.appendTo($(_parent.element).find('.filechooser-tree'));
+        var _previousLink = $("<a>").addClass("btn").addClass("bnt-small").text(_parent.options.labels.BACK).click(function () {
+          _parent.options.onFolderChange(_parent.previousPath);
+          _parent.navigateTo(_parent.previousPath);
+        });
+        _previousLink.appendTo($(_parent.element).find('.filechooser-tree'));
+      }
+      else {
+        if (data.type == "file") {
+          _parent.navigateTo(data.view.dirname);
+          return;
         }
-    };
+        $.totalStorage(STORAGE_PREFIX + _parent.options.user + _parent.options.fsSelected, path);
+        _parent.previousPath = path;
+        var _breadcrumbs = $("<ul>").addClass("hueBreadcrumb").css("padding", "0").css("marginLeft", "0");
+
+        var _home = $("<li>");
+        var _homelink = $("<a>").addClass("nounderline").html('<i class="fa fa-home"></i> ' + _parent.options.labels.HOME).css("cursor", "pointer").click(function () {
+          _parent.navigateTo("/?default_to_home");
+        });
+        _homelink.appendTo(_home);
 
-    Plugin.prototype.navigateTo = function (path) {
-        var _parent = this;
-        if (navigator.userAgent.match(/msie/i)) {
-          $(_parent.element).html("<img src='/static/desktop/art/spinner.gif' />");
+        $("<span>").addClass("divider").css("margin-right", "20px").appendTo(_home);
+        if (_parent.options.fsSelected !== 's3') {
+          _home.appendTo(_breadcrumbs);
         }
-        else {
-          $(_parent.element).html("<i style=\"font-size: 24px; color: #DDD\" class=\"fa fa-spinner fa-spin\"></i>");
+
+        if (_parent.options.showExtraHome) {
+          var _extraHome = $("<li>");
+          var _extraHomelink = $("<a>").addClass("nounderline").html('<i class="fa ' + _parent.options.extraHomeProperties.icon + '"></i> ' + _parent.options.extraHomeProperties.label).css("cursor", "pointer").click(function () {
+            _parent.navigateTo(_parent.options.extraHomeProperties.path);
+          });
+          _extraHomelink.appendTo(_extraHome);
+          $("<span>").addClass("divider").css("margin-right", "20px").appendTo(_extraHome);
+          _extraHome.appendTo(_breadcrumbs);
         }
-        $.getJSON("/filebrowser/chooser=" + path, function (data) {
-            $(_parent.element).empty();
-            path = data.current_dir_path; // use real path.
-            var _flist = $("<ul>").addClass("unstyled").css("margin-left", "2px");
-            if (data.title != null && data.title == "Error") {
-                var _errorMsg = $("<div>").addClass("alert").addClass("alert-error").text(data.message);
-                _errorMsg.appendTo($(_parent.element));
-                var _previousLink = $("<a>").addClass("btn").addClass("bnt-small").text(_parent.options.labels.BACK).click(function () {
-                    _parent.options.onFolderChange(_parent.previousPath);
-                    _parent.navigateTo(_parent.previousPath);
-                });
-                _previousLink.appendTo($(_parent.element));
+
+        if (typeof data.breadcrumbs != "undefined" && data.breadcrumbs != null) {
+          var _bLength = data.breadcrumbs.length;
+          $(data.breadcrumbs).each(function (cnt, crumb) {
+            var _crumb = $("<li>");
+            var _crumbLink = $("<a>");
+            var _crumbLabel = (crumb.label != null && crumb.label != "") ? crumb.label : "/";
+            _crumbLink.attr("href", "javascript:void(0)").text(_crumbLabel).appendTo(_crumb);
+            if (cnt < _bLength - 1) {
+              if (cnt > 0) {
+                $("<span>").addClass("divider").text("/").appendTo(_crumb);
+              }
+              else {
+                $("<span>").html("&nbsp;").appendTo(_crumb);
+              }
             }
-            else {
-                if (data.type == "file") {
-                    _parent.navigateTo(data.view.dirname);
-                    return;
-                }
-                $.totalStorage(STORAGE_PREFIX + _parent.options.user, path);
-                _parent.previousPath = path;
-                var _breadcrumbs = $("<ul>").addClass("hueBreadcrumb").css("padding", "0").css("marginLeft", "0");
-                
-                var _home = $("<li>");
-                var _homelink = $("<a>").addClass("nounderline").html('<i class="fa fa-home"></i> ' + _parent.options.labels.HOME).css("cursor", "pointer").click(function () {
-                    _parent.navigateTo("/?default_to_home");
-                });
-                _homelink.appendTo(_home);
-                $("<span>").addClass("divider").css("margin-right", "20px").appendTo(_home);
-                _home.appendTo(_breadcrumbs);
+            _crumb.click(function () {
+              var _url = (crumb.url != null && crumb.url != "") ? crumb.url : "/";
+              _parent.options.onFolderChange(_url);
+              _parent.navigateTo(_url);
+            });
+            _crumb.appendTo(_breadcrumbs);
+          });
+        }
+        _breadcrumbs.appendTo($(_parent.element).find('.filechooser-tree'));
 
-                if (_parent.options.showExtraHome) {
-                  var _extraHome = $("<li>");
-                  var _extraHomelink = $("<a>").addClass("nounderline").html('<i class="fa ' + _parent.options.extraHomeProperties.icon + '"></i> ' + _parent.options.extraHomeProperties.label).css("cursor", "pointer").click(function () {
-                    _parent.navigateTo(_parent.options.extraHomeProperties.path);
-                  });
-                  _extraHomelink.appendTo(_extraHome);
-                  $("<span>").addClass("divider").css("margin-right", "20px").appendTo(_extraHome);
-                  _extraHome.appendTo(_breadcrumbs);
-                }
-                
-                if (typeof data.breadcrumbs != "undefined" && data.breadcrumbs != null){
-                  var _bLength = data.breadcrumbs.length;
-                  $(data.breadcrumbs).each(function (cnt, crumb) {
-                      var _crumb = $("<li>");
-                      var _crumbLink = $("<a>");
-                      var _crumbLabel = (crumb.label != null && crumb.label != "") ? crumb.label : "/";
-                      _crumbLink.attr("href", "javascript:void(0)").text(_crumbLabel).appendTo(_crumb);
-                      if (cnt < _bLength - 1) {
-                          if (cnt > 0) {
-                              $("<span>").addClass("divider").text("/").appendTo(_crumb);
-                          }
-                          else {
-                              $("<span>").html("&nbsp;").appendTo(_crumb);
-                          }
-                      }
-                      _crumb.click(function () {
-                          var _url = (crumb.url != null && crumb.url != "") ? crumb.url : "/";
-                          _parent.options.onFolderChange(_url);
-                          _parent.navigateTo(_url);
-                      });
-                      _crumb.appendTo(_breadcrumbs);
-                  });
-                }
-                _breadcrumbs.appendTo($(_parent.element));
+        $(data.files).each(function (cnt, file) {
+          var _addFile = true;
+          if (_parent.options.filterExtensions != "" && file.type == "file") {
+            var _allowedExtensions = _parent.options.filterExtensions.split(",");
+            var _fileExtension = file.name.split(".").pop().toLowerCase();
+            _addFile = _allowedExtensions.indexOf(_fileExtension) > -1;
+          }
+          if (_addFile) {
+            var _f = $("<li>");
+            var _flink = $("<a>");
 
-                $(data.files).each(function (cnt, file) {
-                    var _addFile = true;
-                    if (_parent.options.filterExtensions != "" && file.type == "file"){
-                        var _allowedExtensions = _parent.options.filterExtensions.split(",");
-                        var _fileExtension = file.name.split(".").pop().toLowerCase();
-                        _addFile = _allowedExtensions.indexOf(_fileExtension) > -1;
-                    }
-                    if (_addFile){
-                        var _f = $("<li>");
-                        var _flink = $("<a>");
-                        
-                        _flink.attr("href", "javascript:void(0)").text(" " + (file.name != "" ? file.name : "..")).appendTo(_f);
-                        if (file.type == "dir") {
-                            $("<i class='fa fa-folder'></i>").prependTo(_flink);
-                            _f.click(function () {
-                                _parent.options.onFolderChange(file.path);
-                                _parent.navigateTo(file.path);
-                            });
-                        }
-                        if (file.type == "file") {
-                            $("<i class='fa fa-file-o'></i>").prependTo(_flink);
-                            _f.click(function () {
-                                _parent.options.onFileChoose(file.path);
-                            });
-                        }
-                        _f.appendTo(_flist);
-                    }
-                });
-                _flist.appendTo($(_parent.element));
-                var _actions = $("<div>").addClass("jHueFilechooserActions");
-                var _showActions = false;
-                var _uploadFileBtn;
-                var _createFolderBtn;
-                var _selectFolderBtn;
-                if (_parent.options.uploadFile) {
-                    _uploadFileBtn = $("<div>").attr("id", "file-uploader");
-                    _uploadFileBtn.appendTo(_actions);
-                    _showActions = true;
-                    initUploader(path, _parent, _uploadFileBtn, _parent.options.labels);
-                }
-                if (_parent.options.selectFolder) {
-                    _selectFolderBtn = $("<a>").addClass("btn").addClass("small").text(_parent.options.labels.SELECT_FOLDER);
-                    if (_parent.options.uploadFile){
-                        _selectFolderBtn.css("margin-top", "10px");
-                    }
-                    _selectFolderBtn.appendTo(_actions);
-                    _showActions = true;
-                    _selectFolderBtn.click(function () {
-                        _parent.options.onFolderChoose(path);
-                    });
+            _flink.attr("href", "javascript:void(0)").text(" " + (file.name != "" ? file.name : "..")).appendTo(_f);
+            if (file.type == "dir") {
+              $("<i class='fa fa-folder'></i>").prependTo(_flink);
+              _f.click(function () {
+                _parent.options.onFolderChange(file.path);
+                _parent.navigateTo(file.path);
+              });
+            }
+            if (file.type == "file") {
+              $("<i class='fa fa-file-o'></i>").prependTo(_flink);
+              _f.click(function () {
+                _parent.options.onFileChoose(file.path);
+              });
+            }
+            _f.appendTo(_flist);
+          }
+        });
+        _flist.appendTo($(_parent.element).find('.filechooser-tree'));
+        var _actions = $("<div>").addClass("jHueFilechooserActions");
+        var _showActions = false;
+        var _uploadFileBtn;
+        var _createFolderBtn;
+        var _selectFolderBtn;
+        if (_parent.options.uploadFile) {
+          _uploadFileBtn = $("<div>").attr("id", "file-uploader");
+          _uploadFileBtn.appendTo(_actions);
+          _showActions = true;
+          initUploader(path, _parent, _uploadFileBtn, _parent.options.labels);
+        }
+        if (_parent.options.selectFolder) {
+          _selectFolderBtn = $("<a>").addClass("btn").addClass("small").text(_parent.options.labels.SELECT_FOLDER);
+          if (_parent.options.uploadFile) {
+            _selectFolderBtn.css("margin-top", "10px");
+          }
+          _selectFolderBtn.appendTo(_actions);
+          _showActions = true;
+          _selectFolderBtn.click(function () {
+            _parent.options.onFolderChoose(path);
+          });
+        }
+        $("<span> </span>").appendTo(_actions);
+        if (_parent.options.createFolder) {
+          _createFolderBtn = $("<a>").addClass("btn").addClass("small").text(_parent.options.labels.CREATE_FOLDER);
+          if (_parent.options.uploadFile) {
+            _createFolderBtn.css("margin-top", "10px");
+          }
+          _createFolderBtn.appendTo(_actions);
+          _showActions = true;
+          var _createFolderDetails = $("<form>").css("margin-top", "10px").addClass("well form-inline");
+          _createFolderDetails.hide();
+          var _folderName = $("<input>").attr("type", "text").attr("placeholder", _parent.options.labels.FOLDER_NAME).appendTo(_createFolderDetails);
+          $("<span> </span>").appendTo(_createFolderDetails);
+          var _folderBtn = $("<input>").attr("type", "button").attr("value", _parent.options.labels.CREATE_FOLDER).addClass("btn primary").appendTo(_createFolderDetails);
+          $("<span> </span>").appendTo(_createFolderDetails);
+          var _folderCancel = $("<input>").attr("type", "button").attr("value", _parent.options.labels.CANCEL).addClass("btn").appendTo(_createFolderDetails);
+          _folderCancel.click(function () {
+            if (_uploadFileBtn) {
+              _uploadFileBtn.removeClass("disabled");
+            }
+            _createFolderBtn.removeClass("disabled");
+            _createFolderDetails.slideUp();
+          });
+          _folderBtn.click(function () {
+            $.ajax({
+              type: "POST",
+              url: "/filebrowser/mkdir",
+              data: {
+                name: _folderName.val(),
+                path: path
+              },
+              beforeSend: function (xhr) {
+                xhr.setRequestHeader("X-Requested-With", "Hue"); // need to override the default one because otherwise Django returns HTTP 500
+              },
+              success: function (xhr, status) {
+                if (status == "success") {
+                  _parent.navigateTo(path);
+                  if (_uploadFileBtn) {
+                    _uploadFileBtn.removeClass("disabled");
+                  }
+                  _createFolderBtn.removeClass("disabled");
+                  _createFolderDetails.slideUp();
                 }
-                $("<span> </span>").appendTo(_actions);
-                if (_parent.options.createFolder) {
-                    _createFolderBtn = $("<a>").addClass("btn").addClass("small").text(_parent.options.labels.CREATE_FOLDER);
-                    if (_parent.options.uploadFile){
-                        _createFolderBtn.css("margin-top", "10px");
-                    }
-                    _createFolderBtn.appendTo(_actions);
-                    _showActions = true;
-                    var _createFolderDetails = $("<form>").css("margin-top", "10px").addClass("well form-inline");
-                    _createFolderDetails.hide();
-                    var _folderName = $("<input>").attr("type", "text").attr("placeholder", _parent.options.labels.FOLDER_NAME).appendTo(_createFolderDetails);
-                    $("<span> </span>").appendTo(_createFolderDetails);
-                    var _folderBtn = $("<input>").attr("type", "button").attr("value", _parent.options.labels.CREATE_FOLDER).addClass("btn primary").appendTo(_createFolderDetails);
-                    $("<span> </span>").appendTo(_createFolderDetails);
-                    var _folderCancel = $("<input>").attr("type", "button").attr("value", _parent.options.labels.CANCEL).addClass("btn").appendTo(_createFolderDetails);
-                    _folderCancel.click(function () {
-                        if (_uploadFileBtn) {
-                            _uploadFileBtn.removeClass("disabled");
-                        }
-                        _createFolderBtn.removeClass("disabled");
-                        _createFolderDetails.slideUp();
-                    });
-                    _folderBtn.click(function () {
-                        $.ajax({
-                            type:"POST",
-                            url:"/filebrowser/mkdir",
-                            data:{
-                                name:_folderName.val(),
-                                path:path
-                            },
-                            beforeSend:function (xhr) {
-                                xhr.setRequestHeader("X-Requested-With", "Hue"); // need to override the default one because otherwise Django returns HTTP 500
-                            },
-                            success:function (xhr, status) {
-                                if (status == "success") {
-                                    _parent.navigateTo(path);
-                                    if (_uploadFileBtn) {
-                                        _uploadFileBtn.removeClass("disabled");
-                                    }
-                                    _createFolderBtn.removeClass("disabled");
-                                    _createFolderDetails.slideUp();
-                                }
-                            }
-                        });
+              }
+            });
 
-                    });
+          });
 
-                    _createFolderDetails.appendTo(_actions);
+          _createFolderDetails.appendTo(_actions);
 
-                    _createFolderBtn.click(function () {
-                        if (_uploadFileBtn) {
-                            _uploadFileBtn.addClass("disabled");
-                        }
-                        _createFolderBtn.addClass("disabled");
-                        _createFolderDetails.slideDown();
-                    });
-                }
-                if (_showActions){
-                    _actions.appendTo($(_parent.element));
-                }
-                window.setTimeout(function () {
-                  $(_parent.element).parent().scrollTop(0)
-                }, 100);
-            }
-        }).error(function(){
-            if (! _parent.options.suppressErrors) {
-              $(document).trigger("info", _parent.options.labels.FILE_NOT_FOUND);
-              _parent.options.onError();
+          _createFolderBtn.click(function () {
+            if (_uploadFileBtn) {
+              _uploadFileBtn.addClass("disabled");
             }
-            _parent.navigateTo(_parent.options.errorRedirectPath != "" ? _parent.options.errorRedirectPath : "/?default_to_home");
-        });
-    };
+            _createFolderBtn.addClass("disabled");
+            _createFolderDetails.slideDown();
+          });
+        }
+        if (_showActions) {
+          _actions.appendTo($(_parent.element).find('.filechooser-tree'));
+        }
+        window.setTimeout(function () {
+          $(_parent.element).parent().scrollTop(0)
+        }, 100);
+      }
+    }).error(function () {
+      if (!_parent.options.suppressErrors) {
+        $(document).trigger("info", _parent.options.labels.FILE_NOT_FOUND);
+        _parent.options.onError();
+      }
+      _parent.navigateTo(_parent.options.errorRedirectPath != "" ? _parent.options.errorRedirectPath : (_parent.options.fsSelected === 's3' ? 'S3://' : '/?default_to_home'));
+    });
+  };
 
-    var num_of_pending_uploads = 0;
-    function initUploader(path, _parent, el, labels) {
-        var uploader = new qq.FileUploader({
-            element:el[0],
-            action:'/filebrowser/upload/file',
-            params:{
-                dest:path,
-                fileFieldLabel:'hdfs_file'
-            },
-            onComplete:function (id, fileName, responseJSON) {
-                num_of_pending_uploads--;
-                if(num_of_pending_uploads == 0){
-                    _parent.navigateTo(path);
-                }
-            },
-            onSubmit: function(id, fileName){
-                num_of_pending_uploads++;
-            },
-            template: '<div class="qq-uploader">' +
-                '<div class="qq-upload-drop-area"><span></span></div>' +
-                '<div class="qq-upload-button">' + labels.UPLOAD_FILE + '</div>' +
-                '<ul class="qq-upload-list"></ul>' +
-                '</div>',
-            fileTemplate: '<li>' +
-                '<span class="qq-upload-file"></span>' +
-                '<span class="qq-upload-spinner"></span>' +
-                '<span class="qq-upload-size"></span>' +
-                '<a class="qq-upload-cancel" href="#">' + labels.CANCEL + '</a>' +
-                '<span class="qq-upload-failed-text">' + labels.FAILED + '</span>' +
-                '</li>',
-            debug:false
-        });
-    }
+  var num_of_pending_uploads = 0;
 
-    Plugin.prototype.init = function () {
-        if ($.trim(this.options.initialPath) != "") {
-            this.navigateTo(this.options.initialPath);
+  function initUploader(path, _parent, el, labels) {
+    var uploader = new qq.FileUploader({
+      element: el[0],
+      action: '/filebrowser/upload/file',
+      params: {
+        dest: path,
+        fileFieldLabel: 'hdfs_file'
+      },
+      onComplete: function (id, fileName, responseJSON) {
+        num_of_pending_uploads--;
+        if (num_of_pending_uploads == 0) {
+          _parent.navigateTo(path);
         }
-        else if ($.totalStorage(STORAGE_PREFIX + this.options.user) != null) {
-            this.navigateTo($.totalStorage(STORAGE_PREFIX + this.options.user));
-        }
-        else {
-            this.navigateTo("/?default_to_home");
+      },
+      onSubmit: function (id, fileName) {
+        num_of_pending_uploads++;
+      },
+      template: '<div class="qq-uploader">' +
+      '<div class="qq-upload-drop-area"><span></span></div>' +
+      '<div class="qq-upload-button">' + labels.UPLOAD_FILE + '</div>' +
+      '<ul class="qq-upload-list"></ul>' +
+      '</div>',
+      fileTemplate: '<li>' +
+      '<span class="qq-upload-file"></span>' +
+      '<span class="qq-upload-spinner"></span>' +
+      '<span class="qq-upload-size"></span>' +
+      '<a class="qq-upload-cancel" href="#">' + labels.CANCEL + '</a>' +
+      '<span class="qq-upload-failed-text">' + labels.FAILED + '</span>' +
+      '</li>',
+      debug: false
+    });
+  }
+
+  Plugin.prototype.init = function () {
+    var self = this;
+    $(self.element).empty().html('<div class="filechooser-container" style="position: relative"><div class="filechooser-services" style="position: fixed"></div><div class="filechooser-tree" style="width: 540px"></div></div>');
+    $.post('/filebrowser/api/get_filesystems', function (data) {
+      var initialPath = $.trim(self.options.initialPath);
+      if (data && data.status == 0) {
+        if (initialPath && initialPath.toLowerCase().indexOf('s3') > -1 && self.options.filesystems.indexOf('s3') > -1) {
+          self.options.fsSelected = 's3';
         }
-    };
+        self.setFileSystems(data.filesystems);
+      }
+      if (initialPath != "") {
+        self.navigateTo(self.options.initialPath);
+      }
+      else if ($.totalStorage(STORAGE_PREFIX + self.options.user + self.options.fsSelected) != null) {
+        self.navigateTo($.totalStorage(STORAGE_PREFIX + self.options.user + self.options.fsSelected));
+      }
+      else {
+        self.navigateTo("/?default_to_home");
+      }
+    });
+  };
 
-    $.fn[pluginName] = function (options) {
-        return this.each(function () {
-            if (!$.data(this, 'plugin_' + pluginName)) {
-                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
-            }
-            else {
-                $.data(this, 'plugin_' + pluginName).setOptions(options);
-            }
-        });
-    }
+  $.fn[pluginName] = function (options) {
+    return this.each(function () {
+      if (!$.data(this, 'plugin_' + pluginName)) {
+        $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
+      }
+      else {
+        $.data(this, 'plugin_' + pluginName).setOptions(options);
+      }
+    });
+  }
 
 })(jQuery, window, document);