Uploads don't work in IE 8?

ronmichael

I found recently that Uploadify isn't working in IE 8. It acts like it is working - it calls the server, sends the scriptData to the server, gets a response from the server, raises the onComplete event - but it doesn't seem to actually push the file to the server. But my code works in Firefox 3 and IE 7.

Any ideas what could be wrong?

TravisN.

IE8 is still in beta so no attempt has been made to check or make it compatible with that version.

ronmichael

Actually, IE 8 has been out of beta for a few weeks now!

ronmichael

Interestingly enough, SWFUpload exhibits the same exact behavior in my test environment. Appears to work fine but doesn't actually upload in IE 8; but does upload in IE 7 and Firefox. I am pretty sure people do have Swfupload working in IE 8 so it probably isn't a bug that affects everyone...

ronmichael

To make things even more confusing, I find that the code on this particular site I'm working on - using uploadify OR swfupload - doesn't even appear to work in IE 7 anymore. It only works in Firefox. Yet on another of my sites it works fine.

So I have to believe that it's not something specific to uploadify but to the site I'm working on. When I figure out what is going on I will post back later, just to help anyone else who may run into a similiar problem.

jacklyh

Hi, I had make some testing on the IE8 too.

I using the sample from demo which use the following code to upload file "Upload Files".

I found out tht 1st time i click 'upload files' link only show up the upload file status, when i click the link for second time, it happen to upload the file to folder.

Can anyone help me out?

jacklyh

When i test my script using auto mode, it work perfectly.

ronmichael

Regarding my original problem -- it was not due to IE 8. The problem was due to authentication. It's an ASP.NET site with windows authentication protecting the site, and Flash has a lot of issues with that.

A commonly known issue with Flash is that when you use it to do an upload (or any file IO) to a site with authentication, it'll prompt the user for a login (even though they are already logged in). To get around that you typically have to create some page that doesn't require authentication and upload to that page.

Now, my first attempt in doing this was to create a virtual directory within the main app and upload there. This prevented the authentication popups but for some reason the upload would still not occur. It'd appear that it worked, and the server page would be called, but no file was posted. Even when the Flash file was hosted in that virtual directory it still wouldn't work.

What I had to do was create an entirely new site (a subdomain in this case) so that it was totally separate; host the flash file there and post the upload there. Then it worked.

So if you are using Uploadify (or any flash uploader) on a site with windows/integrated authentication, set up a separate unsecured web site to handle Flash uploads. Have the secure site generate a secure token that can be used to post the upload to the unsecure side.

mconnors

I have had lots of IE8 issues with other things, curious if

helps anyone

dotcolor

Do not use a tag it will work fine in IE 8 i have tested it and its working fine.

act28

I'm getting this error in IE8:
Line: 1
Error: 'uploadifyUploader' is undefined

(uploadify is the div id)

The problem appears to be with swfobject.js (latest version) at this line:
try { uploadifyUploader.SetReturnValue(__flash__toXML(jQuery("#uploadify").attr("width",110)()) ); } catch (e) { uploadifyUploader.SetReturnValue(""); }

If I remove the form tag enclosing the uploadify div, it works fine.
But unfortunately, because of the way my page and other form elements on that page are laid out, I need the form tag...

Any ideas?

act28

Update:

After uninstalling my Flash Player (ver 9), and reinstalling the latest Flash Player, it now works in IE... sort of. Now I get a different error... "null" is null or not an object, when it returns from the onComplete callback. If I remove the form tags, it works fine. With the form tags in, it breaks... BUT ONLY ON IE8!!!

So, after much frustration, the workaround I came up with was this:
1. I embedded an iframe inside the form, to call the uploadify script.
2. The uploadify script has no form tags and is essentially setup the same way as the basic samples.
3. onComplete calls a javascript function from the top window containing the form and passes the fileObj and response back to the top window, so that the form knows what was uploaded.

This solution works in both FF3 and IE8.

The form page:


