Hide / show depending on input type=file value

Question

It works fine when I select / deselect a file via the Choose File button:

$("input[type='submit']").toggle(false);

$("input[type='file']").change(function() {
  if ($(this).val() != "") {
    $("#btn").toggle();
  } else {
    $("#btn").toggle();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="fld" type="file" name="image" id="file">

<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" id="upload_picture" class="btn" />
<br>
<br>
<div id="remove_button">Remove</div>

Click on the Choose File button and select a file. The Upload / Edit picture button will appear. Now click on the Choose File button again but do not select a file and exit the small popup window. The Upload / Edit picture button will disappear.

In my case I want the input="file" value to be cleared and the Upload / Edit picture button to disappear if I clear the value by clicking on the <div id="remove_button">Remove</div>

Is there a way to do that?

JSFiddle

Does this answer your question? [Clearing using jQuery](https://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery) — Alon Eitan, Jan 02 '20 at 14:23

Terry · Answer 1 · 2020-01-02T14:26:37.050

What you can do is to bind a click event listener to the #remove_button element (which I recommend that you should be using <button> instead of a <div>).

In the callback, you can simply set the value of the file input to an empty string, which effectively resets the field. Remember that you will need to use .trigger('change') to manually reinvoke the show/hide logic based on the file input value:

const $submit = $("input[type='submit']");
$submit.hide();

$("#fld").change(function() {
  $submit.toggle(!!this.value);
});

$('#remove_button').click(function() {
  $('#fld').val('').trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input id="fld" type="file" name="image" id="file">

<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" id="upload_picture" class="btn" />
<br>
<br>
<button id="remove_button">Remove</button>

@RoryMcCrossan Thanks for catching that! I was a bit hasty at posting my answer: updated it now :) — Terry, Jan 02 '20 at 14:26

score 1 · Accepted Answer · answered Jan 02 '20 at 14:27

Add this code into your javascript

$("#btn").toggle(false);

$("#fld").change(function(){

if($(this).val() != "")
{
 $("#btn").toggle();
} 
else{
 $("#btn").toggle();
}
});

$("#remove_button").click(function(){
  $("#fld").val('');
  document.getElementById("btn").style.visibility = "hidden";
})

and remove id tag from your html..it has two ids for the button change it like

<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" 
class="btn" />

I chose this one because it's the closest to the original question. — Alex333, Jan 02 '20 at 14:34

Hide / show depending on input type=file value

2 Answers2