$('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
– Newbie, Commented Aug 26, 2015 at 3:02
You should use accept attribute in <input type="file"> instead of checking in JS. — Raptor
– Raptor, Commented Aug 26, 2015 at 3: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 <kbd>open</kbd> button of the file dialog... — technophyle
– technophyle, Commented Aug 26, 2015 at 4:06

technophyle · Accepted Answer · 2015-08-26 03:15:18Z

1

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, 2015 at 3:15

technophyle

9,3777 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Pederson · Accepted Answer · 2015-08-26 03:07:42Z

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, 2015 at 3:07

James Pederson

4042 silver badges7 bronze badges

2 Comments

Arun P Johny Over a year ago

it doesn't work from a change handler of the same element - at least in chrome

Arun P Johny Over a year ago

what is the difference between $('#StudentPhoto').click(); and input.trigger('click');

chungvh · Accepted Answer · 2015-08-26 03:11:18Z

0

You can use HTML DOM click() method:

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

answered Aug 26, 2015 at 3:11

chungvh

461 gold badge1 silver badge4 bronze badges

3 Comments

chungvh Over a year ago

I found this answer. It may help you understand your problem. stackoverflow.com/a/25886585/3861639

Newbie Over a year ago

@shess But .click() function for my file input works in other function/condition.

Raptor Over a year ago

this answer is not related. If jQuery works in other case, this traditional JS click is the same as jQuery version's .click().

Keshari Nandan · Accepted Answer · 2023-03-06 11:55:48Z

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();
        }
    });
});

Leo Javier · Accepted Answer · 2015-08-26 03:04:12Z

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");
});
                }
            });
    });

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

2 Comments

3 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

3 Comments

Comments

2 Comments

Linked

Related