2

I have a form where I am uploading images, so there is obviously an input[type=file] which has a class of .image-upload,but as it looks ugly I have hidden it (display: none) and instead have a pretty button that says upload (class .upload) and on tap I want to trigger the tap/click event for the input[type=file] element so that the user can then upload an image.

The code below works on a desktop, but not on a mobile device. If I change the .click to .tap below then it works nowhere?

$(document).bind('pageshow', function() {
    $('.ui-page-active .upload').tap(function() {
        $('.ui-page-active .image-upload').click();
        return false;
    });
});

Update, I never thought that it could be a browser specific issue, but this code works in the stock Android browser, and not in Opera.

Omar
  • 32,302
  • 9
  • 69
  • 112
Lee
  • 8,354
  • 14
  • 55
  • 90

3 Answers3

1

Like the OP I had this same issue, but it was with the default Android browser (4.4.2). When the file input field was hidden, I couldn't trigger a click even on it. I fixed it by keeping the input element visible, technically (i.e. omitting the display:none attribute), and just moving it off screen. For example, the HTML was something like this:

<div style="height:1px;width:1px;overflow:hidden;margin-left:-999px">
    <input id="photoInput" type="file" accept="image/*" capture>
</div>
<input id="takePhoto" type="button" value="Take photo">

And the JS was:

$('#takePhoto').tap(function() {
    $("#photoInput").trigger('click');
});

Notice that the tap event triggers a click event on the input field. I couldn't get the tap event to work with the trigger. This code is working on my Android stock browser and on the Opera mobile browser vers. 21.0.01437

tjh
  • 56
  • 4
0

With jQuerymobile, you're better off using virtual events like vclick. Giving something along the lines of

$(document).bind('pageshow', function() {

    $('.ui-page-active .upload').tap(function() {
        $('.ui-page-active .image-upload').trigger("vclick");
        return false;
    });
});
Py.
  • 3,499
  • 1
  • 34
  • 53
  • This is still not opening the file picker :( – Lee Jun 12 '13 at 20:38
  • hum, could you put your HTML then? (or set up a jsfiddle?) Edit: Nvm, if it's opera specific, I don't think I can help :p – Py. Jun 12 '13 at 21:42
0

Try this one? DEMO http://jsfiddle.net/yeyene/5kfnT/1/

JQUERY

$(document).ready(function(){
    $(function() {
        // Bind the tapHandler callback function to the tap event on div.box
        $( ".upload" ).on( 'vclick', tapHandler ); 
        // Callback function references the event target and adds the 'tap' class to it
        function tapHandler() {
            $('.image-upload').trigger('click');
        }
    });
    
    $('.image-upload').click(function(){
        alert('Upload image!');
        // your upload image script here
    });
});  
Community
  • 1
  • 1
yeyene
  • 7,297
  • 1
  • 21
  • 29