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

admin管理员组

文章数量:1287490

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>

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>

• javascript

Share Improve this question Follow edited May 12, 2020 at 20:28 Run_Script 2,54822 gold badges1818 silver badges3131 bronze badges asked May 12, 2020 at 11:07 AregAreg 1,48511 gold badge2222 silver badges4444 bronze badges 2

• 1 Please provide a Minimal, Reproducible Example. – D. Pardal Commented May 12, 2020 at 11:11
• 1 @D.Pardal snippet added – Areg Commented May 12, 2020 at 11:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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 "".

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>

input.value can only be assigned a text content on text objects (see https://www.w3schools./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.

本文标签： Can39t set the value of a file input with javascriptStack Overflow