keep original filename and don't show image

src/index.html

@@ -14,6 +14,7 @@
 		</div>
 		<input type="file" id="upload"><br>
 		Or drag & drop
+		<div id="filename"></div>
 		<div id="downloadButtons">
 			<button id="downloadPng">png</button>
 			<button id="downloadWebp">webp</button>

src/script.js

@@ -6,6 +6,7 @@ window.addEventListener("DOMContentLoaded", () => {
 			if (file.type.startsWith("image/")) {
 				image = URL.createObjectURL(file);
 				renderImageOnCanvas(image);
+				document.getElementById("filename").innerText = file.name;
 			} else {
 				alert("Please upload a valid image file.");
 				return;
@@ -14,19 +15,11 @@ window.addEventListener("DOMContentLoaded", () => {
 	});
 
 	document.getElementById("downloadPng").addEventListener("click", () => {
-		const canvas = document.getElementById("cv");
+		downloadPictureFromCanvas("image/png");
-		const link = document.createElement("a");
-		link.download = "canvas.png";
-		link.href = canvas.toDataURL();
-		link.click();
 	});
 
 	document.getElementById("downloadWebp").addEventListener("click", () => {
-		const canvas = document.getElementById("cv");
+		downloadPictureFromCanvas("image/webp");
-		const link = document.createElement("a");
-		link.download = "canvas.webp";
-		link.href = canvas.toDataURL("image/webp");
-		link.click();
 	});
 
 	document.addEventListener("drag", () => {
@@ -56,6 +49,7 @@ window.addEventListener("DOMContentLoaded", () => {
 			if (file.type.startsWith("image/")) {
 				image = URL.createObjectURL(file);
 				renderImageOnCanvas(image);
+				document.getElementById("filename").innerText = file.name;
 			} else {
 				alert("Please upload a valid image file.");
 				return;
@@ -64,6 +58,15 @@ window.addEventListener("DOMContentLoaded", () => {
 	});
 });
 
+function downloadPictureFromCanvas(fileType) {
+	const canvas = document.getElementById("cv");
+	const link = document.createElement("a");
+	const originalFilename = document.getElementById("filename").innerText;
+	link.download = originalFilename.replace(/\.[^/.]+$/, "");
+	link.href = canvas.toDataURL(fileType);
+	link.click();
+}
+
 function renderImageOnCanvas(image) {
 	const canvas = document.getElementById("cv");
 	const ctx = canvas.getContext("2d");

src/style.css

@@ -14,5 +14,5 @@
 }
 
 #cv {
-	display: block;
+	display: none;
 }