javascript handling fileupload through popup

Since the dawn of Ajax everyone tries to implement it even more often than before.


I, for instance happen to work on an old project, which already uses ajax technology for about 2 years. There is a form where the user can enter data and at one part you can add additional information indefinetly by clicking on a button which generates a popup to add the data, then click on save and the data is in the form.

Everything was fine, until i had to also add files ... and that was a little tricky. Everyone knows
that you can't change the value of a file input field for security reasons. But i had to find a way the user can add a file in the popup and then it apears in the form.

The idea took about 12 Seconds.. the implementation took longer ;-)

In the Popup i have a js Routine that sends the data to the js Function of the Form. I changed it so it also sends the File Input field with it. (document.getElementById();)

The Form Function takes the data and build the new elements into the dom. Now i look for the File Input Field and if i get it, i just append it where i need it.

So i have the Input Filed moved from the popup into my Form with all the data it has in it. Now i can submit the Form and get the Files i added in the popup.