After struggling with the code below, I still can't get it to work. The goal is to display a link once a file is selected so that the file can be removed (or deselected). I'm trying to figure out why the link isn't showing up as expected. Any help would be greatly appreciated!
Just for reference, I also attempted using "css", "show", and "hide". None of them were successful.
<html>
<script>
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)
{
$("#upack-form > #remove-lnk").attr("visibility", "visible");
}
else
{
$("#upack-form > #remove-lnk").attr("visibility", "hidden");
}
}
</script>
<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();" />
<a id="remove-lnk" style="visibility: hidden;" onclick="return removeFile();">remove</a>
</label>
</form>
</div>
</html>
UPDATE:
I discovered that when I moved the hyperlink inside the "label," it stopped working properly.