+ Reply to Thread
Results 1 to 6 of 6

Thread: How to dynamically create a file input?

  1. #1
    Moderator airnine is on a distinguished road
    Join Date
    Jan 2004

    How to dynamically create a file input?

    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:

    function makeInput(){
    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
    inputX.style.border='inset 2px';
    document.getElementById('myForm').appendChild(inpu tX); //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.

    Airnine is a developer @

  2. #2
    Full Member bling is on a distinguished road
    Join Date
    Jan 2008
    thanks for this

  3. #3
    Newbie VirtualAssist is on a distinguished road
    Join Date
    Jun 2010

    How to dynamically create a file input?

    This is what you do:
    1. Decide a location in your file/web server where you want to store all
    your files.
    For eg. String path = "c:\\local\\";
    String fileName = path+request.getParameter("ChapNo");//Here ChapNo is the
    name of the parameter that reads in the chapter no as supplied by the user.
    Create a file object taking the chapter no. as the filename
    For eg. File dynFile = new File(fileName);
    boolean fileCreated = dynFile.createNewFile();

    2. Read in the contents from the request object and write them to the file
    For this, you can use a FileWriter object.
    For eg. FileWriter fw = new FileWriter(dynFile);
    fw.write(request.getParame ter("contents")); //Here contents is the name of
    the parameter that reads in the contents from the user.

    3. Check for any exceptions, if there arent any, then proceed with updating
    the database with the filepath. So in the database, store just the path of
    the file, not the entire file object itself, so that you can read back the
    path and pick up the file from your server and read out the contents back as
    per requirements.
    For eg. "insert into <table> (filepath) values ("+fileName+")";

  4. #4
    Full Member johnnixon84 is on a distinguished road
    Join Date
    Jan 2011
    Thanks for the thread which describes how to create dynamically a file input. Excellent information provided.

  5. #5
    Newbie mith is on a distinguished road
    Join Date
    Mar 2011
    AVCHD is a camcorder video format used by a variety of camcorder manufacturers. As AVCHD camcorders go popular on the market, recorded AVCHD video can not playback on many video players or portable devices, to convert avchd videos on Mac you need a powerful yet easy-to-use AVCHD Converter for Mac.

    Tanbee AVCHD Converter for Mac is a full-featured tool for AVCHD camcorder users, which can convert AVCHD videos (MTS, M2TS, MOD, MOD) to common videos including AVI, MOV, MPEG, WMV, MP4, 3GP, FLV, SWF, and HD videos like HD AVI, HD MOV, HD MPEG, HD WMV. So you can share your masterpieces shot by Sony, Panasonic, JVC, Canon, Hitachi AVCHD camcorder on your favorite digital devices and more multimedia players.

  6. #6
    Newbie tanyue123 is on a distinguished road
    Join Date
    May 2011

    HID Kit

    Do you have troubles about how to choose HID Kit? there are so many brands, and you can not distinguish which is the best HID Kit you need, here, i would like to recommend this VVME HID Kit, which is cheap, reliable, and almost identical to the factory HID on the tractors and they are not blue like other kits. for more info, please visit http://www.vvme.com.
    You may also interested in:
    Bi-Xenon HID Kit
    HID Conversion Kit
    Hi/Low HID Kit

+ Reply to Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts