trigger file upload dialog using javascript/jquery

32
votes

instead of using <input type="file">, is it possible to use <input type="text"> and then script it using javascript or jquery such that when the text box is clicked, the file upload dialogue shows up.....(and have it actually uploaded when it's submitted into a form)

5
javascriptjqueryhtmlfile-uploadtextbox
Why would you want to do this? an upload input type does exactly that – qwertymk
You might want to look at one of the many available jQuery file uploader plugins rather than doing it yourself. * Ajax Upload * Uploadify – Mike Ruhlin
yea well, basically i don't want the browse button to show up...pretty much – kamikaze_pilot
If you are using jQuery File Upload, you can achieve this by html and css: <span class="fileinput-button"><input type="file" name="files[]" multiple=""></span>. – Trantor Liu

5 Answers

88
votes

You mean something like this?

http://jsfiddle.net/CSvjw/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    $('input[type=text]').val($(this).val());
});

Note, though, that the value given by the file input is fake for security reasons. If you want to just have the file name show up, you can cut out the slashes.

Here's an example of how to do it using a string split and an array pop:

http://jsfiddle.net/CSvjw/1/

$('input[type=text]').click(function() {
    $('input[type=file]').trigger('click');
});

$('input[type=file]').change(function() {
    var vals = $(this).val(),
        val = vals.length ? vals.split('\\').pop() : '';

    $('input[type=text]').val(val);
});

You can adjust this further to account for systems that use a forward slash as the directory separator. It's also important to note that if you do this, you'll lose the functionality of many modern browsers where users can drag files from their computer directly onto a file input. If I were you, I'd embrace that paradigm by styling the file input rather than trying to turn a text input into something that it is not.

8
votes

And if the HTML code has identical multiple inputs like this one below:-

<div class="item">
<input type="text" />
<input type="file" />
</div>
<div class="item">
<input type="text" />
<input type="file" />
</div>​​​​​​​​​​​​​​​​​​​​​

Expanding on @treeface's answer, the Jquery code (current version 1.8.0) would be:

$('input[type=text]').click(function() {
    $(this).parent(".item")
        .find('input[type=file]')
        .trigger('click');
});

$('input[type=file]').change(function() {
    $(this).parent(".item")
        .find('input[type=text]')
        .val($(this).val());
});​

Do take note between $parents() and $parent() in jQuery. Try it out @ http://jsfiddle.net/afxDC/

6
votes

Dont use display:none or visibility:hidden initially in the css

In Jquery:

$(document).ready(function() {
 $('#file').hide(); 
 $("#elementToBeClicked").click(function(){
   $('#file').click();
 });
});
2
votes

I have the suspicion that due to security reasons you wont be able to do this. I seem to remember a while back trying to set the value attribute of a file upload element which you can't do as you could pull specific files from a users computer without their consent. I'd imagine that this would extend to programmatically changing a text box to a file upload element as you could set the value of the text field to the file you wanted to add then change it's type to a upload element and submit the form.

It should be a simple enough thing to try although I'd think you're working within the limitations of Javascript and therefore if you can't do it in native JS you'd be unlikely to be able to use JQuery.

Hope this makes sense,

JLove

0
votes

i think you can bind the input text to a jquery/javascript function that will create an file input with code and the the user can now upload a file

<input type="text" onclick="upload"/>

function upload(){
    $('[input type="text"]').append('<input type="file"/>')
}