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

Question

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

Flash is so dead... hardly supported anymore and that support that there is is dropping fast... any reason why you're using it instead of html5 api's? — Tschallacka
– Tschallacka, Commented Feb 23, 2017 at 8:21

pipwerks · Accepted Answer · 2017-02-23 08:56:57Z

@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).

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related