Login Register
Home » Support » Forums » Dojo Core (dojo.*, 0.9+) » Dojo Core Support » File Upload with iframe not working in IE

File Upload with iframe not working in IE

Submitted by JavaDev on Thu, 02/28/2008 - 12:13.

i am trying to upload a file using Dojo iframe with the help of iframe.send

it works fine with FF but ity doesnt work with IE

Can any one help me out in solving this problem

‹ Problem with DnD in IE 6 and 7 IE6 & IE7 problem xhrGet ›

there was recently an

Submitted by dante on Thu, 02/28/2008 - 12:35.

there was recently an iframe/IE fix that landed for 1.1, though i don't recall the details specifically. are you using 1.0.x? Would you try using the upcoming beta3 release (monday, mar 2)?

we are using dojo version 1.0.1

Submitted by JavaDev on Thu, 02/28/2008 - 12:52.

dojo version 1.0.1

we are using the following

Submitted by JavaDev on Thu, 02/28/2008 - 12:57.

we are using the following code for file upload but its working only in FF but not in IE

<head>
       
        <title>simple dojo.io.iframe background file upload with PHP</title>
        <style type="text/css">
                @import "dojo/dojo/resources/dojo.css";
                @import "dojo/dijit/themes/tundra/tundra.css";
                @import "dojo/dijit/tests/css/dijitTests.css";
        </style>
        <script type="text/javascript"
                djConfig="parseOnLoad: true, isDebug: true"
                src="dojo/dojo/dojo.js"></script>
        <script type="text/javascript">
                dojo.require("dojo.io.iframe");
                dojo.require("dijit.ProgressBar");
                dojo.require("dijit.form.Button");
                dojo.require("dojo.parser");

                       
                var myHost = ""; // var myHost = "http://dojotoolkit.org/";     
                /* dojo.addOnLoad(function(){
                        dojo.byId('mainForm').name.value = myHost;
                });
                */

                // it's all wrapped up in a single function
                function sendForm(){
               
                        // all the dojo.styles and dojo.byId calls are for convenience.
                        // to easily have access to individual parts of the "upload"
                        // area.  turnthing this into an Upload widget would make this
                        // un-necessary

                        // myHost = dojo.byId('mainForm').name.value;
                        dojo.style(dojo.byId('inputField'),"display","none");
                        dojo.style(dojo.byId('progressField'),"display","inline");
                        dojo.byId('preamble').innerHTML = "Uploading ...";

                        dojo.io.iframe.send({
                                url: /* myHost + */"uploadReceive.php",
                                method: "post",
                                handleAs: "text",
                                form: dojo.byId('mainForm'),
                                handle: function(data,ioArgs){
                                        var foo = dojo.fromJson(data);
                                        if (foo.status == "success"){
                                                dojo.style(dojo.byId('inputField'),"display","inline");
                                                dojo.byId('fileInput').value = '';
                                                dojo.style(dojo.byId('progressField'),"display","none");
                                                dojo.byId('uploadedFiles').innerHTML += "success: File: " + foo.details.name + " size: " + foo.details.size +"<br>";
                                                dojo.byId('preamble').innerHTML = "File to Upload: ";      
                                        }else{
                                                dojo.style(dojo.byId('inputField'),"display","inline");
                                                dojo.style(dojo.byId('progressField'),"display","none");
                                                dojo.byId('preamble').innerHTML = "Error, try again: ";
                                        }       
                                }
                        });
                }       
        </script>
</head>
<body class="tundra">
       
        <h1>Simple Dojo -> PHP File Upload Example</h1>

        <form id="mainForm" enctype="multipart/form-data" name="fileTest" action="uploadReceive.php" method="post">

        <!-- you can upload x-domain. un-comment this, and the above addOnLoad to try -->
        <!-- to host: <input type="hidden"  name="name" value="" >
 -->
        <br>
        <!-- no real reason to have a div around this part -->
        <div id="uploadContainer">
                <input type="hidden" name="MAX_FILE_SIZE" value="500000">
                <!-- wrapping these in spans to be able to modify parts of this form
                        depending on what the io.iframe.submit() does -->

                <span id="preamble">File to Upload:</span><br>
                <span id="inputField">
                        <input type="file" id="fileInput" name="uploadTestFile">
                </span>
                <!--    it would be cool to be able to know the filesize to
                        update progressBar any ideas?         -->
                <span id="progressField" style="display:none;">
                        <div dojoType="dijit.ProgressBar" style="width:200px" indeterminate="true"></div>
                </span>

        </div>
        <br>

        <button type="button" value="upload" dojoType="dijit.form.Button" onclick="sendForm()">Upload</button>

        </form>

        <br><br>
        <a href="uploadReceive.phps">uploadReceive.php source</a>

        <!-- just so you can see -->
        <div id="uploadedFiles"><h3>Uploaded so far:</h3>

        </div>

</body>

it also doesnt work for me..

Submitted by matsuri on Mon, 03/10/2008 - 16:26.

it also doesnt work for me.. just tried the 1.1beta3

FF works nice.. IE doesnt do anything.. it just doesnt send the file... despite of what im doing
i tried to use it exactly as FileInputAuto does... no chance
then i tried to use FileInputAuto in IE directly.. no chance

i dont know what to do.. still a bug fixed for 1.1 release? or do i have to make a workaround on my own?

I've been using trunk (from

Submitted by dante on Mon, 03/10/2008 - 16:32.

I've been using trunk (from shortly after 1.1b3) and successfully sending files (and form data) via an io.iframe.send() call alll week in an app i'm doing (coincidentally testing ie7 now)? What is the situation surrounding the form?

