HTML Form for File Upload - generate by JavaScript

Question

I've been trying to create and submit a form with JavaScript for file upload to my web server. I've read that the input type="file" cannot be autopopulated by JavaScript because of security reasons. That being the case, how can I send a POST command to upload my file?

I realise the code snippet below won't work becase of this fact but how can I do it?

What I'm hoping to do in the end is call this function for a number of file that the user will drag and drop so they'll be in an array. I don't have PHP on my webserver (it will only hand simple HTTP commands).

 function uploadFile( fileName )
   {
     var form     = document.createElement("form");
     var element1 = document.createElement("file");

     form.method  = "post";
     form.action  = "upload.html";
     form.enctype = "multipart/form-data";
     form.charset = "utf-8";

     element1.value = "/Temp/TestFile.txt";
     element1.name = "upload1";
     form.appendChild( element1 );

     document.body.appendChild( form );

     form.submit();
   }

After reading the first link provided by Tom, this is what I came up with:

   function uploadFile( fileName )
   {
     var form     = document.createElement("form");
     var element1 = document.createElement("file");

     form.method  = "post";
     form.action  = "upload.html";
     form.enctype = "multipart/form-data";
     form.charset = "utf-8";

     element1.value = "/JScript/TestText.txt"
     element1.id    = "fileselect";
     element1.name  = "fileselect[]";
     element1.multiple = "multiple";
     form.appendChild( element1 );

     document.body.appendChild( form );

     form.submit();
   }

..but I don't understand the use of fileselect[].. That I would understand to be an array but how do I populate an array and then assign it back to the HTML element? Say for example I only have one file to post back which is /JScript/TestText.txt .. how do I assign fileselect[0]="/JScript/TestText.txt"; and then feed it back into 'element' for submission?

First, the input file element should be created with document.createElement("input") instead of document.createElement("file"); — sdabet
– sdabet, Commented Feb 7, 2014 at 6:58
your code will not work you are trying to achieve an impossible task i guess — Sora
– Sora, Commented Feb 7, 2014 at 7:21

Tom McQuarrie · Accepted Answer · 2014-02-07 07:21:43Z

2

Correct you can't populate the value of a file input. If you could, you could access any file on a user's computer, which would be a huge security issue.

Also, you won't be able to upload the file to the server at all without server-side scripting of some kind to validate the file and store it to the correct location. If it was possible to do that with just apache, a visitor to your site could upload whatever they wanted to your server, including viruses.

If you do manage to get server side uploads working (I would test with a static html form with a standard file input field first), then in order for you to accept a file via drag and drop and push that file to the server you'll need the html5 file api. Plenty of tutorials like this one.

If you want something robust that will work easily cross platform, have a look at something like PlUpload which achieves everything you want, from the client side at least.

answered Feb 7, 2014 at 7:21

Tom McQuarrie

1,1479 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SparkyNZ Over a year ago

@Tom: Thanks -I think there's one very valuable line in there which could solve my problem! :-) I do have the server source code. Last night it had me learning all about HTTP messages, multi-part forms and boundaries etc.. The problem with the many tutorials is that there's so much 'noise' when you're trying to focus on one fundamental thing. I'm itching to learn about AJAX etc but I'd like to start with the simple stuff first. Thanks.

Collectives™ on Stack Overflow

HTML Form for File Upload - generate by JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related