Friday, February 6, 2009

Clone node issue in IE

Hi all,

I am writing after a long time.
If you are wondering why so long?
didnt I had anything worthwhile to type?
Yes, I didnt had anything to write, coz whatever I learnt in last few months its well documented all over internet.
Not to forget an important fact that during my free time last year i Played a lot with my Canon SLR-Like Camera.
You can check my photography @ Sinless Photography

But this Time again our big time sucker IE(Internet Explorer) showed his ugly face and delayed our work and entangled us in DOM herarchies.

IE Sucks it AGAIN.

cloneNode doesnt work for all elements in IE.
yes
cloneNode doesnt work for all elements in IE.

My Problem.
I wanted to upload an image form without submitting the original form (in page1).
What I wanted to do:
1. Created a hidden form outside original form.
2. Copy / Clone input (type = file) element from original form to hidden Form.
3. Submit hidden form via JavaScript and view output in a frame (in page1).

What I did:
1. var clonedFileObject = document.forms['originalForm'].fileElement.cloneNode(true);
( where fileElement is input type = file element)
2. document.hiddenForm.appendChild(clonedFileObject);
3. hiddenForm.submit();

And What Happened.
var clonedFileObject = document.forms['originalForm'].fileElement.cloneNode(true);
Above statement worked perfectly fine in Firefox but in IE nothing happened.
No cloning was done and on form submission / image upload button All I could see was empty $_FILES array with error code = 4.

What all I tried:
1. hiddenForm.fileElement.value = originalForm.fileElement.value // didnt in FF either
2. Created a outer div and copied innerHTML of first div to hiddenforms div // didnt worked for input type file (didnt wasted much time either...should have worked)
3. Finally I did a shabby Patch work in my code which i really hated but in the given time limit and set conditions this was only I could think of.
var OriginalFileObj = document.getElementById('fileElement');
//this will remove fileElement from Original Form

var clonedFileObj = OriginalFileObj;
document.hiddenForm.appendChild(OriginalFileObj);
document.hiddenForm.submit();
divObj.appendChild(OriginalFileObj); //restoring of original file object in original form
//if you dont do this there wont be any file object in original form


I am sure there would be other better ways to do the same.
If you are aware of it please add in comments so as others can benefit from you including me.

9 comments:

Anonymous said...

You might want to take a look at this page at MSDN that talks about how to use cloneNode with an iframe. Maybe it will help you.

Anonymous said...

cloner.sourceforge.net - this class is all you need when trying to clone some complex HTML structure using JavaScript. it works great both under IE and Firefox and other browsers as well.

Anonymous said...

Genial fill someone in on and this post helped me alot in my college assignement. Thank you as your information.

Anonymous said...

Well I assent to but I dream the post should acquire more info then it has.

Anonymous said...

Good brief and this mail helped me alot in my college assignement. Gratefulness you seeking your information.

Anonymous said...

Good fill someone in on and this enter helped me alot in my college assignement. Thanks you for your information.

Anonymous said...

Great work! Works perfectly and since JavaScript is all made of workarounds, you did it gracefully! Thanks for saving my time doing the same thing!

sakthi said...

huhhhhhhhh!!!! thanks a lot dude its saved my time a lot!!! i am leaving home early today because of you, of course i have learnt a new thing too!!! cheers :)

Unknown said...

I tried this but its not working for me getting empty array in server side
i am using ie8.