$('element').click() not working

Question

This is my file input element:

<input type="file" id="StudentPhoto" value="StudentPhoto" style="display: none;">

This is the validation function:

$(document).ready(function() {
    $('#StudentPhoto').change(function()
    {
        var file_data = $("#StudentPhoto").prop("files")[0];
        var size = file_data.size;
        var type = file_data.type;
        var name = file_data.name;
        var input = $("#StudentPhoto");

        if(type !== 'image/png' && type !== 'image/jpg' && type !== 'image/jpeg')
        {
            alert("Only JPG & PNG files are allowed to upload as student photo.");
            $('#StudentPhoto').click();
        }
        else if(size > 2097152)
        {
            alert("The maximum photo size is 2MB\n");
            $('#StudentPhoto').click();
        }
    });
});

If the file chosen by the user has an invalid format or size, it's supposed to pop up the dialog to ask him to choose the file again, but it doesn't, the statement $('#StudentPhoto').click(); in the function doesn't work. Why? Is there any other method?

its a file input, so click event for this for sure is show the window and let user choose the file — Newbie, Aug 26 '15 at 03:02
You should use `accept` attribute in `` instead of checking in JS. — Raptor, Aug 26 '15 at 03:58
Not a real workaround, but you can limit the file types by setting `accept='.jpg | .jpeg | .png'` attribute. File size restriction can probably be done when you submit your form rather than click on open button of the file dialog... — technophyle, Aug 26 '15 at 04:06

score 0 · Answer 1 · answered Aug 26 '15 at 03:07

0

Or you can use the .trigger() method to make the click event fire on the button. We'll also use input since you stored the file field already.

input.trigger('click');

Hope this helps.

answered Aug 26 '15 at 03:07

James Pederson

404
2
7

it doesn't work from a change handler of the same element - at least in chrome – Arun P Johny Aug 26 '15 at 03:12
what is the difference between `$('#StudentPhoto').click();` and `input.trigger('click');` – Arun P Johny Aug 26 '15 at 03:15

score 0 · Answer 2 · answered Aug 26 '15 at 03:11

0

You can use HTML DOM click() method:

document.getElementById('StudentPhoto').click();

answered Aug 26 '15 at 03:11

chungvh

46
1
4

1

I found this answer. It may help you understand your problem. http://stackoverflow.com/a/25886585/3861639 – chungvh Aug 26 '15 at 03:27
@shess But `.click()` function for my file input works in other function/condition. – Newbie Aug 26 '15 at 03:50
1

this answer is not related. If jQuery works in other case, this traditional JS click is the same as jQuery version's `.click()`. – Raptor Aug 26 '15 at 03:57

score 0 · Answer 3 · answered Aug 26 '15 at 03:15

0

Change your file input element to:

<input type="file" id="StudentPhoto" value="StudentPhoto" style="visibility: hidden">

Note that I used visibility: hidden, instead of display: none.

You cannot call the click event on a non-displayed file input.

answered Aug 26 '15 at 03:15

technophyle

7,972
6
29
50

score 0 · Answer 4 · answered Mar 06 '23 at 11:55

Since you are inside the change function and want to click on the same selector, you can use the this.click()

$(document).ready(function() {
    $('#StudentPhoto').change(function()
    {
        var file_data = $("#StudentPhoto").prop("files")[0];
        var size = file_data.size;
        var type = file_data.type;
        var name = file_data.name;
        var input = $("#StudentPhoto");

        if(type !== 'image/png' && type !== 'image/jpg' && type !== 'image/jpeg')
        {
            alert("Only JPG & PNG files are allowed to upload as student photo.");
            this.click();
        }
        else if(size > 2097152)
        {
            alert("The maximum photo size is 2MB\n");
            this.click();
        }
    });
});

score -2 · Answer 5 · answered Aug 26 '15 at 03:04

you need to insert your callback withing the click event:

    $(document).ready(function()
        {
            $('#StudentPhoto').change(function()
            { 
                var file_data = $("#StudentPhoto").prop("files")[0];
                var size = file_data.size;
                var type = file_data.type;
                var name = file_data.name;
                var input = $("#StudentPhoto");

                if(type !== 'image/png' && type !== 'image/jpg' && type !== 'image/jpeg')
                {
                    alert("Only JPG & PNG files are allowed to upload as student photo.");
                    $('#StudentPhoto').click();
                }
                else if(size > 2097152)
                {

                    $('#StudentPhoto').click(function(){
alert("The maximum photo size is 2MB\n");
});
                }
            });
    });

you misunderstood my question – Newbie Aug 26 '15 at 03:11 — Newbie, Aug 26 '15 at 03:11
Hi Ah Yong, can you be more specific with your question? – Leo Javier Aug 26 '15 at 03:13 — Leo Javier, Aug 26 '15 at 03:13

$('element').click() not working

5 Answers5