CODEWITHSUNDEEP
javascript
Areg
Areg

Reputation: 1485

Can't set the value of a file input with javascript

I am trying to set a value on an input when button is pressed, the problem is that it's throwing an error:

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

Here's my code which looks pretty simple and all that:

document.getElementById("icon-removal-btn").onclick = function(e){
        e.preventDefault()
        let label = document.getElementById("icon-label");
        let input = document.getElementById("icon-input");        
        label.innerHTML = 'Choose File';
        input.value = 'deleted';
    }

I even tried typing into the console document.getElementById("icon-input").value = "deleted" but it still didn't work. What is going on? Am I doing something wrong here?

document.getElementById("icon-removal-btn").onclick = function(e){
        e.preventDefault()
        let label = document.getElementById("icon-label");
        let input = document.getElementById("icon-input");        
        label.innerHTML = 'Choose File';
        input.value = 'deleted';
    }
<div class="form-row">
      <div class="form-group col">
        <div class="form-control-lg input-group mt-1">
          <div class="input-group-prepend">
            <span class="input-group-text">Upload Icon</span>
          </div>
          <div class="custom-file">
            <button class="icon-removal-button" id="icon-removal-btn">Delete</button>
            <input type="file" name="icon" id="icon-input" value="{{$card->icon}}" class="custom-file-input" id="inputGroupFile01">
            <label class="custom-file-label" id="icon-label" for="inputGroupFile01">{{$card->icon}}</label>
          </div>
        </div>
      </div>
    </div>

Upvotes: 4

Views: 9360

Answers (3)

Run_Script
Run_Script

Reputation: 2548

input.value can only be assigned a text content on text objects (see https://www.w3schools.com/jsref/prop_text_value.asp).

An <input type="text">, for example, can have a value assigned to it:

document.getElementById('test').value = 'Success.';
<input type="text" id="test">

An <input type="file">, however, cannot have a text value assigned to it, because it does not have text content.

The snippet below will not work and throws a script error:

document.getElementById('test').value = 'Success.';
<input type="file" id="test">

This would cause the same error as you experienced:

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

Update

An <input type="file"> does have a value, but can't be set to anything other than "". See the answer by D. Pardal for more info.

Upvotes: 3

D. Pardal
D. Pardal

Reputation: 6597

From the HTML Standard (emphasis mine):

input . value [ = value ]

Returns the current value of the form control.

Can be set, to change the value.

Throws an "InvalidStateError" DOMException if it is set to any value other than the empty string when the control is a file upload control.

So you can't change the value of a <input type="file"> to anything other than "".

Upvotes: 4

0stone0
0stone0

Reputation: 44264

You are trying the set the value of the <input type="file"> to a string. This can't be done since type="file" only accepts file's as valid input.

Please read more about type="file" at MDN.

Removing the types fixes it (temporary) 

document.getElementById("icon-removal-btn").onclick = function(e){
        e.preventDefault()
        let label = document.getElementById("icon-label");
        let input = document.getElementById("icon-input");        
        label.innerHTML = 'Choose File';
        input.value = 'deleted';
    }
<div class="form-row">
      <div class="form-group col">
        <div class="form-control-lg input-group mt-1">
          <div class="input-group-prepend">
            <span class="input-group-text">Upload Icon</span>
          </div>
          <div class="custom-file">
            <button class="icon-removal-button" id="icon-removal-btn">Delete</button>
            <input name="icon" id="icon-input" value="{{$card->icon}}" class="custom-file-input" id="inputGroupFile01">
            <label class="custom-file-label" id="icon-label" for="inputGroupFile01">{{$card->icon}}</label>
          </div>
        </div>
      </div>
    </div>

Upvotes: 3

Related Questions