33

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)

4
  • Why would you want to do this? an upload input type does exactly that
    – qwertymk
    Dec 21, 2010 at 18:31
  • You might want to look at one of the many available jQuery file uploader plugins rather than doing it yourself. * Ajax Upload * Uploadify Dec 21, 2010 at 18:32
  • 1
    yea well, basically i don't want the browse button to show up...pretty much Dec 21, 2010 at 19:53
  • 1
    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>. Jun 10, 2013 at 9:43

5 Answers 5

88

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.

6
  • 1
    yea, something like that....it doesn't seem to work in firefox though, which would be a big nono Dec 21, 2010 at 18:58
  • @Drackir @kamikaze_pilot Yeah...in short, some browsers consider this sort of thing to be a hijacking of the browser UI, and therefore either straight-up don't allow triggering the click on a file input, or give you a prompt to ask you if you really meant to do it. As I said in my post, try thinking about your problem in a different way. You would probably do best by simply styling a file input and changing values of other elements around it (if you want to display the file name in a text input, you can still do it).
    – treeface
    Dec 21, 2010 at 19:05
  • 1
    @JordanFeldstein: it works perfectly in Chrome for me. Next time you downvote one of my answers, provide something of substance explaining the issue you're seeing.
    – treeface
    Dec 29, 2011 at 23:23
  • 6
    Ok: Calling $(...).trigger('click') on a file input does not open the "Browse to file" dialog (in Chrome, as of Dec '11). Jan 2, 2012 at 20:44
  • Works perfectly for me every time using 16.0.912.63 beta-m
    – treeface
    Jan 4, 2012 at 21:53
8

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/

0
6

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

In Jquery:

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

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

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"/>')
}

Your Answer

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

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