HTML + JS: Clear File Input on button click

Question

I want to tell my backend, I deleted the assigned file it already loaded:

<input id="pic" name="pic" type="file" onclick="this.value=null;" onchange="uploadFile(this);">
<button id="pic-delete" type="button" onclick="removeFile(this);"><i someicon></i></button>

where the onclick function looks like:

removeFile = function() {
    var ipt = document.getElementById("pic");
    ipt.value = null; // <--- problem here
    console.log("worked...")
}

my problem now is: I can differentiate the request in the browser Network tab whether I do nothing or hit the delete button. Both times the input field does not show up. I wanted to add ipt.value="DELETE" so I can catch that in the backend, but this leads to an error:

Uncaught DOMException: An attempt was made to use an object that is not, or is no longer, usable

From what I can tell the error always occurs if I put anything else but ipt.value = null or ipt.value = "" in this line.

A fiddle with the full code to show the error: https://jsfiddle.net/rvc8sbjy/3/

I fail to understand so far, why my fiddle produces an error, while yours does not. Would you have a look at mine please? — xtlc
– xtlc, Commented Jan 4, 2022 at 17:21
inputFieldID is an array with a string. Also you are splitting on - and not ___ which I think you are trying to? Is there a reason you are complicating this? — Salmin Skenderovic
– Salmin Skenderovic, Commented Jan 4, 2022 at 17:25
yes the fields are dynamically created and ___ is the standard separator from the backend. I split because I add a {inputfieldID}-delete to every delete button for an input field and a {inputfieldID}-label for every label and so on ... — xtlc
– xtlc, Commented Jan 4, 2022 at 17:28

Salmin Skenderovic · Accepted Answer · 2022-01-04 17:34:27Z

1

There are a few errors. The way you were trying to extract the ID is wrong. A much easier approach is to just use .replace

      var inputFieldID = v.id.replace("-delete", "");

Second - you can't set the value to an non-empty string. To reset it just set it to an empty one:

          ipt.value = "";

Working example:

https://jsfiddle.net/5yqohjzv/

answered Jan 4, 2022 at 17:34

Salmin Skenderovic

1,73010 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

xtlc Over a year ago

The last thing here makes perfectly sense! thanks! How would I "mark" the file to be deleted on backend? My problem is, I cannot differentiate between "delete" and "nothing was changed".

Salmin Skenderovic Over a year ago

If you are making api-calls in the uploadFile function, just check v.files.length to see if there is none or has some.

Salmin Skenderovic Over a year ago

I might need more code in your example to understand

xtlc Over a year ago

in the browser console, I can not differentiate between "the user has not touched the file" -> it does not show up in the request and "the user has hit the delete button -> value is set to null" -> it does not show up in the request. I wished for something like value = null -> user did not touch it, continue. But if value = "REMOVE" the backend knows the file is to be deleted.

xtlc Over a year ago

my workaround would be to place a hidden field there and save the names of the deleted fields in there and send it upon form sending ...?

|

Collectives™ on Stack Overflow

HTML + JS: Clear File Input on button click

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related