Show filename of the input file.

MikuAuahDark · Nov 20, 2023 · 66918f2 · 66918f2
1 parent a9c0b9b
commit 66918f2
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -118,6 +118,10 @@
 				visibility: visible !important;
 				transition: 0.3s;
 			}
+
+			#filename {
+				text-align: center;
+			}
 		</style>
 	</head>
 	<body class="mdc-typography" style="margin: 0px">
@@ -153,6 +157,9 @@ <h2 class="mdc-typography--headline4">Input Image</h2>
 					</div>
 				</div>
 				<input id="input_file" type="file" accept="image/jpeg" hidden>
+				<!-- If no state: display: none; -->
+				<!-- Else: display: block; -->
+				<p id="filename" style="display:none"></p>
 			</section>
 			<a id="download_clicker" style="display: none"></a>
 			<!-- If no state: display: none; -->

diff --git a/index.mjs b/index.mjs
@@ -49,6 +49,8 @@ class LayoutManager {
 		this.inputAreaInfo = document.getElementById("input_area_info")
 		/** @type {HTMLInputElement} */
 		this.inputFile = document.getElementById("input_file")
+		/** @type {HTMLParagraphElement} */
+		this.inputFilename = document.getElementById("filename")
 		/** @type {HTMLAnchorElement} */
 		this.downloadClicker = document.getElementById("download_clicker")
 		/** @type {HTMLElement} */
@@ -591,6 +593,11 @@ class LayoutManager {
 	markDirty() {
 		this.setDirty(true)
 	}
+
+	setFilename(filename) {
+		this.inputFilename.textContent = filename
+		this.inputFilename.style.display = "block"
+	}
 }
 
 function main() {
@@ -632,6 +639,7 @@ function main() {
 					layout.showInputImage(file)
 					layout.setTableData(currentMetadataList)
 					layout.showMetadataInfo()
+					layout.setFilename(currentFilename)
 				} catch (e) {
 					layout.showError(e)
 				}