1

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.

VentusZXC
  • 31
  • 6

1 Answers1

0

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>
Sudarshan Rai
  • 281
  • 2
  • 9
  • Thank you! It's working! But now I have a another problem, because this will be incorporated in a mobile app, so i tried launching it but nothing came out. But if i were to use Chrome to try to tap on the Upload Photo it works like a charm. What's the problem here? – VentusZXC Jan 19 '20 at 05:42
  • @VentusZXC can you please try now , I removed accept="image/*" so now it should open file explorer – Sudarshan Rai Jan 19 '20 at 05:59
  • Yeah I tried, it works, it opens file explorer. But it is not working on my mobile phone... – VentusZXC Jan 19 '20 at 06:07
  • Is your phone android or ios , it should have worked – Sudarshan Rai Jan 19 '20 at 06:13
  • My phone is Android, running on Android 10. Yes it works on Android web browser, which is Chrome. Because I have an app which does the same thing, it just doesnt work on the app... So sorry for much trouble but it's been bugging me quite sometime as a beginner – VentusZXC Jan 19 '20 at 06:20
  • If you are trying on android code editor like sololearn or other editor it wont work there , – Sudarshan Rai Jan 19 '20 at 06:22
  • I'm trying on the an android webview app developed with android SDK..... Do you have any other more convenient way which I can contact you ? I have tons of questions .... haha... – VentusZXC Jan 19 '20 at 06:25
  • Yes it dose not works on webview i tried before, i found some question regarding this , maybe it helps , if you are self coding in webview: https://stackoverflow.com/questions/44106483/input-type-file-not-working-in-my-webview – Sudarshan Rai Jan 19 '20 at 06:31
  • I see. Hmm one more question, from the button it opens up a file explorer, is it possible if I disable the file explorer option and only open the camera? – VentusZXC Jan 19 '20 at 06:43
  • Here by this way – Sudarshan Rai Jan 19 '20 at 06:46
  • Yea this is what i used before, it still pops out the option to choose between file explorer and camera. What I'm thinking of is, after tapping on the button the camera automatically pops out without the need to select it manually. is that possible? – VentusZXC Jan 19 '20 at 06:49
  • It directly opens camera in mine not file explorer after adding accept="image/*" – Sudarshan Rai Jan 19 '20 at 06:54
  • @VentusZXC if i helped out then please support by upvote :0) – Sudarshan Rai Jan 19 '20 at 07:07
  • It's so weird. Does tht have to do with what Android version I'm currently on? – VentusZXC Jan 19 '20 at 07:11
  • yeah I upvoted. But hoping you might give some further advises =) Thanks for the help though – VentusZXC Jan 20 '20 at 03:07