How to remove or clear value from input file?

Asked

Viewed 7,011 times

2

Hi guys from stackoverflow.

It is possible to remove or clear value from input file ?

I also saw another example of resetting or removing all input file using:

document.getElementById("seu_id_do_input").value = "";

Which is the best way to clean input file ?

Some brilliant idea ?

javascript filing-cabinet
  • 1

    It is not possible to delete files on disk with Javascript on the client side. You need to do this on the server side.

1 answer

2


Example of how to clear the value of an input type=file (actually a trick):

$().ready(function() {
	list = $("[class^=f_clear_]");
	if (list.length > 0) {
		$.each (list, function(key, row) {
			var arr = row.className.split("_");
			var selector = "#f"+arr[2];
			$(this).click(function(){
				GenericInputFileCleaner(selector);
			});
		});
	}
});

function GenericInputFileCleaner(selector){
	var clone = $(selector).clone(true);
	clone.insertAfter(selector);
	$(selector).remove();
	clone.attr("id", selector.substring(1));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<form action="tmp.php" method="post" enctype="multipart/form-data">
<input type="button" value="x" class="f_clear_1"> <input name="f[]" type="file" id="f1"><br>
<input type="button" value="x" class="f_clear_2"> <input name="f[]" type="file" id="f2"><br>
<input type="button" value="x" class="f_clear_3"> <input name="f[]" type="file" id="f3"><br>
<input type="submit" value="send">
</form>
</body>
</html>

The logic here is to clone the element you want to clean, add the clone right to the front and then remove the original. Thus, the clone will present the attribute value empty. In the end, the clone receives the same ID as the original. But this should be done after the original has been removed.

This is a simpler and safer way than trying to set the attribute value:

document.getElementById("seu_id_do_input").value = "";

or Jquery

$("#seu_id_do_input").val("");

Both should work well, but depending on the browser and version, they may not work. The reason everyone should already know is to avoid manipulating the attribute value with malicious data. However, there is no problem in deleting the attribute and all browsers could release it. But some browsers, perhaps due to bug or lack of implementation, do not allow modifying anything, even deleting the value.

Therefore, a safer option is to clone, add the clone to the HTML body and remove the original.

I preferred to do with Jquery because it is more practical. The code would be larger and more susceptible to compatibility errors if it tried to invent something without the aid of the framework.

I found it unnecessary to comment on the code and explain in detail why it is very small, readable, easy to understand. The part that matters is the function GenericInputFileCleaner(). The rest is purely didactic. Adapt as your case.

The drawback is that you will obviously lose any events linked to this element or that depend on it (onclick, for example). But it can be "easily" solved by recreating such events if they exist.

Browser other questions tagged javascript filing-cabinet

You are not signed in. Login or sign up in order to post.