Browse and select files for upload

Reregistered · May 1, 2019 · 1f8a610 · 1f8a610
1 parent fd62020
commit 1f8a610
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/explorer.js b/explorer.js
@@ -295,6 +295,11 @@ app.controller('ViewController', function($scope, SharedService) {
         }
     };
 
+    $scope.upload = function() {
+        DEBUG.log('Add files');
+        $('#addedFiles').trigger('click');
+    };
+
     $scope.trash = function() {
         DEBUG.log('Trash:', $scope.view.keys_selected);
         if ($scope.view.keys_selected.length > 0) {
@@ -847,7 +852,7 @@ app.controller('UploadController', function($scope, SharedService) {
 
                 var droppedFiles = [];
                 var fileIndex = droppedFiles.length;
-                var files = e.originalEvent.dataTransfer.files;
+                var files = e.hasOwnProperty('originalEvent') ? e.originalEvent.dataTransfer.files : SharedService.added_files;
 
                 for (var ii = 0; ii < files.length; ii++) {
                     var fileii = files[ii];
@@ -900,13 +905,26 @@ app.controller('UploadController', function($scope, SharedService) {
                     $scope.upload.uploading = false;
                });
 
+                // Reset files selector
+                if (SharedService.hasOwnProperty('added_files')) {
+                    delete SharedService.added_files;
+                    $('#addedFiles').val('');
+                }
+
                 // Launch the uploader modal
                 $('#UploadModal').modal({ keyboard: true, backdrop: 'static' });
             });
     };
 
     // Enable dropzone behavior and highlighting
     $scope.dropZone($('.dropzone'));
+
+    // Simulate drop event on change of files selector
+    $('#addedFiles').on('change', function(e) {
+        SharedService.added_files = e.target.files;
+        $('.dropzone').trigger('drop');
+    });
+
 });
 
 //

diff --git a/index.html b/index.html
@@ -337,6 +337,9 @@ <h4 class="modal-title">S3 Explorer: Delete {{trash.count}} objects</h4>
         </div>
     </div>
 
+    <!-- Hidden selector for adding files -->
+    <input id="addedFiles" type="file" ng-hide="true" multiple/>
+
     <!-- Upload modal -->
     <div id="UploadModal" class="modal fade" ng-controller="UploadController" tabindex="-1">
         <div class="modal-dialog">
@@ -412,6 +415,7 @@ <h4 class="modal-title">Upload to:&nbsp;{{upload.title}}</h4>
                                 <!-- Info/Refresh/Settings buttons -->
                                 <div class="btn-group">
                                     <span id="bucket-plus" style="cursor: pointer;" class="btn fa fa-folder-plus fa-2x" ng-hide="!view.settings" title="New folder" data-target="#AddFolderModal" data-toggle="modal"></span>
+                                    <span id="bucket-upload" style="cursor: pointer;" class="btn fa fa-cloud-upload-alt fa-2x" ng-hide="!view.settings" ng-click="upload()" title="Upload files"></span>
                                     <span id="bucket-trash" style="cursor: pointer;" class="btn fa fa-trash-alt fa-2x" title="Delete {{view.keys_selected.length}} selected object(s)" ng-hide="!view.settings || !view.keys_selected.length" ng-disabled="!view.keys_selected.length" ng-click="trash()"></span>
                                     <span id="bucket-info" style="cursor: pointer;" class="btn fa fa-info-circle fa-2x" title="Info" data-target="#InfoModal" data-toggle="modal"></span>
                                     <span id="bucket-loader" style="cursor: pointer;" class="btn fa fa-sync fa-2x" ng-hide="!view.settings" ng-click="refresh()" title="Refresh"></span>