Fix preview and keep uploaded filename

index.html

@@ -13,8 +13,15 @@
         <input type="file" id="imageInput" name="image" accept="image/*" required>
         <button type="submit">Upload and Format</button>
     </form>
+    <div class="card">
+        <a id="card" href="#"></a>
+    </div>
+
+    <!--
     <a id="card" style="display: none;">Download Formatted Image</a>
+
     <div id="preview"></div>
+    -->
 </div>
 <script src="script.js"></script>
 </body>

script.js

@@ -22,7 +22,7 @@ document.getElementById('uploadForm').addEventListener('submit', async function
         }
 
         const arrayBuffer = await response.arrayBuffer();
-        downloadImage(arrayBuffer);
+        downloadImage(arrayBuffer, imageInput.value);
 
     } catch (error) {
         console.error('Error:', error);
@@ -30,13 +30,13 @@ document.getElementById('uploadForm').addEventListener('submit', async function
     }
 });
 
-function downloadImage(arrayBuffer) {
+function downloadImage(arrayBuffer, fileName) {
     const blob = new Blob([arrayBuffer], { type: "image/png" });
     const cardElement = document.getElementById("card");
 
     let urlCreator = window.URL || window.webkitURL;
     cardElement.href = urlCreator.createObjectURL(blob);
     cardElement.style.display = 'unset';
-    cardElement.download = "formatted_image.png";
+    cardElement.download = fileName + ".png";
     cardElement.click();
 }