Shorten the file name if too long

build/app.js

@@ -6128,6 +6128,14 @@ document.getElementById("save-area-file").addEventListener("change", function (e
   var label = document.getElementById("save-area-file").nextElementSibling;
   var labelInitialText = label.innerHTML;
   var fileName = event.target.files[0].name;
+  /* Shorten the file name if too long */
+
+  if (fileName.length > 17) {
+    var begin = fileName.slice(0, 10);
+    var end = fileName.slice(-4);
+    fileName = "".concat(begin, "..").concat(end);
+  }
+
   var fileDate = new Date(event.target.files[0].lastModified);
   var year = fileDate.getFullYear();
   var month = fileDate.getMonth() + 1;

build/index.html

@@ -184,7 +184,7 @@
             <div class="input-buttons">
                 <!-- <input id="save-area-file" class="" type="file" name="file" accept=".dat,.bak*" onchange="LoadSaveFile(this);" onclick="this.value = '';"> -->
                 <input id="save-area-file" class="input-file" type="file" name="file" accept=".dat,.bak*">
-                <label for="save-area-file" class="button"><i class="icon-doc-text-inv"></i>Choose Save File</label>
+                <label for="save-area-file" id="file-input-label" class="button"><i class="icon-doc-text-inv"></i>Choose Save File</label>
             </div>
 
             <div class="input-buttons">

build/main.css

@@ -346,6 +346,10 @@ input[type="file"] {
 	z-index: -1;
 }
 
+#file-input-label {
+    max-width: 325px;
+}
+
 #save-area {
     display: block;
     width: 100%;

src/css/style.css

@@ -238,6 +238,10 @@ input[type="file"] {
 	z-index: -1;
 }
 
+#file-input-label {
+    max-width: 325px;
+}
+
 #save-area {
     display: block;
     width: 100%;

src/index.html

@@ -69,7 +69,7 @@
             <div class="input-buttons">
                 <!-- <input id="save-area-file" class="" type="file" name="file" accept=".dat,.bak*" onchange="LoadSaveFile(this);" onclick="this.value = '';"> -->
                 <input id="save-area-file" class="input-file" type="file" name="file" accept=".dat,.bak*">
-                <label for="save-area-file" class="button"><i class="icon-doc-text-inv"></i>Choose Save File</label>
+                <label for="save-area-file" id="file-input-label" class="button"><i class="icon-doc-text-inv"></i>Choose Save File</label>
             </div>
 
             <div class="input-buttons">

src/js/page-functions.js

@@ -1120,6 +1120,15 @@ document.getElementById("save-area-file").addEventListener("change", (event) =>
     var labelInitialText = label.innerHTML;
 
     var fileName = event.target.files[0].name;
+
+    /* Shorten the file name if too long */
+    if (fileName.length > 17) {
+
+        let begin = fileName.slice(0, 10);
+        let end = fileName.slice(-4);
+        fileName = `${begin}..${end}`;
+    }
+
     var fileDate = new Date(event.target.files[0].lastModified);
 
     var year = fileDate.getFullYear();