9

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?

5 Answers 5

7

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:


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:

5
  • Thanks a heap, Daniel. That's a brilliant idea. Now the problem is none of the values are available on the server side, that is the uploaded array is empty( name, size, tmp_name etc has no values with FireFox 3.1). Why? - Apache httpd server with PHP.
    – pMan
    Feb 8, 2010 at 9:53
  • @pMan: Would it be possible to update your question with a small snippet from your HTML and PHP? Feb 8, 2010 at 10:13
  • 1
    The other thing you won't be able to see if you copy the value of a file input into a hidden input … is the file!
    – Quentin
    Feb 8, 2010 at 13:10
  • @David. Yes, you're right. I upvoted your suggestions and referenced them in my answer, since it is still on top. The original question before the update made it seem that OP was looking to copy the file name only, and not the whole field. Feb 8, 2010 at 14:16
  • Sorry for the delay, as it was very urgent, I did it with two forms. But here is two solutions. Thanks Daniel and David.
    – pMan
    Feb 10, 2010 at 10:17
5

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

4

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);
0
0

Very much similar to cloneNode except in jQuery

In an xulrunner browser (like firefox) I have successfully used something like the following:

$('input:file').clone().appendTo($('#mainform'));

This should copy all file input objects into the form with id=mainform.

Avoid using the id attribute in the objects to be cloned. id's should always be unique.

1
  • 1
    This doesn't work in Chrome 31. The value of the new input is empty.
    – hectorct
    Dec 1, 2013 at 20:35
0

I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]

1
  • can you change jsFiddle? I don't understand your answer :-( Dec 21, 2015 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.