V2 alpha

explorer.js

@@ -27,6 +27,7 @@ const s3ExplorerColumns = {
 const $tb = $('#s3objects-table');
 const $bc = $('#breadcrumb');
 const $bl = $('#bucket-loader');
+const $dl = $('#bucket-download');
 
 // Map S3 storage types to text
 const mapStorage = {
@@ -292,6 +293,55 @@ function ViewController($scope, SharedService) {
     };
     $scope.stop = false;
 
+    $dl.on('click', async () => {
+        const selectedFiles = $scope.view.keys_selected.filter(item => !item.Key.endsWith("/") || DEBUG.log("Folders cannot be downloaded"));
+        if (!selectedFiles.length) return;
+
+        const signedUrls = await Promise.all(selectedFiles.map(async (checkedItem) => {
+            const s3 = new AWS.S3();
+            const params = {
+                Bucket: $scope.view.settings.bucket, Key: checkedItem.Key, Expires: 15
+            };
+            return new Promise((resolve, reject) => {
+                s3.getSignedUrl('getObject', params, (err, url) => {
+                    if (err) {
+                        DEBUG.log('err:', err);
+                        SharedService.showError(params, err);
+                        reject(err)
+                    } else {
+                        const filename = checkedItem.Key.split("/")[checkedItem.Key.split("/").length - 1];
+                        resolve({ url, filename });
+                    }
+                });
+
+            })
+        })).catch(err => DEBUG.log(err));
+
+        if (signedUrls.length == 1) {
+            // direct download if one file selected
+            const { url, filename } = signedUrls[0];
+            fetch(url)
+                .then(resp => resp.blob())
+                .then(blob => saveAs(blob, filename));
+        } else if (signedUrls.length) {
+            // otherwise download all files at once as ZIP file
+            const zip = new JSZip();
+            await Promise.all(signedUrls.map(fileToGet => {
+                const { url, filename } = fileToGet;
+                return fetch(url)
+                    .then(resp => resp.blob())
+                    .then(async (blob) => {
+                        var buffer = await blob.arrayBuffer();
+                        zip.file(filename, buffer, { binary:true });
+                    });
+            }));
+            zip.generateAsync({type: "blob"}).then(zippedFiles => {
+                var today = new Date().toLocaleDateString().replace(/\//ig, "-");
+                saveAs(zippedFiles, `${signedUrls.length} files ${today}.zip`);
+            });
+        }
+    })
+
     // Delegated event handler for S3 object/folder clicks. This is delegated
     // because the object/folder rows are added dynamically and we do not want
     // to have to assign click handlers to each and every row.
@@ -322,7 +372,10 @@ function ViewController($scope, SharedService) {
                     SharedService.showError(params, err);
                 } else {
                     DEBUG.log('url:', url);
-                    window.open(url, '_blank');
+                    var filename = params.Key.split("/")[params.Key.split("/").length - 1];
+                    fetch(url)
+                        .then(resp => resp.blob())
+                        .then(blob => saveAs(blob, filename));
                 }
             });
         }

index.html

@@ -484,6 +484,7 @@ <h4 class="modal-title">Upload to:&nbsp;{{upload.title}}</h4>
                                 <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-download" style="cursor: pointer;" class="btn fa fa-cloud-download-alt fa-2x" title="Download" ng-hide="!view.settings || !view.keys_selected.length" ng-disabled="!view.keys_selected.length"></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>
@@ -531,6 +532,8 @@ <h4 class="modal-title">Upload to:&nbsp;{{upload.title}}</h4>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.3.0/jszip.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
 <script src="https://sdk.amazonaws.com/js/aws-sdk-2.437.0.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
 <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>