02.27
File uploading in Flash (and therefore Flex) doesn’t work properly. If you have to log into a website, flex won’t keep the session info and you’ll have all kinds of trouble. Especially if you want any indication that the upload actually happened. Adobe is fully aware but doesn’t seem that interested. They blame the NPAPI (Netscape Plugin API) for the issue, but don’t reference any bugs in the Mozilla project. In fact you can search bugzilla but you won’t get any open bugs.
You’d think that a technology that’s big selling point is browser independence would actually try and be browser independent. Unfortunately only IE file uploads seem to work properly.
So, how do you workaround? Javascript!
Seth On Flex has an excellent workaround, but I had problems on my results. You see, I’d loose my connection to window.opener for some reason when I got a response back from the server. So, I used frames.
My upload function and response code from my index.template.html looks like this:
function showUploadComponent() { var w = window.open("","ARESUploadWindow","height=100, width=600,scrollbars=no,status=no,titlebar=no,toolbar=no"); var s = "<form method='POST' action='/upload' ENCTYPE='multipart/form-data' name='formUpload'>File:<input type='file' name='file' /><input type='submit' value='Upload' /></form>"; w.document.open(); w.document.write("<frameset rows='100%,*' framespacing='0'>"); w.document.write("<frame name='visibleFrame' />"); w.document.write("</frameset>"); w.document.close(); var f = w.visibleFrame; f.document.write(s); f.document.close(); } function uploadedFile(data) { getFlexApp("${application}").uploadedFile(data); } function getFlexApp(appName) { if (navigator.appName.indexOf ("Microsoft") !=-1) return window[appName]; else return document[appName]; } |
Then the response from the server becomes:
<script language='JavaScript' type='text/javascript'> this.parent.close(); this.parent.window.opener.uploadedFile(result); </script> |
Everything within Flex is the same as Seth’s solution:
Calling the Javascript:
ExternalInterface.call("showUploadComponent"); |
And registering for the return:
if (ExternalInterface.available) { ExternalInterface.addCallback("uploadedFile",callbackFunction); } |
I’m running wordpress and have the IO error using ssl and flash uploader thru add new media. I understand what you are doing here, but have no idea where to implement in the wordpress functions or template….Did you do this in wordpress? If yes or no, could you provide any more insight on how to implement?
If this should all be obvious, I apologize in advance.
Thanks.
Actually, it was for an internal project where I work. For WordPress, I think you’ll have to get your hands dirty and work on the template itself. I don’t know if you’ve got a separate page for uploading, but you should be able to add the Javascript yourself. just put it in a script tag and avoid the php.
The only downside is that I don’t know what wordpress uses to receive the file. That’s where the response has to come in to play.
I tried this solution after I had the same problem of loosing the connection to the window opener. But this updated way seems to have the same problem. I am unable to call the javascript function in the window opener. The closing of the window itself works fine. It seems that after the window is refreshed, the connection to its opener lost. I am using firefox 3.5.3. Any idea why? Thanks a lot in advanced!