there is [at the time of this writing] an outstanding dijit.form.Form bug in IE, but using iframe.send you shouldn't be using a form.Form anyway. If you need to, hide a "real form" with a valid enctype="multipart/form-data" and method="post", and append the fileinput to that form, before passing that form as the form:"" attribute in the send() call.

this here saved my day

Submitted by matsuri on Mon, 03/10/2008 - 16:46.

setImage: function(kwArgs)
{       
        // create form for file upload
        var _newForm = dojo.doc.createElement('form');
        _newForm.enctype = "multipart/form-data";
        _newForm.method = "post";

//      attaching the cloned node to newForm doesnt work in IE...
//      var node = dojo.clone(kwArgs.inputNode);
//      _newForm.appendChild(node);

        _newForm.appendChild(kwArgs.inputNode);
        dojo.body().appendChild(_newForm);
               
        if( dojo.isIE){
                encType = _newForm.getAttributeNode("enctype");
                encType.value = "multipart/form-data";
                formMethod = _newForm.getAttributeNode("method");
                formMethod.value = "POST";
        }else{
                _newForm.setAttribute("enctype", "multipart/form-data");
                _newForm.setAttribute("method","POST");
        }

        // submit form via io.iframe
        dojo.io.iframe.send({
                url:       kwArgs.url,
                form:     _newForm,
                content:        kwArgs.content,
                handleAs:       "text",
                handle:  dojo.hitch(kwArgs.scope, kwArgs.callback),
                method:         "POST",
                timeout:        "15000"
        });
               
        // cleanup form
        dojo.body().removeChild(_newForm);
        _newForm = null;
},

... makes IE to upload files :)

Thank you very much!

Submitted by frankf on Tue, 03/11/2008 - 18:09.

matsuri,

Thank you very much! for taking the time to post your solution.

I spent a bit of time narrowing down the problem (for my code), and the key is this from what you posted above:

if( dojo.isIE){
                encType = _newForm.getAttributeNode("enctype");
                encType.value = "multipart/form-data";

Looks like form.setAttribute('enctype',...) and/or form.enctype (or form.encType) don't do what IE needs.

Thanks again. Saved me a lot of pain...well, there was still a lot of pain, but much less than without your post.

Frank.

FileInputAuto

Submitted by dante on Tue, 03/11/2008 - 18:23.

fwiw, the FileInputAuto code has an almost identical solution around line 86:

var _newForm; 
		if(dojo.isIE){
			// just to reiterate, IE is a steaming pile of code. 
			_newForm = document.createElement('');
			_newForm.encoding = "multipart/form-data";
			
		}else{
			// this is how all other sane browsers do it
			_newForm = document.createElement('form');
			_newForm.setAttribute("enctype","multipart/form-data");
		}
		_newForm.appendChild(this.fileInput);
		dojo.body().appendChild(_newForm);
	
		dojo.io.iframe.send({
			url: this.url+"?name="+this.name,
			form: _newForm,
			handleAs: "json",
			handle: dojo.hitch(this,"_handleSend")
		});

Thanks, dante. Thanks to

Submitted by frankf on Tue, 03/11/2008 - 18:34.

Thanks, dante.

Thanks to your code, a bit of quick testing shows, at least for me, I can omit the "if IE" stuff and just write:

form.encoding = 'multipart/form-data';

No setAttribute for FF or IE, no enctype, either.

Thanks again, Frank.

Googled some, found that

Submitted by frankf on Wed, 03/12/2008 - 13:11.

Googled some, found that setting encoding is a standard way to set enctype, cross-browser. But to be safe, this is what I am now doing:

var form = document.createElement('form');
uploadContainer.appendChild(form);
form.setAttribute('action','#');
form.setAttribute('method','POST');
form.setAttribute('enctype','multipart/form-data'); //abundance of caution. std way to do it, but not needed if do encoding.
form.setAttribute('encoding','multipart/form-data'); //required for IE, works for others.
form.setAttribute('id','form');

Help

Submitted by dojotanhs on Fri, 03/14/2008 - 15:02.

Hi JavaDev ,
If you don't mind to share the final working copy here. I have been trying to look for the solution, but failed to achieve anything.
Which version of dojo do you work with?
Thanks.

A Simple File Upload Example

Submitted by srhrkrishna on Wed, 05/07/2008 - 10:29.

To upload a file I coded the following using dojo 1.0 release.
This works with both IE and FF.
This may not be totally optimized code but I hope this serves as a good example to dojo beginners like me.

__________________________________________________________________________________________________________________________________________________________
JavaScript coding
//The Java Script code should be in same file as the Form HTML code

<script type="text/javascript">
function uploadFile(){
               
                        // include all necessary dojo require elements including dojo.io.iframe

                        dojo.io.iframe.send({
                                url: "uploadFile.php",
                                method: "post",
                                handleAs: "html",
                                form: dojo.byId('uploadForm'),
                                load: function(data,ioArgs){
                                         dojo.byId("ResponseText").innerHTML=response.innerHTML; //Here response is an object HTML Document
                                         return response;
                                }
                        });
                }
})
</script>

__________________________________________________________________________________________________________________________________________________________
HTML Form

<!--Here we are using the general HTML form to submit the file. The onClick event will call the uploadFile() to asynchronously send the data.-->
<form id="uploadForm" method="POST" action="uploadFile.php" enctype="multipart/form-data">
      <input type="file" name="fileUploaded"><br>
      <input type="submit" value="Upload" onClick="uploadFile()">
</form>

__________________________________________________________________________________________________________________________________________________________
uploadFile.php

<div id="submitResponse">
       <?php         
                   echo $_FILES[file][fileUploaded];
                   echo "is successfully sent to the Server";
                   <!--Remaining code of moving temporary uploaded file to its destination folder and any further file manipulation can be done here-->
        ?>
</div>

__________________________________________________________________________________________________________________________________________________________
A. Sree Hari Krishna