On click of image icon, refer the input type file function in REACT.js

Question

Here I have image icon, with edit icon of it. And when I click on edit icon, image input type file is triggered and picking the file same!

But I count get the event.target.file here...

<span className='fa fa-edit edit-icon'
    onClick={(e)=>{this.onChangeFile.click(e)}}> </span>

<input type="file" id="file"
    ref={(ref) => this.onChangeFile = ref}
    style={{display: "none"}}/>

method:

But I count get the event.target.file here...

onChangeFile =(event)=> {
    console.log('event.target.files', event.target.files)
    event.stopPropagation();
    event.preventDefault();
    var file = event.target.files[0];
    console.log('file.....:', file);
    this.setState({file});
  }

Here I am looking for the file path in log. currenlty it is not calling the method.

remix23 · Accepted Answer · 2019-03-11 12:14:34Z

There are several issues in your code:

On mount your onChangeFile handler will be erased by the ref callback ref={(ref) => this.onChangeFile = ref}
You're not binding any event handler on the onchange event of your input.

It seems that what you are trying to do is to replace the ui of the file browser with a nice edit icon.

Html label element and its for attribute are there to help you.

The following snippet is plain html/js (no react) but will work in your component if you change the plain html for attribute for its React counter part htmlFor and if you bind the onChangeFile handler the jsx way that is

    <input
        type="file"
        id="file"
        onChange={this.onChangeFile}
        style={{display: "none"}}
    />

Instead of document.getElementById('file').addEventListener('change', onChangeFile);

The refs are not needed here.

So to sum everything up:

wrap you span icon into a label element.
set the htmlFor attribute to the same value as the file input's id attribute.
attach the onFileChange handler to the onChange event of the file input

That's it, the icon will act as your hidden input should.

onChangeFile = (event)=> {
  console.log('event.target.files[0]', event.target.files[0])
  event.stopPropagation();
  event.preventDefault();
  var file = event.target.files[0];
  console.log('file.....:', file);
}

document.getElementById('file').addEventListener('change', onChangeFile);

.edit-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #EEAA11;
}

<label for="file"><span class='fa fa-edit edit-icon'> </span><label>

<input type="file" id="file" style="display: none;"/>

Anupam Maurya · Accepted Answer · 2019-03-11 13:22:55Z

1

  <input type="file" id="file" style={{display: "none"}}
    onChange={(e) => this.onChangeFile(e)}/>
    <label htmlFor="file" >
      <span className='fa fa-edit edit-icon'> </span>
    </label>



  onChangeFile = (event)=> {
    console.log('event.target.files[0]', event.target)
  }

Here I just bind the lable with input element. Made display:none for input. And it works for me.

answered Mar 11, 2019 at 13:22

Anupam Maurya

2,2611 gold badge25 silver badges28 bronze badges

Collectives™ on Stack Overflow

On click of image icon, refer the input type file function in REACT.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related