Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at CFUNITED 2008 (Washington, D.C.) with:

Setting Form EncType Dynamically To Multipart/Form-Data In IE (Internet Explorer)

By Ben Nadel on

A while back, I posted an AJAX-Style file upload demo. While using that technique in a current project, I discovered a bit of a bug. In FireFox, you can dynamically set the EncType of a form element to be "multipart/form-data" for file uploads; however, this does not work in Internet Explorer (IE). Apparently in IE, you have to set the "encoding" of the form rather than the "enctype". The good news is, you can set both values without concern and this will take care of the problem:

  • // Using jQuery, set both the enctype and the encoding
  • // attributes to be multipart/form-data.
  • $( "form#upload-form" )
  • .attr( "enctype", "multipart/form-data" )
  • .attr( "encoding", "multipart/form-data" )
  • ;

Minor note, but wanted to write this down to help me remember.



Looking For A New Job?

100% of job board revenue is donated to Kiva. Loans that change livesFind out more »

Reader Comments

@Gareth,

I actually didn't even check that.

The angel in me would prefer to stay with "enctype" as that is what the name of the attribute actually is and therefore what the real "intent" of the attr() function is meant to be.... but if all browsers worked with "encoding", the devil in my might not care ;)

Reply to this Comment

Thanks Ben for documenting this behavior of IE. I was breaking my head for quite sometime to find out why my AJAX file upload is not working in IE.

Regards
Sudar

Reply to this Comment

Ahh, I really wish this was higher up in Google when search terms are something like "ie dynamically create upload form" or "ie upload form bug", woulda saved me a lot of time. Thanks for documenting this.

Reply to this Comment

The right-and-strict implementation should be:

$('form#upload-form').attr((this.encoding ? 'encoding' : 'enctype') , 'multipart/form-data');

Cheers!

Reply to this Comment

@Emanuele,

Good point, that is probably technically more accurate as it only applies attributes when necessary.

Reply to this Comment

Hi Ben, Again, great site. I've got another question for you. I'm trying to upload a file from flex via remoteobject with amf.

Now the coldfusion file (actually cfc method) that I'm supposed to work with used to work with a form field, html style; Using <cffile formfield= ... etc. When I'm in flex I have the file as a bytearray, but can change it to other data types if needed (string etc.). Blah Blah, here is the question. Do you know what format coldfusion is looking for when it grabs the form field that holds the reference to the file? I can't seem to find any documentation on this and I need to know it so I can try and get flex to convert to that format first and then send it as a variable to the cfc.

Reply to this Comment

@Josh,

I'm not really versed in FLEX. When a request comes into ColdFusion, I believe it just grabs the byte array of the request body and parses out the multi-part information based on delimiters. But, I don't know much about that, technically.

Reply to this Comment

Ben,

I found out that IE uses 'image/pjpeg' instead of 'image/jpeg'. As a matter of fact, enctype="multipart/form-data" works for ALL browsers for as long as you check for what it returns. IE had to return something else :))

Regards,
Ravi.

Reply to this Comment

Thanks for sharing this. It really helped me in fixing my issue. I was able to find that IE is not sending the file and using wrong Content-Type while posting data. Your post helped me in solving it. Thank you.

Reply to this Comment

Thank you. I am created the form in JavaScript and set EncType in 'multipart/form-data', but Internet Explorer do not understand this property and sended this form with enctype in 'application/x-www-form-urlencoded'. Now I've added encoding and everything started working normally.

Reply to this Comment

Very helpful ... I had this problem using Eclipse build-in browser but set the encoding property solved the issue ... Thanks a lot

Reply to this Comment

THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU! THANK YOU!

I banged my head on this problem for half a week before I stumbled across this little gem...

Reply to this Comment

Hi Ben,

In Internet Explorer 8.0.6001.18702, I faced a problem of access to the property "enctype" of the form.
To solve the problem, I used the following line of code:
$ ('form # upload-form'). get (0). encoding = 'multipart/form-data';

