How would I link a File Input to a source of an Object Embed

Question

How would I link any media files (swfs/mp4/mp3/png/other media embed files) to the source of my object embed: basically I want this:

<input type="file"></input>

to send the uploaded file (preferably an swf) to the Data and Value sources:

<object type="application/x-shockwave-flash" data=""  
 style="width:640px;height:480px;margin:1px 350px;">
<param name="movie" value="" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="opaque" />
<param name="quality" value="high" />
<param name="menu" value="false" />
</object>

Link to the full current project:

Codepen

If I understand correctly what you a trying to do, you need to use **FlashVars**. After your server handles the upload, server should return HTML tags with the absolute/relative/whatever link to the uploaded file in the following way: https://stackoverflow.com/questions/4671867/how-do-i-access-flashvars-in-as3-and-add-them-to-an-existing-text-field — Organis, Mar 14 '19 at 23:11
Sorry to disappoint, but I don't understand what you mean, I don't think that question relates to mine, I simply wanted to make uploaded files to go to my object data and value in the movie that way I could simply open swfs or other media and itd just run it. — Mister SirCode, Mar 15 '19 at 12:21

VC.One · Accepted Answer · 2019-03-22T16:02:11.047

I suggest using <embed> tag over <object> for basic Flash embedding (less setup code).

To achieve your goal, you'll have to...

Check what type of file is selected (see: var type = file.type; in code below).
Create appropriate Element (tag) for such file (see: document.createElement("video"); in code).
Remove any already existing Element in your container... .removeChild(container.childNodes[0].
Put new Element in same container (eg: a <div>) by using .appendChild(someNewElement);

You could try something like below:
Here the <div> holds inside an <a> tag which itself is the container of your newly created (or dynamic) elements. Note its id is aTag, so getting a reference by var container = document.getElementById("aTag"); means that later we can update the aTag content by using container.appendChild(tmpElement);

<!DOCTYPE html>
<html>
<body>

<p> Choose a media file...</p>
<input type="file" id="fileChooser" accept="*/*"/>

<div>
<a id="aTag"> </a>
</div>

<script>

document.getElementById('fileChooser').addEventListener('change', onFileSelected, false);

function onFileSelected(evt) 
{
    var file = evt.target.files[0]; // FileList object
    var type = file.type;
    //alert("file TYPE is : " + type);

    var fileURL = URL.createObjectURL(file);

    var reader = new FileReader();
    reader.readAsDataURL(file);

    var tmpElement; //will hold image, video, Flash content....
    var path; //will hold URL of file BLOB (not file path)....

    reader.onloadend = function(evt) 
    {

        if (evt.target.readyState == FileReader.DONE) 
        {
            //# update file path...
            path = (window.URL || window.webkitURL).createObjectURL(file);

            //# remove any other existing media element...
            var container = document.getElementById("aTag");
            container.removeChild(container.childNodes[0]); 


            //# create HTML5 media element...
            if ( type == "image/jpeg" || type == "image/png" || type == "image/gif")
            {
                tmpElement = document.createElement( "img");
                tmpElement.setAttribute("width", "650");
            }

            if ( type == "video/mp4" )
            {
                tmpElement = document.createElement( "video");
                tmpElement.setAttribute("controls", "true" );
                tmpElement.setAttribute("width", "800");
            }

            //# create Flash plugin <embed> tag...
            if ( type == "application/x-shockwave-flash" )
            {
                path = (window.URL || window.webkitURL).createObjectURL(file);

                aTag.innerHTML = "<embed id='aFlash' src='" + path + "' width='800' height='600' type='application/x-shockwave-flash'>"

                //# stop code here since we don't need these "appendChild" commands below
                return 0; //exit the function
            }


            //# add newly created HTML5 element with file path
            tmpElement.setAttribute("src", path);
            container.appendChild(tmpElement);
        }
    };


}

</script>

</body>
</html>

PS:
Chrome browser does not allow dynamic loading of SWF from file selection. The <embed> tag must exist, on page load, with an http:// or file:// based url in "src"parameter. It's a security issue.

~~Tested SWF loading on Firefox and it works fine.~~
Updated code is tested on Chrome only and works fine to load Flash content.

Thanks, I will try this, I understood the basis of it, but Im still a code newbie, if I have any issues I will reply back... — Mister SirCode, Mar 20 '19 at 12:06
I believe I came into this issue, chrome just seems to download the swf, so what should I do to fix this, you said make a src/source for it, which is what I do to run swfs in the first place (since chrome is trashy at times and doesnt just run them) — Mister SirCode, Mar 20 '19 at 12:12
Heres the Project if you want to edit it or see what I did with it: https://codepen.io/SkylerSpark/pen/qvJWNd — Mister SirCode, Mar 20 '19 at 12:22
**(1)** For their own security reasons... Chrome doesn't open direct links to SWF (so you cannot put SWF url in address bar). You also [cannot dynamically add Flash](https://support.google.com/webmasters/answer/66355?hl=en) later that was not first processed during page loading phase. **(2)** Yes the SWF must be embedded in an html file and then that file will be checked before rendering. In your case... The html file you provide Chrome only has a "choose file" button and no Flash embed. After page load completes, Chrome browser won't like being told to now load/insert a random `.swf` file. — VC.One, Mar 22 '19 at 02:00
So, is there a way to get this to work in other browsers? it doesnt seem to work on edge either — Mister SirCode, Mar 22 '19 at 11:56
After more thinking about my point **(2)**... it seems `innerHTML` command will load plugins (_eg:_ Flash) but the `createElement` will not. In fact both things achieve the same goal to create an `` element so it's strange that one technique is accepted but not the other. Let me know how it goes in Firefox and Edge. — VC.One, Mar 22 '19 at 16:13
VC.One I cant test in firefox due to restrictions o the current pc, but on edge it seems to do a similar result, images, audio, and video will open, but swfs show a white screen, tested multiple games. Tested on even Internet Explorer... Pretty much the same result EXCEPT.... Codepen doesnt even run on such an aged browser... — Mister SirCode, Mar 22 '19 at 17:42

How would I link a File Input to a source of an Object Embed

1 Answers1