...
<script type=\"text/javascript\">
// this is called by uploadify's onComplete callback
function onUploaded(e, q, f, r, d) {
   // you can set some form fields here with data that is returned from uploadify - my upload scripts returns (among other things) the fileid of the uploaded file
   // so I can submit this with the form, or silently save it via AJAX
   $(\"#fileid\").val(r.fileid);
   $(\"#filesize\").val(fileObj.size);
   $(\"#uploadifyStatus\").replaceWith('<fieldset><legend>File Uploaded</legend><p>'+ fileObj.name + ' (' + fileObj.size + ') uploaded successfully</p></fieldset>');
   // do some other stuff here - like remove the iframe so they can't upload again.
   $(\"iframe[id='uploadifyFame']\").remove(); 
   // or silently submit the form via AJAX so the updated form fields can be processed...
}
</script>
...
<form action=\"...\" method=\"post\" ...>
... other form fields here ...
<div id=\"uploadifyStatus\"></div>
<iframe id=\"uploadifyFrame\" src=\"upload-iframe.php\"  frameborder=\"0\"....></iframe>
<noframes>
      <!-- noframes fallback -->
     <input type=\"hidden\" name=\"MAX_FILE_SIZE\" value=\"...\" />
     <input type=\"file\" name=\"filetoupload\" />
     ... alt upload button here ....
</noframes>
... other stuff here ...
</form>
....

upload-iframe.php


<!DOCTYPE ... >
<html>
<head>
...
<script type=\"text/javascript\">
$(document).ready(function() {
    $(\"#uploadify\").uploadify({
        'uploader'         : 'uploadify.swf'
        ,'script'            : 'upload.php'
        ,'cancelImg'      : 'cancel.png'
        ,'sizeLimit'       : 500 * 1024 * 1024
        ,'folder'            : '/tmp_files'
        ,'auto'              : false
        ,'multi'             : false
        ,'buttonText'    : 'Browse'
        ,'fileDataName' : 'uploadedfile'
        ,'displayData'    : 'speed'
        ,'onComplete'   : function(event, queueID, fileObj, response, data) {
            // my upload script returns a JSON object in the response
            top.onUploaded(event, queueID, fileObj, response, data);
            return true;
        }
    });
});
</script>
</head>
<body>
    <fieldset>
        <legend>Upload File</legend>
        <div id=\"uploadify\">
            <h1>Adobe Flash Player plugin is required for file uploads to work.</h1>
            <p><a target=\"_blank\" href=\"http://www.adobe.com/go/getflashplayer\"><img src=\"http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif\" alt=\"Get Adobe Flash player\" /></a></p>
        </div>
    </fieldset>
    <input type=\"button\" name=\"START_UPLOAD\" id=\"btnStartUpload\" class=\"button\" onClick=\"$('#uploadify').uploadifyUpload()\" value=\"Upload\" />
    <input type=\"button\" name=\"CANCEL_UPLOAD\" id=\"btnCancelUpload\" class=\"button\" onClick=\"$('#uploadify').uploadifyClearQueue()\" value=\"Cancel Upload\" />
</body>
</html>

Hope this helps someone....

ayeah

I got another solution for this bug

I had the problem that the upload component did not work with a client of mine on different versions of IE .

This is appearantly due to the way flash works with dynamic flash components located within form tags in internet explorer.
The fix is really easy, but it was really nasty to find the cause...

If your code looks like this :

$("#FileToUpload").uploadify({ ... });

just add a new line after 'uploadifying' the element :

FileToUploadUploader=document.getElementById("FileToUploadUploader");

So you define a javascript global var with the name of your element+"Uploader", and assign the element to it....

That's all there is to it...

the red line is the key point, it fix the 'null' problem

Elaidon

act28 said:
Update:

After uninstalling my Flash Player (ver 9), and reinstalling the latest Flash Player, it now works in IE... sort of. Now I get a different error... "null" is null or not an object, when it returns from the onComplete callback. If I remove the form tags, it works fine. With the form tags in, it breaks... BUT ONLY ON IE8!!!

So, after much frustration, the workaround I came up with was this:
1. I embedded an iframe inside the form, to call the uploadify script.
2. The uploadify script has no form tags and is essentially setup the same way as the basic samples.
3. onComplete calls a javascript function from the top window containing the form and passes the fileObj and response back to the top window, so that the form knows what was uploaded.

This solution works in both FF3 and IE8.

Hi all,

I have the same problem.

At the beginning I was thinking about a solution like your. But before trying with iframe I have installed the last version of Flash ActiveX for IE and the problem is solved.

Elaidon

act28 said:
Update:

After uninstalling my Flash Player (ver 9), and reinstalling the latest Flash Player, it now works in IE... sort of. Now I get a different error... "null" is null or not an object, when it returns from the onComplete callback. If I remove the form tags, it works fine. With the form tags in, it breaks... BUT ONLY ON IE8!!!

So, after much frustration, the workaround I came up with was this:
1. I embedded an iframe inside the form, to call the uploadify script.
2. The uploadify script has no form tags and is essentially setup the same way as the basic samples.
3. onComplete calls a javascript function from the top window containing the form and passes the fileObj and response back to the top window, so that the form knows what was uploaded.

This solution works in both FF3 and IE8.

Hi all,

I have the same problem.

At the beginnig I thought exactly the same solution with IFrame. But before as last check I installed the last version of Flash ActiveX for IE.
In this way the problem is solved.

barulho77

Does anyone could solve this problem?
I get this same error!

darklow

I am experiencing the same error on IE8
Error: 'uploadifyUploader' is undefined

Unfortunately i cant put #uploadify or code outside the tag
Any other solutions?

Thanks.

climax

spend few days on this
the solution for me :

set auto upload to false

in IE it works perfectly now

my code, hope it helps

{
	$("#uploadify").uploadify({
		'uploader'       : '/swf/uploadify.swf',
		'fileDesc'      : 'Type de fichier : MP3 et 10Mo maximum',
		'fileExt'      	 : '*.mp3',
		'folder'         : '/',
		'cancelImg'      : '/images/cancel.png',
		'buttonImg'      : '/images/button_parcourir.png',
		'width'          : '80',
		'height'         : '27',
		'onSelect'       : function(){$(".filesupcont").height(350);$(".filesupcont").jScrollPane({showArrows: true, animateScroll: true});},
		'onProgress'     : function(){ $("#cancelpn").fadeIn("fast");},
		'onComplete'     : function(){ $("#cancelpn").fadeOut("fast");},
		'wmode'          : 'transparent',
		'onError': function (event, queueID ,fileObj, errorObj) {
var msg;
if (errorObj.status == 404) {
alert('Could not find upload script. Use a path relative to:');
msg = 'Could not find upload script.';
alert(msg);
} else if (errorObj.type === "HTTP"){
msg = errorObj.type+": "+errorObj.status;
alert(msg);
}else if (errorObj.type ==="File Size"){
msg = fileObj.name;
alert(''+errorObj.type+' Limit: '+Math.round(errorObj.sizeLimit/1024)+'KB');
}else{
msg = errorObj.type+": "+errorObj.text;
alert(msg);
return false;
}
},

		'buttonText'     : 'Choisir',
		'onAllComplete'  : function(){closefacebox(); document.location='/#/'+lang+'/music/'+nickname+'/newadd:'+daten+''; },
		'sizeLimit'      : 10000000,
		'queueID'        : 'fileQueue',
		'auto'           : false,
		'multi'          : true
	});

ajinesh

Hello all

I solved it by removing the parent form tag in my html code ( or create the uploader div named file_uploadUploader outside form tag)

princess

hi :)

i've encountered server error when i upload on ie8 to 9. hope someone can help me.

Thanks in advance :)

Regards,
princess

Howdy, Stranger!

Categories