Question

i have a form which has a file input element and when the user selects the file i want to set the selected file to another file input which is in hidden iframe,

this is what is my form:

<form name="uploadForm" >
    <input type="file" id="fileone" name="fileone" value="" />
    <button type="button" id="attachement_upload" onclick="addFile()" >Upload</button>
</form>
<iframe id="FileUploadFrame" name="FileUploadFrame" src="" style="display: none; border: 0; width: 0; height: 0;">
    <form id="FileUploadForm" name="FileUploadForm" accept-charset="utf-8" target="FileUploadFrame" enctype="multipart/form-data" encoding="multipart/form-data" method="POST" action="CIMtrek_Regional_WhseForm_FileUpload">
        <input type="file" id="filetwo" name="filetwo" value="" />
    </form>
</iframe>

and my java script :

function addFile(){
    //this is where i want to clone the fileone to filetwo and submit the form which is in iframe
}

I have seen some thing like this but really don’t know how to do :

$(".inputfield1").change(function(){
  var $this = $(this), $clone = $this.clone();
  $this.after(clone).appendTo(hiddenform);
});

Please help me to get this done.

Answer 1

You can’t (or shouldn’t) be able to do this. The file input type, given that it has direct access to the user’s file system, has special security restrictions. Most notably you cannot set the value of a file input in JavaScript, as this would allow you to do things like set it to something like ~/.ssh/id_rsa and steal important data without the user being aware. As a consequence, jQuery shouldn’t be able to clone the file input because it can’t set the value.

To get this to work you’ll have to let the user click on the file input that is in the iframe, perhaps using some CSS positioning tricks to make it seem part of the page. Alternatively, if your users typically have more modern browsers, you could use the File API and upload the file with Ajax.