GDCC/21- Handle path and file validation

src/css/dvwebloader.css

@@ -45,6 +45,10 @@ label {
     background-color: beige;
     padding: 10px;
 }
+.warn {
+   background-color: bisque;
+    padding: 10px;
+}
 .file-exists {
     background-color: lightblue;
 }
@@ -67,3 +71,7 @@ h1 {
     width: 58%;
     display:inline-block;
 }
+.badchars {
+   background-color: bisque;
+    padding: 10px;
+}

src/js/fileupload2.js

@@ -188,6 +188,7 @@ function initSpanTxt(htmlId, key) {
 function addMessage(type, key) {
     $('#messages').html('').append($('<div/>').addClass(type).text(getLocalizedString(dvLocale, key)));
 }
+
 async function populatePageMetadata(data) {
     var mdFields = data.metadataBlocks.citation.fields;
     var title = "";
@@ -663,14 +664,28 @@ function queueFileForDirectUpload(file) {
     }
     var fUpload = new fileUpload(file);
     let send = true;
-    let path = file.webkitRelativePath.substring(file.webkitRelativePath.indexOf('/') + 1);
-    console.log(path);
+    let origPath = file.webkitRelativePath.substring(file.webkitRelativePath.indexOf('/') + 1);
+
+    //Remove filename part
+    let path =origPath.substring(0, origPath.length - file.name.length);
+    let badPath = (path.match(/^[\w\d_\-\.\\\/ ]*$/)===null);
+    if(badPath) {
+      if($('.warn').length==0) {
+        addMessage('warn', 'msgRequiredPathOrFileNameChange');
+      }
+      //Munge path according to rules
+      path = path.replace(/[^\w\d_\\.\\\/ ]+/g,'_');
+    }
+    //Re-Add filename, munge filename if needed
+    path=path.concat(file.name.replace(/[\/:*?|;#]/g,'_'));
+
+    //Now check versus existing files
     if (path in existingFiles) {
         send = false;
     } else if (removeExtension(path) in convertedFileNameMap) {
         send = false;
     }
-    rawFileMap[path] = file;
+    rawFileMap[origPath] = file;
     let i = rawFileMap.length;
     //startUploads();
     if (send) {
@@ -686,8 +701,18 @@ function queueFileForDirectUpload(file) {
     if (!send) {
         row.addClass('file-exists');
     }
-    row.append($('<input/>').prop('type', 'checkbox').prop('id', 'file_' + fileBlock.children().length).prop('checked', send))
-        .append($('<div/>').addClass('ui-fileupload-filename').text(path))
+    let badChars = !(fUpload.file.name.match(/[[\/:*?|;#]/)===null);
+    if(badChars) {
+      if($('.warn').length==0) {
+          addMessage('warn', 'msgRequiredPathOrFileNameChange');
+      }
+    }
+    row.append($('<input/>').prop('type', 'checkbox').prop('id', 'file_' + fileBlock.children().length).prop('checked', send));
+    let fnameElement = $('<div/>').addClass('ui-fileupload-filename').text(origPath);
+    if(badPath || badChars) {
+      fnameElement.addClass('badchars');
+    }
+    row.append(fnameElement)
         .append($('<div/>').text(file.size)).append($('<div/>').addClass('ui - fileupload - progress'))
         .append($('<div/>').addClass('ui - fileupload - cancel'));
     console.log('adding click handler for file_' + fileBlock.children().length);
@@ -824,10 +849,13 @@ async function directUploadFinished() {
                     console.log(fup.file.webkitRelativePath + ' : ' + fup.storageId);
                     let entry = {};
                     entry.storageIdentifier = fup.storageId;
-                    entry.fileName = fup.file.name;
+                    //Remove bad file name chars
+                    entry.fileName = fup.file.name.replace(/[\/:*?|;#]/g,'_');
                     let path = fup.file.webkitRelativePath;
                     console.log(path);
                     path = path.substring(path.indexOf('/'), path.lastIndexOf('/'));
+                    //Remove bad path chars
+                    path = path.replace(/[^\w\d_\\.\\\/ ]+/g,'_');
                     if (path.length !== 0) {
                         entry.directoryLabel = path;
                     }

src/js/lang.js

@@ -15,6 +15,7 @@ const translations = {
         msgNoFile: "No files to upload. Check some files, or refresh to start over.",
         msgUploadCompleteRegistering: "Uploads to S3 complete. Now registering all files with the dataset. This may take some time for large numbers of files.",
         msgUploadComplete: "Upload complete, all files in dataset. Close this window and refresh your dataset page to see the uploaded files.",
+        msgRequiredPathOrFileNameChange: "The highlighted path/file(s) below contain one or more disallowed characters (paths can only contain a-Z, 0-9, '_', '-', '.', '\', '/' and ' ', and filenames cannot contain any of '/;:|?*#' ). Disallowed characters will be replaced by an underscore ('_') if the file(s) are uploaded.",
     },
     fr: {
         title: "Envoi d'un dossier",
@@ -31,6 +32,7 @@ const translations = {
         msgNoFile: "Aucun fichier à envoyer. Cochez certains fichiers ou rafraîchissez la page pour recommencer.",
         msgUploadCompleteRegistering: "Envois vers S3 terminés. Enregistrement de tous les fichiers en cours dans le jeu de données. Cela peut prendre du temps pour un grand nombre de fichiers.",
         msgUploadComplete: "Envoi terminé, tous les fichiers sont dans le jeu de données. Fermez cette fenêtre et rafraîchissez la page de votre jeu de données pour voir les fichiers envoyés.",
+        msgRequiredPathOrFileNameChange: "Le(s) chemin(s) en surbrillance ci-dessous contiennent un ou plusieurs caractères non autorisés (les chemins ne peuvent contenir que a-Z, 0-9, '_', '-', '.', '\', '/' et ' ', et les noms de fichiers ne peuvent contenir aucun des éléments '/;:|?*#' ). Les caractères non autorisés seront remplacés par un trait de soulignement (« _ ») si le(s) fichier(s) sont téléchargés.",
     },
 };