HTML: Copy form fields to another form including FILE input field?

Question

I came to see that form file input field value cannot be set with javascript for security reasons.

I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?

UPDATE: my code:

function prepareUpload( filevalue ){

document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
    ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}

<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />

<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
            <p><input type="hidden" name="logo" id="logo" /></p>
        </form>

Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?

Answer 1

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:

<input type="file" 
       onchange="document.getElementById('hidden_file').value = this.value;" />

<form method="POST">
    <input type="hidden" id="hidden_file" value="" />
    <input type="submit" />
</form>

However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:

• Can’t get the complete address while uploading a file
• How to get the file path from HTML input form in Firefox 3

---

UPDATE:

The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file"> representation.

Further to the update, I assume you meant something like this:

<input type="file" 
       onchange="document.getElementById('hidden_file').value = this.value;" />

<form method="POST">
    <input type="file" id="hidden_file" value="" />
    <input type="submit" />
</form>

Unfortunately the above does not work. Firefox will return "Security error code: 1000" if you try the above example.

As for some workarounds, you may want to the check David Dorward's suggestions:

• Using cloneNode
• Moving the input field with appendChild before submitting the form

Answer 2

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

Answer 3

I haven't tested this in depth, but it appears to work in Firefox.

Use cloneNode

var copy = file_input.cloneNode(1);
form2.appendChild(copy);