Give error feedback if the requested file does not exist

webadmin/src/js/client.js

@@ -68,6 +68,14 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         return $http.get(client.apiOrigin + url, config);
     }
 
+    function head(url, config) {
+        config = config || {};
+        config.headers = config.headers || {};
+        config.headers.Authorization = 'Bearer ' + token;
+
+        return $http.head(client.apiOrigin + url, config);
+    }
+
     function post(url, data, config) {
         data = data || {};
         config = config || {};
@@ -1114,6 +1122,15 @@ angular.module('Application').service('Client', ['$http', 'md5', 'Notification',
         }).error(defaultErrorHandler(callback));
     };
 
+    Client.prototype.checkDownloadableFile = function (appId, filePath, callback) {
+        head('/api/v1/apps/' + appId + '/download?file=' + filePath, {
+            headers: { 'Content-Type': undefined }
+        }).success(function(data, status) {
+            if (status !== 200) return callback(new ClientError(status, data));
+            callback(null);
+        }).error(defaultErrorHandler(callback));
+    };
+
     client = new Client();
     return client;
 }]);

webadmin/src/views/debug.html

@@ -6,14 +6,21 @@
         <h4 class="modal-title">Download a file from {{ selected.name }}</h4>
       </div>
       <div class="modal-body">
-          <form ng-submit="downloadFile.submit()">
-            <input type="text" class="form-control" ng-model="downloadFile.filePath" required autofocus>
+          <form name="downloadFileForm" ng-submit="downloadFile.submit()">
+            <div class="form-group" ng-class="{ 'has-error': downloadFileForm.filePath.$dirty && downloadFile.error }">
+              <div class="control-label" ng-show="{ 'has-error': downloadFileForm.filePath.$dirty && downloadFile.error }">
+                  <small>{{ downloadFile.error }}</small>
+              </div>
+              <input type="text" class="form-control" name="filePath" ng-model="downloadFile.filePath" required autofocus>
+            </div>
             <input class="ng-hide" type="submit" ng-disabled="!downloadFile.filePath"/>
           </form>
       </div>
       <div class="modal-footer">
+        <a id="fileDownloadLink" class="" ng-href="{{ downloadFile.downloadUrl() }}" target="_blank"></a>
+
         <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
-        <a id="fileDownloadLink" class="btn btn-success" ng-href="{{ downloadFile.downloadUrl() }}" ng-disabled="!downloadFile.filePath" target="_blank">Download</a>
+        <button type="button" class="btn btn-success" ng-click="downloadFile.submit()" ng-disabled="!downloadFile.filePath"><i class="fa fa-circle-o-notch fa-spin" ng-show="downloadFile.busy"></i> Download</button>
       </div>
     </div>
   </div>

webadmin/src/views/debug.js

@@ -24,22 +24,40 @@ angular.module('Application').controller('DebugController', ['$scope', '$locatio
     }
 
     $scope.downloadFile = {
+        error: '',
         filePath: '',
+        busy: false,
 
         downloadUrl: function () {
+            if (!$scope.downloadFile.filePath) return '';
+
             var filePath = $scope.downloadFile.filePath.replace(/\/*\//g, '/');
 
             return Client.apiOrigin + '/api/v1/apps/' + $scope.selected.value + '/download?file=' + filePath + '&access_token=' + Client.getToken();
         },
 
         show: function () {
+            $scope.downloadFile.busy = false;
+            $scope.downloadFile.error = '';
             $scope.downloadFile.filePath = '';
             $('#downloadFileModal').modal('show');
         },
 
         submit: function () {
-            // we have to click the link to make the browser do the download
-            $('#fileDownloadLink')[0].click();
+            $scope.downloadFile.busy = true;
+
+            Client.checkDownloadableFile($scope.selected.value, $scope.downloadFile.filePath, function (error) {
+                $scope.downloadFile.busy = false;
+
+                if (error) {
+                    $scope.downloadFile.error = 'The requested file does not exist.';
+                    return;
+                }
+
+                // we have to click the link to make the browser do the download
+                // don't know how to prevent the browsers
+                $('#fileDownloadLink')[0].click();
+            });
         }
     };