CODEWITHSUNDEEP
reactjs
Brutus
Brutus

Reputation: 163

How to click on a ref in react

I am creating a file uploader using react. I want to hide the default file input element and trigger it when user click on a div.

    <div style={{position:"relative",width:"500px",height:"300px",background:"gray",marginLeft:"auto",marginRight:"auto",border:"2px 
           dotted white"}}
         onClick={this.clickOnFakeUploader}
    > 
       <div style={{float:"left",marginTop:"100px",width:"100%"}}>
         <h4 style={{color:"white",marginLeft:"auto",marginRight:"auto"}}>Drag & Drop Files Here! 
         </h4>
       </div>
   </div>
    
   <label className="btn btn-default" style={{display:"none"}}>
   <input ref={this.fileUploader}  type="file" multiple onChange={this.selectFiles} />
   </label>
      

    this.fileUploader = React.createRef();
    
      this.clickOnFakeUploader = () =>{
    
            this.fileUploader.click();
      }

I am getting TypeError: this.fileUploader.click is not a function error.

Upvotes: 0

Views: 2061

Answers (1)

tobzilla90
tobzilla90

Reputation: 657

this.fileUploader.current.click()

you need to address it with current

Upvotes: 2

Related Questions