0

There is an input form (of type file):

<input
  name="image"
  id="image-input"
  accept="image/*"
  onChange={this.uploadFile}
  multiple
  type="file"
  className="imgInp"
/>

How can it be added a text on it? I don't want it outside of the input, in that case I would add a span like: <span> Upload image </span> but I want the text to be on the input.

On this page, it says that there is an attribute value that must be added but if I add it inside the input it throws this error:

InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

<input
  name="image"
  id="image-input"
  accept="image/*"
  onChange={this.uploadFile}
  multiple
  type="file"
  className="imgInp"
  value="Upload image" //this is where value was added
/>

Is there a way to make this work?

Leo Messi
  • 5,157
  • 14
  • 63
  • 125

2 Answers2

2

That's because you are trying to add value to a file type input. If you do the same with a text type input it would work fine.

If you want to change default text for file input then you will have to deal with some js along with html.

This link could be of some help in that case: Change default text in input type="file"?

Tushar
  • 665
  • 5
  • 11
1

"Upload image"

Based on the text you want to add, I believe the attribute you want to use is placeholder instead of value. This will give you an input field with the text you want.

Josiah
  • 21
  • 1
  • 4
  • I've tried it but unfortunately it doesn't work – Leo Messi Jul 06 '20 at 11:51
  • 1
    I just realized that that you wanted to change the text of the button. The solution seems to be in the duplicate question which is styling a button over the input. https://jsfiddle.net/JJRrc/1/ – Josiah Jul 06 '20 at 11:57