Merge pull request #108 from veraPDF/feature/UI-improvements

Added UI improvements
veraPDF · Aug 30, 2023 · 302486c · 302486c
2 parents bfa4c1f + 4318fa6
commit 302486c
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 20 deletions.
diff --git a/src/main/resources/assets/css/verapdf.css b/src/main/resources/assets/css/verapdf.css
@@ -147,4 +147,8 @@ input[readonly] {
 
 table {
   width: 100%;
+}
+
+.error-form-data {
+  color: red;
 }
diff --git a/src/main/resources/assets/js/verapdf.js b/src/main/resources/assets/js/verapdf.js
@@ -1,3 +1,4 @@
+var errorOnLoadType = false;
 $(document).on('change', '.btn-file :file', function () {
   let input = $(this)
   let numFiles = input.get(0).files ? input.get(0).files.length : 1
@@ -6,18 +7,36 @@ $(document).on('change', '.btn-file :file', function () {
   let file = input.get(0).files[0]
   let reader = new FileReader()
   reader.onload = function (e) {
-    let rawData = reader.result
-    let digest = rusha.digest(rawData)
-    input.trigger('fileselect', [numFiles, label, digest])
-
-    let logInfo = numFiles > 1 ? numFiles + ' files selected' : label
-    if (input.length) {
-      $('#filename').val(logInfo)
-    } else {
-      if (logInfo) alert(logInfo)
+    var selectedFile = $('#fileInput')[0].files[0];
+    var allowedTypes = ['application/pdf'];
+
+    if (!allowedTypes.includes(selectedFile.type)) {
+      $('#filename').val('Invalid file type. Please upload a PDF file.');
+      $('#sha1Hex').val('');
+      $('#filename').addClass("error-form-data");
+      errorOnLoadType = true;
+      $('.nextBtn').hide();
+    }else{
+      if($("#filename").hasClass( "error-form-data" )){
+        $('#filename').removeClass("error-form-data");
+      }
+      let rawData = reader.result
+      let digest = rusha.digest(rawData)
+      input.trigger('fileselect', [numFiles, label, digest])
+
+      let logInfo = numFiles > 1 ? numFiles + ' files selected' : label
+      if (input.length) {
+        $('#filename').val(logInfo)
+      } else {
+        if (logInfo) alert(logInfo)
+      }
+      $('#sha1Hex').val(digest)
+      errorOnLoadType = false;
+      $('.nextBtn').show();
     }
-    $('#sha1Hex').val(digest)
   }
+  $('a[href="#validate"]').attr("disabled","disabled");
+  $('#configure-validator-header').text(`Configure Validator for ${$('#fileInput')[0].files[0].name}`);
   reader.readAsBinaryString(file)
 })
 
@@ -36,7 +55,7 @@ $(document).ready(function () {
 
     if (input.length) {
       input.val(log)
-      $('.nextBtn').show();
+      if (!errorOnLoadType) $('.nextBtn').show();
     } else {
       if (log) alert(log)
     }
@@ -45,7 +64,7 @@ $(document).ready(function () {
 })
 
 $(document).ready(function () {
-  if($('#filename').val() ===''){
+  if($('#fileInput')[0].files.length === 0 ){
     $('.nextBtn').hide();
   }
   let navListItems = $('div.setup-panel div a')
@@ -137,17 +156,18 @@ function callVeraPdfService () {
   var spinHtml = $('#spinner-template').html()
   $('#results').html(spinHtml)
   pdfaValidator.validate(formData, flavour, function () {
-
-    $.when(renderResult()).then(showDownloadBtn());
+    $.when(renderResult()).then(addFileConfigurationToResult()).then((showDownloadBtn()));
   }, outputFormat)
 }
 
+function addFileConfigurationToResult () {
+  $("#result-details").text(`Validation results for ${$('#fileInput')[0].files[0].name} are shown below.`);
+}
+
 function showDownloadBtn () {
   $('#download-results-btn').show();
- /* if(!$('#results div')[0].hasClass( "alert")){
-
-  }*/
 }
+
 function renderResult () {
   $('#results').empty()
   if (outputFormat === 'html') {

diff --git a/src/main/resources/org/verapdf/rest/views/restclient.mustache b/src/main/resources/org/verapdf/rest/views/restclient.mustache
@@ -59,7 +59,7 @@
                 <div class="input-group">
                   <span class="input-group-btn">
                     <span class="btn btn-success btn-file">
-                      Browse&hellip; <input type="file" name="file">
+                      Browse&hellip; <input  id="fileInput" type="file" name="file" accept="application/pdf">
                     </span>
                   </span>
                   <input id="filename" type="text" class="form-control" placeholder="Select a file to upload." required="required" readonly />
@@ -76,7 +76,7 @@
       <div class="row setup-content" id="configure">
         <div class="col-xs-12">
           <div class="col-md-12">
-            <h3>Configure Validator</h3>
+            <h3 id="configure-validator-header">Configure Validator</h3>
             <div class="form-group">
               <label class="control-label">Validation Profile:</label>
               <select id="flavour" class="form-control" onchange="changeFlavour(this.value)">
@@ -113,7 +113,7 @@
           <div class="col-md-12">
             <div class="list-group voffset2">
               <h2 class="list-group-item-heading">Validation Results</h2>
-              <p class="list-group-item-text">Validation results are shown below.</p>
+              <p id="result-details" class="list-group-item-text">Validation results are shown below.</p>
               <div id="results"></div>
                <button id="download-results-btn" class="btn btn-primary btn-lg pull-right" type="button"  onclick = "downloadResult()">Download</button>
             </div>