feat(node-browser): moved uploader into browser

app/agent/components/file-uploader/file-uploader-controller.js

@@ -1,26 +1,23 @@
 angular.module('portainer.agent').controller('FileUploaderController', [
-  'HostBrowserService', 'Notifications',
+  '$q',
-  function FileUploaderController(HostBrowserService, Notifications) {
+  function FileUploaderController($q) {
     var ctrl = this;
 
     ctrl.state = {
       uploadInProgress: false
     };
 
-    ctrl.uploadFile = uploadFile;
+    ctrl.onFileSelected = onFileSelected;
 
-    function uploadFile() {
+    function onFileSelected(file) {
+      if (!file) {
+        return;
+      }
+      
       ctrl.state.uploadInProgress = true;
-      HostBrowserService.upload('/', ctrl.file)
+      $q.when(ctrl.uploadFile(file)).finally(function toggleProgress() {
-        .then(function onFileUpload() {
+            ctrl.state.uploadInProgress = false;
-          ctrl.onFileUploaded();
+      });
-        })
-        .catch(function onFileUpload(err) {
-          Notifications.error('Failure', err, 'Unable to upload file');
-        })
-        .finally(function toggleUploadProgress() {
-          ctrl.state.uploadInProgress = false;
-        });
     }
   }
 ]);

app/agent/components/file-uploader/file-uploader.html

@@ -1,20 +1,5 @@
-<rd-widget>
+<button 
-  <rd-widget-header icon="fa-upload" title-text="File Uploader"></rd-widget-header>
+  ngf-select="$ctrl.onFileSelected($file)"
-
+  class="btn ng-scope">
-  <rd-widget-body>
+  <i class="fa fa-upload"></i>
-    <div>
+</button>
-      <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.file">
-        Select file
-      </button>
-      <span style="margin-left: 5px;">
-        {{ $ctrl.file.name }}
-        <i class="fa fa-circle-notch fa-spin" ng-if="$ctrl.state.uploadInProgress"></i>
-      </span>
-      <button 
-        ng-disabled="!$ctrl.file" 
-        class="btn btn-sm btn-success" ng-click="$ctrl.uploadFile()">
-        Upload
-      </button>
-    </div>
-  </rd-widget-body>
-</rd-widget>

app/agent/components/file-uploader/file-uploader.js

@@ -2,6 +2,6 @@ angular.module('portainer.agent').component('fileUploader', {
   templateUrl: 'app/agent/components/file-uploader/file-uploader.html',
   controller: 'FileUploaderController',
   bindings: {
-    onFileUploaded: '<'
+    uploadFile: '<onFileSelected'
   }
 });

app/agent/components/files-datatable/files-datatable.html

@@ -1,14 +1,14 @@
 <div class="datatable">
   <rd-widget>
+    <rd-widget-header icon="{{$ctrl.titleIcon}}" title-text="{{ $ctrl.titleText }}">
+       <file-uploader ng-if="$ctrl.isUploadAllowed" on-file-selected="$ctrl.onFileSelectedForUpload">
+       </file-uploader>
+    </rd-widget-header>
     <rd-widget-body classes="no-padding">
-      <div class="toolBar">
-        <div class="toolBarTitle">
-          <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }}
-        </div>
-      </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
-        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter" placeholder="Search..." auto-focus>
+        <input type="text" class="searchInput" ng-model="$ctrl.state.textFilter"
+          placeholder="Search..." auto-focus>
       </div>
       <div class="table-responsive">
         <table class="table">
@@ -43,21 +43,27 @@
           <tbody>
             <tr ng-if="!$ctrl.isRoot">
               <td colspan="4">
-                <a ng-click="$ctrl.goToParent()"><i class="fa fa-level-up-alt space-right"></i>Go to parent</a>
+                <a ng-click="$ctrl.goToParent()"><i class="fa fa-level-up-alt space-right"></i>Go
+                  to parent</a>
               </td>
             </tr>
             <tr ng-repeat="item in ($ctrl.state.filteredDataSet = ($ctrl.dataset | filter:$ctrl.state.textFilter | orderBy:$ctrl.state.orderBy:$ctrl.state.reverseOrder))">
               <td>
                 <span ng-if="item.edit">
-                  <input class="input-sm" type="text" ng-model="item.newName" on-enter-key="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;" auto-focus />
+                  <input class="input-sm" type="text" ng-model="item.newName"
+                    on-enter-key="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"
+                    auto-focus />
                   <a class="interactive" ng-click="item.edit = false;"><i class="fa fa-times"></i></a>
