Question

43

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

rated 0 times [ 50] [ 7] / answers: 1 / hits: 28508 / 15 Years ago, mon, february 8, 2010, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

breanab

Add To Favorites

Follow

Total Points: 731

Total Questions: 95

Total Answers: 79

Location: Liberia

Member since Fri, Oct 22, 2021

3 Years ago

answered 15 Years ago haylie · Accepted Answer

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