Monday, April 13, 2009

Making File Uploads Work in IE6 and 7

So, I'm developing a web application at home with Linux OS and Firefox web browser. Then I deploy it on a Windows OS and a IE Web Browser.

...

Yeah I know how dumb and risky it sounds, problem is I can't afford a new computer right now, so I use Ubuntu 8.10 for developing, and the target server for my developed web app is Windows.

You know cross-browser compatibility is always a headache, and this it's all true for File Uploads.

I use PHP, and for some reason, the file upload feature wouldn't work in IE Browser. WHYYYY!!

I spent almost 3 hours on forums and finally found the reason: ENCTYPE. All file upload features warn you: You have to change your form enctype attribute to "multipart/form-data" in order that the file input contents can travel through the request.

Well... I DO! SO WHAT'S WROONG?!!

As I use an admin page with header, left navigation pane and content areas, I use the same form for several different features. And I have a feature which uploads files.

Hence, I dynamically change the ENCTYPE attribute through javascript. And after hours of trying to explain myself "why in the world is this not working if I'm doing everything right", and just before I start blaming the elves or believing I was coursed, I found this page: http://www.talkphp.com/javascript-ajax-e4x/1176-form-enctype-internet-explorer.html

It turns to be that for Internet Explorer, the W3C STANDARD enctype attribute is NOT ENOUGH. I have to set this particular ENCODING attribute as well, so my code ended up like this:

form.enctype = "multipart/form-data";
form.encoding = "multipart/form-data";
form.submit();

Yeah, I addded the form.encoding=... line and it worked perfectly.

Thanks Wildhoney @ talkphp forum!

Now I am compelled to spread the words of wisdom to all you programmers that have lost hope. No, you're not cursed, you just didn't know.

PS. Yes, my writing style today is a little bit crazy, that's what's left of an stressed mind after 3 hours of trying to find a logical reason to an error that shouldn't be there in the first time. Now I'll take some rest and no more coffee for me.

GREETINGS!

Saturday, April 4, 2009

Overcoming AJaX UTF-8 Encoding Limitation (in PHP)

I've been learning a lot about PHP, MySQL programming through a project I've been working on for 2 months.

I didn't know AJaX, actually. And when I find any challenge that takes time and a lot of headaches to overcome, I share the solution for the sake of saving people some time and bad moments.

My web application is in Spanish (latin american characters), and I use AJaX to show search results paginated, in order to make it simpler and faster to go through the results, sort them, etc...

And the results include words in Spanish, containing characters not supported in UTF-8, AJaX won't show those characters correctly.

And no, there's no way, so far I've researched, to change the UTF-8 character set for the XMLHttpRequest object; setRequestHeader("Content-Type", "...; charset=ISO...") won't work.

Some pages say you may encode the URI you are sending, and decode the responseText and you're all set. I assume encoding the URI applies when using GET method, or when using non-UTF-8 characters in the parameter values, but not to make the responseText UTF-8 compliant. I can't decode a responseText that was never encoded. And I wasn't able to decode the responseText when assigning it to the containing element.

So I finally found the solution on a web page, much simpler than what I would imagine: encode the string representing the HTML string at the server-side to UTF-8 before returning it.

In PHP, it's like this:

$html = "... all my html response text here ...";
echo(utf8_encode($html));

or whatever way you decide to do it, the fact is, encode the response text with ut8_encode() before printing it or returning it.

Also, very important, make sure the HTML page receiving the responseText has the appropriate character encoding.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

I assume it'll work pretty much the same way on other programming languages; simply encode the response text server side before responding, and make sure the receiving page character set is utf-8.

Hope it is helpful for anyone.

Greetings!