HTML5 FileApi + FileReader - Feed

Question

I want to use the HTML5 FileApi to read a SWF to an OBJECT (or EMBED, if it's better to do?).

My current code crashes on Chrome/Iron (the only stable browser which also supports the xmlhttprequest v2 FormData). I got it to read image data into a on-the-fly created IMG. But the object one crashes the current tab in the browser.

else if (file.type == "application/x-shockwave-flash") {
    var show = document.createElement("object");
    show.type = "application/x-shockwave-flash"
    show.style.width = "100%";
    show.style.height = "100%";
    show.id = "thumb";
    document.getElementById("thumbnails").appendChild(show);

    var reader = new FileReader();
    reader.onload = (function (aImg) { 
        return function (e) { aImg.data = e.target.result; }; 
    })(show);
    reader.readAsDataURL(file);

Do I really read to the object.data part? How is it done right? Anybody know? Or is this incomplete and I have to wait for better implementation?

Note that the 'data' attribute on the show object isn't relevant. What you need is a child node with name="movie" and value="yourdata". See http://kb2.adobe.com/cps/415/tn_4150.html — jimbo, Jul 08 '11 at 16:34

score 2 · Answer 1 · answered Jul 06 '11 at 20:40

2

A few things I'd recommend trying (in order of increasing complexity):

base64 encode the data with btoa and set it using a data: URI,
instead of creating the object using createElement, construct the <object> tag with all attributes as an HTML string (including the base64 advice above), then inject it into a DOM element with innerHTML,
create a reflector web service where you POST the swf content, it gives you a URL, then pass the URL off to the object,
similar to the previous, create a reflector web service where you POST the swf content, targeting a full-screen IFRAM as the target, have the service spits back an HTML doc including an <object> pointing back to the server.

The later of these options is more intense, and requires round-trips from the server that you'd probably want to avoid - just some more options you might want to consider.

ActionScript 3 has a Loader which may be useful as well. I don't know if it supports data: URI's, but if it does, you could write a boot loader SWF which runs the contents of the local swf file directly.

answered Jul 06 '11 at 20:40

jimbo

11,004
6
29
46

For the first suggestion, doing what I do above already gives back a `data:` URI. At least that is what is in the `` attribute after I assign the FileReader to give it's results to the src. The second suggestion seems like it could result in the same error, but maybe it somehow circumvents that one, I will try. The third and last one would work great I think. The site is an image and swf upload service. So I would change my code to instantly upload everything and give it tokens :). Then I can do this suggestion. – sinni800 Jul 07 '11 at 10:07
The important part about option #1 is the base64 encoding. The SWF file is binary data, which may not go over well when crossing from JavaScript to DOM to plugin. So, I recommend running e.target.result through btoa(), then create a string like "data:application/x-shockwave-flash;base64," + btoa(e.target.result), and add a to the – jimbo Jul 08 '11 at 16:32
I'll have to check what readAsDataURL(file); actually returns... If it's already base64 or not.. Research is due.. BTW: I could also try an OBJECT URL. how is that? – sinni800 Jul 10 '11 at 23:28
@jimbojw. Need some help on this post about fileapi... http://stackoverflow.com/questions/21456216/clarification-required-on-javascript-in-html5-fileapi-for-image-preview – Sunny Jan 30 '14 at 13:16

1 Answers1