To remove the encoding, use 'text/plain' for example.

Congratulations for this site!
Best regards

Reply to this Comment

i am using VS 2010
when i i remove this line
//form.attr("enctype", "multipart/form-data");
from the code. the iframe.load triggers but the file dos not reach the server.
on the other hand if i leave this line.
the files received by the server but the even will not be triggered.

any help please.

Reply to this Comment

Use jQuery attrHook to solve the pb!

$.attrHooks.enctype = {
get: function( elem ) {
return $.nodeName( elem, 'form' ) ?
elem.encoding || elem.enctype :
null;
}
,set: function( elem, value ) {
if ( $.nodeName( elem, 'form' ) && elem.encoding )
elem.encoding = value;
}
};

Reply to this Comment

I prefere do this:

$('input[type=\"file\"]').each(function(i, it) {
$(it).closest('form').attr('enctype', 'multipart/form-data').attr('encoding', 'multipart/form-data');
});

this code stays at my global.js an any form ho had file input be right.

Reply to this Comment

Hello ben.
I'm taking enctyple problem and i didnt set yet. How can i set my codes ? Can you help me please? My codes are;

$.ajax({
type: 'POST',
url: 'resimekle.asp',
data: $('#resimekleme').serialize(),
success: function(ajaxCevap2) {
$('#resimeklesonuc').html(ajaxCevap2);
}
});

I must add enctype to date area. How can we do this ? Thank you before your help.

Reply to this Comment

Hello Bilal,

I think you are looking for this:
$.ajax({
type: 'POST',
url: 'resimekle.asp',
data: $('#resimekleme').serialize(),
},
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: function(ajaxCevap2) {
$('#resimeklesonuc').html(ajaxCevap2);
}
});

See you around Charlotte soon :)
Henry

Reply to this Comment

@Henry,
First of all thank you for your help. But it doent work. I tried again and took same error.

POST http://localhost/bartu2/adminpanel/resimekle.asp 500 (Internal Server Error) uygulamaresim.asp:19
o.extend.ajax uygulamaresim.asp:19
rle uygulamaresim.asp (2):4
onclick

All my codes are here. Can you check again for me ?

form.asp

<script language="javascript">
function rle(){
$("#resimeklesonuc").html('<img src="../imgs/loading.gif" />');
$.ajax({
type: 'POST',
url: 'resimekle.asp',
data: $('#resimekleme').serialize(),
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: function(ajaxCevap2) {
$('#resimeklesonuc').html(ajaxCevap2);
}
});
}
</script>

<h2>Resim Ekle</h2>
<form id="resimekleme" method="post" enctype="multipart/form-data">
<div>Resim AƧ?klamas? : </div><input name="resimaciklama" type="text" style="width:200px;" /><br/>
<div>Resim : </div><input name="dosya" type="file" /><br/>
<input name="resimekle" value="Resim Ekle" onclick="rle()" type="button" />
</form>
<div id="resimeklesonuc"></div>

resimekle.asp

<%
Set upload = server.CreateObject("Persits.Upload")
upload.save
aciklama=upload.Form("resimaciklama")
on error resume next
set dosya=upload.Files("dosya")
response.Write dosya.filename
%>

Thank you

Reply to this Comment

Is there any issue with setting the default enctype of a form to multipart/form-data if there are no files uploaded? I am making a form that uses a flash system for uploading and falls back to a regular file input for non flash users. I was going to default the form to allow for the file uploads but I suspect the majority of my users will have flash running on their system.

Great site Ben, I keep stumbling across it and now you are bookmarked :)

Reply to this Comment

Thanks a lot.

After struggling for a day came across your blog. It just resolved my issue within minute.

Appreciate your effort for providing solution and publishing it on the web.

Reply to this Comment

Hi,

I want to upload multiple files in one shot. I was using FormData component. Now problem is FormData is not supporting in IE... Can you please help me in this?

Thanks in advance.

Thanks,
Pritee

Reply to this Comment

Post A Comment

You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.