CODEWITHSUNDEEP
javascriptformsfile-upload
Vinnie
Vinnie

Reputation: 12730

Hidden form file POST in javascript

Because of a Flex bug uploading files in a secure environment, I'm attempting to hack together a workaround for this in javascript.

To do so, I'm attempting to create a hidden form in javascript, to which I'll attach a file and some xml meta data, then send it to the server in a multipart form post. My first thought is to get this to work in HTML and then port this javascript code into my Flex project.

My first problem is attaching the file to the hidden form in javascript. I'm doing something wrong here. I'm pretty inexperienced with javascript so if there's a better way to do this, I'm eager to learn.

Here's the code I'm current playing with.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>hidden form post demo</title>
   </head>

   <body>
      <script>
      
         //helper function to create the form
         function getNewSubmitForm(){
             var submitForm = document.createElement("FORM");
             document.body.appendChild(submitForm);
             submitForm.method = "POST";
             submitForm.enctype = "multipart/form-data";
             return submitForm;
         }
         
         //helper function to add elements to the form
         function createNewFormElement(inputForm, inputType, elementName, elementValue) {
             var inputElement = document.createElement("INPUT");
             inputElement.name = elementName;
             inputElement.type = inputType;
             try {
                inputElement.value = elementValue;
             } catch(err) {
                alert(err.description);
             }
             inputForm.appendChild(inputElement);
             return inputElement;
         }
         
         //function that creates the form, adds some elements
         //and then submits it
         function createFormAndSubmit(){
             var submitForm = getNewSubmitForm();
             var selectedFileElement = document.getElementById("selectedFile");
             var selectedFile = selectedFileElement.files[0];
             createNewFormElement(submitForm, "HIDDEN", "xml", "my xml");
             createNewFormElement(submitForm, "FILE", "selectedFile", selectedFile);
             submitForm.action= "my url";
             submitForm.submit();
         }
         
      </script>


      <div id="docList">
        <h2>Documentation List</h2>
        <ul id="docs"></ul>
      </div>

      <input type="file" value="Click to create select file" id="selectedFile"/>
      <input type="button" value="Click to create form and submit" onclick="createFormAndSubmit()"/>
</body>

</html>

You can see, I have a try/catch block in createNewFormElement. An exception is being thrown there, but the message says "undefined".

In FireBug, I can see that the elementValue is set to a File object, so I'm not really sure what's going on.

Upvotes: 0

Views: 4928

Answers (2)

Rob W
Rob W

Reputation: 349102

For security reasons, you cannot set the value attribute of an input[type=file]. Your current code doesn't need JavaScript, and can be written using pure HTML:

<form method="post" enctype="multipart/form-data" action="myurl">
    <input type="file" value="Click to create select file" name="selectedFile" />
    <input type="hidden" name="xml" value="my xml" />
    <input type="submit" value="Click to create form and submit" />
</form>

If you want to, it's possible to dynamically add additional non-file form elements, by binding an event to the onsubmit handler.

<form ... onsubmit="addMoreinputs();" id="aForm">
...
<script>
function addMoreInputs(){
    var form = document.getElementById("aForm");
    // ...create and append extra elements.
    // once the function has finished, the form will be submitted, because
    //  the input[type=submit] element has been clicked.
}

Upvotes: 4

sjbwylbs
sjbwylbs

Reputation: 151

add var dom=document.getElementById("formdiv"); dom.appendChild(submitForm);

in your createFormAndSubmit function. and add <div id="formdiv" /> on your page.

Upvotes: 0

Related Questions