How to dynamically create a file input and give it a value?
Hi to all,
The following post is meant for Java script rookies like me. What is it I wanted to say? Well, for some time now, I have been working on this project that required of me, among other things, to dynamically establish the number of files a client wants to submit to a site, define those files and submit them. All this was meant to be done by client-side scripting, meaning Java script, cause VB script has a limited number of users.
Nevertheless, what needed to be done was pretty obvious. I had to make up some file inputs dynamically and that's quite easy.
One can make any html element and attach it to a viewed document. For those who do not know it, it is called Document Object Model, meaning elements in a documents are all objects with their properties, methods etc. I trust there are only two html elements that can not be dynamically added and those are frame and iframe, though IE should support the later one, too. For that fact, Mozilla is following the pattern.
So, how does one make an element dynamically? I will put code for input (type=file) creation. One must make a JS function to call:
var inputX = document.createElement('input');
inputX.type='file'; //other than file, type can be any valid html input type
inputX.name='inputFile01'; //some name you make up for the generated file input
inputX.id='inputFile01'; //same name as above
inputX.style.zIndex=7; //if you wan to define style for the generated file input it's easy
document.getElementById('myForm').appendChild(inputX); //this attaches the input to a form called myForm in the document
Well, it's really easy, isn't it. For the style part it is like this, a property in CSS is named like 'border-top', but in JS you need to put 'borderTop'. Simple.
However there's a point I want to share, so let's go on. As I said, the objective was to dynamically establish how many files a client wants to submit, define those files, create file inputs and submit the whole thing.
Everything seemed easy in the beginning, cause Mozilla, Netscape and MS documentation provide nice information on this topic. Imagine there was another line in the code of the function above, which said:
inputX.value='C:\someFile.txt'; // this value presents a path to a file on a hard drive
I had this file dynamically established, but not out of blue, it was in fact defined by a user, but not by the regular method of clicking the browse button of a file input field.
So, what was going on. I was able to create an additional file input field and define properties for it, everything went smooth. I was able to submit the file input field values to check which files were supposed to be submitted. Everything worked, but the server never got the files!
After busting my 'bees' for some time and checking the documentation I decided one thing. There was no way one could programmatically define values for file inputs. Some security issues came to my mind. Five minutes later a friend of mine showed me a couple of posts by different guys, who were trying to do the same thing as I did, but failed.
The thing is that, if it was possible to programmatically define values for file inputs, a server could rip any file from a clients computer and that's just a no no.
To someone this all might seem rather trivial, but as I said in the beginning it's a "rookie thing". Someone not truly familiar with DOM or moderate experience could easily fall in the trap. Additionally, all the documentation is saying is how to define a value. It says nothing about it not being possible. But in fact it is impossible. I'm sure there are certain ways to do it, if you are MS or someone like it, but for mortals, it's a no no.