Clear the input file-name on button click

Question

enter image description here

Refer above image , how to clear "Koala.jpg" file name, each time when user hits a delete button , inside a bootstrap modal.

$('#delImg').on({
  click: function() {
    $('#fileupload').attr("value", "");
    $('#fileupload').attr("src", "");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="modal-body">
  <div class="box-body">
    <form method="post" action="#">
      <div>
        <textarea id="" ng-model="" style="" class="textarea" placeholder="Post something"></textarea>
      </div>
    </form>
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <div id="imgdispy"></div>
    <p class="help-block">Example block-level help text here.</p>
  </div>
</div>
<button type="button" id="delImg" class="btn btn-default btn-hover-green" data-action="save" data-dismiss="modal" role="button">Delete</button>
</div>

The above code isn't working

After some google search , clearing cache can be the solution , but need help in understanding syntax and the real cause.

Something like **[this](https://jsfiddle.net/Guruprasad_Rao/rLpc7vmk/)**? — Guruprasad J Rao, Jul 20 '15 at 11:14
@vikrant checkout my answer its working, you can check snippet too — Bhavin Solanki, Jul 20 '15 at 11:19
It is working @Vikrant.. You **select a file** and then you click delete right? — Guruprasad J Rao, Jul 20 '15 at 11:29

score 1 · Answer 1 · answered Jul 20 '15 at 11:18

You can replace file input with its clone ;

 $('body #exampleInputFile').replaceWith($('body #exampleInputFile').val('').clone(true));

Here is the working code

$('#delImg').on('click', function() {
   // $('#fileupload').attr("value", "");
   // $('#fileupload').attr("src", "");
   
    $('body #exampleInputFile').replaceWith($('body #exampleInputFile').val('').clone(true));

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="modal-body">
  <div class="box-body">
    <form method="post" action="#">
      <div>
        <textarea id="" ng-model="" style="" class="textarea" placeholder="Post something"></textarea>
      </div>
    </form>
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <div id="imgdispy"></div>
    <p class="help-block">Example block-level help text here.</p>
  </div>
</div>
<button type="button" id="delImg" class="btn btn-default btn-hover-green" data-action="save" data-dismiss="modal" role="button">Delete</button>
</div>

Thanks working :) , but `$('#fileupload').val('')` did my work — Vikrant, Jul 20 '15 at 11:23
you have `exampleInputFile` in your sample code so i have let it same... accept if would like — Bhavin Solanki, Jul 20 '15 at 11:44

Clear the input file-name on button click

1 Answers1