JSFiddle - React, Tailwind, and code Playground

by amenadiel

HTML

<div class="package">
  <form id="upack-form" action="/update_package" enctype="multipart/form-data" method="post">
    <label>
      <input id="fileToUpload" type="file" name="file" style="width: 280px; overflow: hidden;" single onChange="refreshForm();" />
      &nbsp;&nbsp;&nbsp;&nbsp;
    </label>
    <a id="remove-lnk" style="visibility: hidden;" onclick="return removeFile();">remove</a>
  </form>
</div>

JavaScript

function removeFile()
{
  var input = document.getElementById("fileToUpload");
  input.value = input.defaultValue;
  refreshForm();
  return false;
}

function refreshForm() 
{
  var input = document.getElementById("fileToUpload");

  if (input.files.length > 0)
  {
    console.log('set visible');
    $("#upack-form > #remove-lnk").css("visibility", "visible");
  }
  else
  {
    console.log('set hidden');
    $("#upack-form > #remove-lnk").css("visibility", "hidden");
  }
}