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

Posted June 27, 2008 at 10:07 AM by Ben Nadel

Tags: Javascript / DHTML

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.


You Might Also Be Interested In:



Reader Comments

Jun 27, 2008 at 12:43 PM // reply »
110 Comments

Does firefox also work with "encoding" rather than just "enctype"? Would save you an extra line :).


Jun 27, 2008 at 12:47 PM // reply »
10,640 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 ;)


Feb 11, 2009 at 8:59 AM // reply »
1 Comments

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


Feb 11, 2009 at 10:08 AM // reply »
10,640 Comments

@Sudar,

Glad to help! Yeah, it was really frustrating coming up against this for the first time.


Mar 13, 2009 at 9:23 AM // reply »
1 Comments

in opera and firefox also work whit "encoding". Thanks for the tip!


Mar 13, 2009 at 9:28 AM // reply »
1 Comments

thanks for the tip. this has saved me hours of recoding!


Mar 19, 2009 at 1:30 AM // reply »
1 Comments

Thank you very much.


May 12, 2009 at 11:36 PM // reply »
6 Comments

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.


May 13, 2009 at 7:29 AM // reply »
10,640 Comments

@Anon,

Well, I'm glad you made it here eventually, even if a little delayed :)


May 15, 2009 at 4:44 PM // reply »
1 Comments

Thanks, helped one I had the inspiration to google it!


Aug 14, 2009 at 12:21 PM // reply »
1 Comments

Thanks, now working...


Aug 17, 2009 at 2:10 PM // reply »
10,640 Comments

@Mon, @yoyok,

Awesome fellas. Glad to help.


Aug 23, 2009 at 11:12 PM // reply »
1 Comments

Thanks for the useful post, save me lots of time.


Feb 6, 2010 at 4:47 PM // reply »
1 Comments

The right-and-strict implementation should be:

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

Cheers!


Feb 6, 2010 at 4:56 PM // reply »
10,640 Comments

@Emanuele,

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


Jul 16, 2010 at 5:30 PM // reply »
1 Comments

YEE HAWW!! This post saved my bacon!!! Thanks!!


Jul 18, 2010 at 11:31 AM // reply »
10,640 Comments

@King,

Ha ha, no problem with the bacon :)


Sep 17, 2010 at 8:03 PM // reply »
3 Comments

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.


Sep 17, 2010 at 9:50 PM // reply »
10,640 Comments

@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.


Nov 15, 2010 at 7:04 AM // reply »
1 Comments

Great! I was getting mad with this bug!


Dec 11, 2010 at 10:48 AM // reply »
2 Comments

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.


AB
Dec 30, 2010 at 7:16 AM // reply »
1 Comments

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.


Jan 13, 2011 at 8:58 AM // reply »
1 Comments

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.


May 24, 2011 at 5:05 PM // reply »
1 Comments

very helpful, many thaaaaaaaaaaaaaaaaaanx


Jun 25, 2011 at 2:37 PM // reply »
1 Comments

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


Jun 29, 2011 at 2:59 PM // reply »
1 Comments

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...


Jun 29, 2011 at 3:01 PM // reply »
10,640 Comments

@Ben Holland,

Ha ha, thanks :) Glad this helped you!


Sep 8, 2011 at 12:21 PM // reply »
1 Comments

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



Post A Comment

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.

Please review the following issues:

Author Name:


Author Email:

Author Website:

Comment:

Supported HTML tags for formatting: <strong>bold</strong>   <em>italic</em>   <code>code</code>







  • Help Wanted - Find Your Next ColdFusion Job
InVision App - Prototyping Made Beautiful With Prototyping Tools Ben Nadel's Company - Epicenter Consulting Recent Blog Comments
Feb 12, 2012 at 3:37 AM
Learning ColdFusion 8: CFImage Part III - Watermarks And Transparency
Hi Ben, Just to ask currently it is placed bottom right corner, if i need to replace the same rendered image on the bottom left side or in the bottom center, how that can be calculated. bottom ce ... read »
Feb 11, 2012 at 9:29 PM
Use jQuery's SlideDown() With Fixed-Width Elements To Prevent Jumping
I can't say how glad I am that I found your post. Thank you very much. ... read »
Feb 10, 2012 at 7:21 PM
jQuery AJAX Strips Script Tags And Inserts Them After Parent-Most Elements
Update! Instead of $(eval(options.insertAfter)).after(data['insertData']); I now use: var ajaxNode = document.createElement('span'); var parent = $(eval(options.insertAfter))[0].parentNode; ... read »
Feb 10, 2012 at 6:18 PM
jQuery AJAX Strips Script Tags And Inserts Them After Parent-Most Elements
encountered this same, what I consider, jQuery bug last week. I'm building a site in which I load some content via AJAX. This content contains Linkedin share button placeholders which Linkedin API ne ... read »
Feb 10, 2012 at 11:30 AM
Cross-Origin Resource Sharing (CORS) AJAX Requests Between jQuery And Node.js
After you understand the concepts here, this is an awesome cheatsheet for enabling CORS in just about anything http://enable-cors.org/ ... read »
JM
Feb 10, 2012 at 9:10 AM
My Safari Browser SQLite Database Hello World Example
@Amy, Here is a very good tutorial on how to use JOIN: http://www.sqltutorial.org/sqljoin-innerjoin.aspx ... read »
Feb 10, 2012 at 4:42 AM
Building A Twitter-Inspired RESTful API Architecture In ColdFusion
This is great, very useful Ben. I spotted a small typo in the api.cgm listing: <cfthrow type="Unauthroized" /> Cheers Stefan ... read »
Feb 9, 2012 at 10:35 PM
CFDirectory Filtering Uses Pipe Character For Multiple Filters (Thanks Steve Withington)
I was wondering if there would be a filter you could apply so that you got everything but what you included in the filter. As in show me all docs that are not a .pdf. ... read »