[SOLVED] How do I make html or javascript open and display .swf files from the file system on a button click

How do I make html or javascript open and display .swf files from the file system on a button click

I've looked all over the place and here is the fullest extent of what I found:

<!DOCTYPE html>
<html>

<body>
    <input name="PickedFile" type="file" accept=".swf">
    <object width="550" height="400">
        <param name="movie" value="PickedFile">
        <script type="text/javascript" src="/path/to/swfobject.js"></script>
        <script type="text/javascript">
            function loadSWF(url) {
                swfobject.embedSWF(url, "flashcontent", "550", "400", "7");
            }
        </script>
        <p><a href="PickedFile" onclick="loadSWF(PickedFile); return false;">
          Click here to load the SWF!
       </a></p>
        <div id="flashcontent"></div>
    </object>
</body>

</html>

I'd prefer it to be in html so it can be downloaded for offline use

Solution

@AHBagheri, You can display a SWF loaded from outside the server, I just verified using Chrome. I was very surprised it worked.

@Ben, you have multiple flaws in your code. There are a number of reasons why your code wasn't working; the SWFObject tutorial you based your SWF loading code on (from LearnSWFObject) was not written with a file input in mind.

Here is updated code that I verified in Chrome (macOS). Be sure to point the SWFObject <script> to your copy of SWFObject.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Local SWF Test</title>
</head>
<body>

  <div>
    <input id="PickedFile" type="file" accept="application/x-shockwave-flash"/><br/>
    <button id="btn_load">Load the SWF!</button>
  </div>

  <div id="flashcontent"></div>

  <script src="swfobject.js"></script>
  <script>
  var loadSWF = function (){

    var file = document.querySelector("#PickedFile");

    if(file && file.files[0]){
      swfobject.embedSWF(file.files[0].name, "flashcontent", "550", "400", "7");
    } else {
      alert("You need to pick a file first.");
    }

  };

  document.querySelector("#btn_load").addEventListener("click", loadSWF);
  </script>

</body>
</html>

The primary problems with your code:

You placed everything inside an <object> element. Not only is this incorrect, the <object> element was not needed at all -- this is not how SWFObject works. I removed the <object> and related <param> nodes.
The "accept" attribute for the input needs to specify the MIME type, not the file extension. I changed it to application/x-shockwave-flash.
The "PickedFile" input had a name but no ID. I removed the name attribute and added the ID attribute as this is the common practice when using JavaScript to find an element (in this case document.querySelector). See the examples at https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
When you're using a file input, the value of the input is an array of files, and each item in the array is actually an object containing details about the file, including name and file path. Since you are only expecting one file in the file input, you need to grab the first array item (files.file[0]), which you can then use to access the file's name (files.file[0].name).