title: Hidden form file POST in javascript
body: <p><a href="https://bugbase.adobe.com/index.cfm?event=bug&amp;id=2926796" rel="nofollow noreferrer">Because of a Flex bug uploading files in a secure environment</a>, I'm attempting to hack together a workaround for this in javascript.</p>
  <p>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.</p>
  <p>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.</p>
  <p>Here's the code I'm current playing with.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
     &lt;head&gt;
        &lt;meta charset=&quot;utf-8&quot;&gt;
        &lt;title&gt;hidden form post demo&lt;/title&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
        &lt;script&gt;
        
           //helper function to create the form
           function getNewSubmitForm(){
               var submitForm = document.createElement(&quot;FORM&quot;);
               document.body.appendChild(submitForm);
               submitForm.method = &quot;POST&quot;;
               submitForm.enctype = &quot;multipart/form-data&quot;;
               return submitForm;
           }
           
           //helper function to add elements to the form
           function createNewFormElement(inputForm, inputType, elementName, elementValue) {
               var inputElement = document.createElement(&quot;INPUT&quot;);
               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(&quot;selectedFile&quot;);
               var selectedFile = selectedFileElement.files[0];
               createNewFormElement(submitForm, &quot;HIDDEN&quot;, &quot;xml&quot;, &quot;my xml&quot;);
               createNewFormElement(submitForm, &quot;FILE&quot;, &quot;selectedFile&quot;, selectedFile);
               submitForm.action= &quot;my url&quot;;
               submitForm.submit();
           }
           
        &lt;/script&gt;
  
  
        &lt;div id=&quot;docList&quot;&gt;
          &lt;h2&gt;Documentation List&lt;/h2&gt;
          &lt;ul id=&quot;docs&quot;&gt;&lt;/ul&gt;
        &lt;/div&gt;
  
        &lt;input type=&quot;file&quot; value=&quot;Click to create select file&quot; id=&quot;selectedFile&quot;/&gt;
        &lt;input type=&quot;button&quot; value=&quot;Click to create form and submit&quot; onclick=&quot;createFormAndSubmit()&quot;/&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>You can see, I have a try/catch block in <code>createNewFormElement</code>.  An exception is being thrown there, but the message says &quot;undefined&quot;.</p>
  <p>In FireBug, I can see that the <code>elementValue</code> is set to a File object, so I'm not really sure what's going on.</p>