<!DOCTYPE html> <html lang="en"> <head> <title>NyaZoom</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="css/main.css" rel="stylesheet"> <script> fetch("https://catfact.ninja/fact") .then(data => data.json()) .then(data => { document.getElementById("cat-fact").innerHTML = data.fact; }); </script> <script> document.addEventListener("DOMContentLoaded", () => { let inputs = document.querySelectorAll('input#file'); Array.prototype.forEach.call(inputs, function (input) { let label = input.nextElementSibling; let labelVal = label.innerHTML; input.addEventListener('change', function (e) { let fileName = ''; if (this.files?.length > 1) { fileName = this.getAttribute('data-multiple-caption')?.replace('{count}', this.files.length); } else { fileName = e.target.value.split('\\').pop(); } label.innerHTML = fileName || labelVal; }); }); }, false); </script> </head> <body> <h1>NyaZoom<sup>2</sup></h1> <div class="form-wrapper"> <form action="/upload" method="post" enctype="multipart/form-data" class="main-form"> <div class="cat-img-wrapper"> <img class="cat-img" src="https://cataas.com/cat?width=250&height=250" /> </div> <input type="file" id="file" name="file" data-multiple-caption="{count} files selected" multiple /> <label for="file">Select Files</label> <input type="submit" value="Get Link~"> <p id="cat-fact" /> </form> </div> </body> </html>