-                  <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><i class="fa fa-check-square"></i></a>
+                  <a class="interactive" ng-click="$ctrl.rename({name: item.Name, newName: item.newName}); item.edit = false;"><i
+                      class="fa fa-check-square"></i></a>
                 </span>
                 <span ng-if="!item.edit && item.Dir">
-                  <a ng-click="$ctrl.browse({name: item.Name})"><i class="fa fa-folder space-right" aria-hidden="true"></i>{{ item.Name }}</a>
+                  <a ng-click="$ctrl.browse({name: item.Name})"><i class="fa fa-folder space-right"
+                      aria-hidden="true"></i>{{ item.Name }}</a>
                 </span>
                 <span ng-if="!item.edit && !item.Dir">
-                  <i class="fa fa-file space-right" aria-hidden="true"></i>{{ item.Name }}
+                  <i class="fa fa-file space-right" aria-hidden="true"></i>{{
+                  item.Name }}
                 </span>
               </td>
               <td>{{ item.Size | humansize }}</td>
@@ -65,7 +71,8 @@
                 {{ item.ModTime | getisodatefromtimestamp }}
               </td>
               <td>
-                <btn class="btn btn-xs btn-primary space-right" ng-click="$ctrl.download({ name: item.Name })" ng-if="!item.Dir">
+                <btn class="btn btn-xs btn-primary space-right" ng-click="$ctrl.download({ name: item.Name })"
+                  ng-if="!item.Dir">
                   <i class="fa fa-download" aria-hidden="true"></i> Download
                 </btn>
                 <btn class="btn btn-xs btn-primary space-right" ng-click="item.newName = item.Name; item.edit = true">
@@ -87,4 +94,4 @@
       </div>
     </rd-widget-body>
   </rd-widget>
-</div>
+</div>

app/agent/components/files-datatable/files-datatable.js

@@ -14,6 +14,9 @@ angular.module('portainer.agent').component('filesDatatable', {
     browse: '&',
     rename: '&',
     download: '&',
-    delete: '&'
+    delete: '&',
+    
+    isUploadAllowed: '<',
+    onFileSelectedForUpload: '<'
   }
 });

app/agent/components/host-browser/host-browser-controller.js

@@ -12,6 +12,7 @@ angular.module('portainer.agent').controller('HostBrowserController', [
     ctrl.downloadFile = downloadFile;
     ctrl.deleteFile = confirmDeleteFile;
     ctrl.isRoot = isRoot;
+    ctrl.onFileSelectedForUpload = onFileSelectedForUpload;
     ctrl.$onInit = $onInit;
 
     function goToParent() {
@@ -118,5 +119,23 @@ angular.module('portainer.agent').controller('HostBrowserController', [
       }
       return parent + '/' + file;
     }
+
+    function onFileSelectedForUpload(file) {
+      HostBrowserService.upload(ctrl.state.path, file)
+        .then(function onFileUpload() {
+          onFileUploaded();
+        })
+        .catch(function onFileUpload(err) {
+          Notifications.error('Failure', err, 'Unable to upload file');
+        });
+    }
+
+    function onFileUploaded() {
+      refreshList();
+    }
+
+    function refreshList() {
+      getFilesForPath(ctrl.state.path);
+    }
   }
 ]);

app/agent/components/host-browser/host-browser.html

@@ -1,5 +1,5 @@
 <files-datatable
-  title-text="Host browser" title-icon="fa-file"
+  title-text="Host browser - {{$ctrl.state.path}}" title-icon="fa-file"
   dataset="$ctrl.files" table-key="host_browser"
   order-by="Dir"
   is-root="$ctrl.isRoot()"
@@ -8,4 +8,9 @@
   rename="$ctrl.renameFile(name, newName)"
   download="$ctrl.downloadFile(name)"
   delete="$ctrl.deleteFile(name)"
-></files-datatable>
+
+  is-upload-allowed="true"
+  on-file-selected-for-upload="$ctrl.onFileSelectedForUpload"
+>
+
+</files-datatable>

app/docker/views/nodes/node-browser/node-browser.html

@@ -5,14 +5,6 @@
   </rd-header-content>
 </rd-header>
 
-<div class="row">
-  <div class="col-sm-12">
-    <file-uploader
-     on-file-uploaded="$ctrl.refreshList"
-    ></file-uploader>
-  </div>
-</div>
-
 <div class="row">
   <div class="col-sm-12">
     <host-browser