0

https://jsfiddle.net/yugxqopz/

I am a newbie to UI world and I have a simple use case like

1) upload the document using choose file option
2) After it is chosen, I need to call a particular function in javascript like below 

<form id="fileUploadForm" onsubmit="return uploadToTempFolder();" enctype="multipart/form-data">
    <input type="file" name="file" id="file" accept="application/pdf">
    <input type="submit" class="button-blue" value="Upload">
</form>

Instead of choose file, I need to have an option like 'attach file' and once the user chooses the file, I don't need an extra upload button and I need to call the 'uploadToTempFolder'

Any help is appreciated.

Thanks,
Harry

Harry
  • 3,072
  • 6
  • 43
  • 100
  • 1
    you may refer https://stackoverflow.com/a/33822113/7887883 – Pavan Kumar T S Oct 09 '19 at 04:04
  • 1
    Please refer this https://jsfiddle.net/rakeshnayak/wktLd5jb/1/ – JustCode Oct 09 '19 at 07:02
  • @PavanKumarTS Thanks, I tried the same but I am facing an issue with the onchange event ('$("#files").change(function() '), If I upload the same file again it is not accepted, How do I upload the same file again? – Harry Oct 10 '19 at 02:36
  • on change will be triggered only if there is change in data. so if you select same file it wont trigger. try onblur or any other events – Pavan Kumar T S Oct 10 '19 at 06:53

1 Answers1

1

you just need to put onchange event.

<form id="fileUploadForm" enctype="multipart/form-data">
    <input type="file" name="file" id="file" accept="application/pdf" onchange="uploadToTempFolder()">
</form>

unfortunately we can not change the default text of file input but there is workaround.

here is working example

Negi Rox
  • 3,828
  • 1
  • 11
  • 18
  • I am facing an issue with the onchange event ($("#files").change(function() {), If I upload the same file again it is not accepted, How do I upload the same file again? – Harry Oct 10 '19 at 02:35
  • when you are selecting file at the end you need to set its value bllank so when you select again it will work – Negi Rox Oct 10 '19 at 07:16