Support of click() on input

Question

I just made a neat little way of adding profile pictures, but I'm concerned about the browser support

HTML

<img id="profile-picture" alt="Profile picture" src="/images/user/profile/default.png" class="img-circle"/>
<form method="POST" action="/user/photo">
    <input type='file' name='picture' id='pic-upload-input'/>
</form>

JavaScript

document.getElementById('profile-picture').onclick = function(){
    document.getElementById('pic-upload-input').click();
}

Would you recommend this is a safe thing to do?

it's fine in modern browsers but won't work in < IE8 see this answer for cross browser support http://stackoverflow.com/a/21140463/926333 — Girish, Feb 03 '15 at 08:44
[It's fine in most browsers for most things](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.click), but check the compatibility table for specific notes about `input[type=file]` elements — James Thorpe, Feb 03 '15 at 08:45
Kind of confused now, one comment saying ltIE8 not supported, the answer saying Safari not supported, then MDN saying safari and IE supported - Opera not supported. :D — php_nub_qq, Feb 03 '15 at 08:47
Personally I'd trust the MDN, but as with everything, you need to test with the browsers you want to support — James Thorpe, Feb 03 '15 at 08:48

score 0 · Accepted Answer · answered Feb 03 '15 at 08:43

0

Yes almost all browsers support the click method. The only exception being in Safari where it does not support click for anything except buttons.

answered Feb 03 '15 at 08:43

a_pradhan

3,285
1
18
23

Support of click() on input

HTML

JavaScript

1 Answers1