demo: Add an area to say the file name

web/packages/demo/www/index.css

@@ -115,6 +115,12 @@ body {
     background-color: white;
 }
 
+#local-file-name {
+    min-width: 150px;
+    display: inline-block;
+    font-size: smaller;
+}
+
 #sample-swfs {
     background-color: white;
     color: var(--ruffle-blue);

web/packages/demo/www/index.html

@@ -25,6 +25,7 @@
                     <span>Local SWF:</span>
                     <input type="file" accept=".swf,.spl" id="local-file" />
                     <label for="local-file" id="local-file-label">Select File</label>
+                    <span id="local-file-name">No file selected.</span>
                 </div>
                 <div id="sample-swfs-container" class="hidden">
                     <span id="sample-swfs-label">Sample SWF:</span>

web/packages/demo/www/index.js

@@ -21,6 +21,7 @@ const sampleFileInputContainer = document.getElementById(
 );
 const localFileInput = document.getElementById("local-file");
 const sampleFileInput = document.getElementById("sample-swfs");
+const localFileName = document.getElementById("local-file-name");
 // prettier-ignore
 const optionGroups = {
     "Animation": document.getElementById("anim-optgroup"),
@@ -68,6 +69,9 @@ async function loadFile(file) {
     if (!file) {
         return;
     }
+    if (file.name) {
+        localFileName.textContent = file.name;
+    }
     hideSample();
     const data = await new Response(file).arrayBuffer();
     load({ data, ...config });
@@ -75,6 +79,7 @@ async function loadFile(file) {
 
 function loadSample() {
     const swfData = sampleFileInput[sampleFileInput.selectedIndex].swfData;
+    localFileName.textContent = "No file selected.";
     if (swfData) {
         showSample(swfData);
         load({ url: swfData.location, ...config });