Problem is here:

<button id="file" onClick="document.getElementsById('file').click(); return false;">Upload Photo</button>

It is document.getElementById not document.getIdByElement

Here is working code

<div>
   <input type="file" id="file" style="visibility:hidden"   accept="image/*" capture="camera" />
   <label for="file"></label>
   <button id="file" onClick="document.getElementById('file').click(); return false;">Upload Photo</button>
 </div>

Hi guys I’m very new to coding(esp HTML5). I wanted to replace the text inside the “Choose File” button to “Upload Picture”. I referred to some sources and I followed the steps in it, and I was able to change the text(Source: https://www.youtube.com/watch?v=aKDvfxiZ4Zw). The idea is basically hiding the “Choose File” button and replacing it with “Upload Picture” . But when I tested it out, there were no windows that popped out to let me choose file from, i clicked and clicked but nothing came out. And below is the code I referred.

 <div>
   <input type="file" id="file" style="visibility:hidden" accept="image/*" capture="user" />
   <label for="file"></label>
   <button id="file" onClick="document.getIdByElement('file').click(); return false;">Upload Photo</button>
 </div>

Thank you so much in advance and I’m sorry if there’s any confusion but I hope I could get some advices here.