Not able to access Input with passing ref

[namansamra]

In the project I require to control the input element e.g. to trigger input file event with some button outside the FileUploader component. But by passing ref to FileUploader component it doesn't do anything. I think it do not take any prop as ref. So it might be good if we can pass ref to get more control over the input element inside FileUploader component.

If it is there already can anybody please explain how to use that. Thanks

[mingg123]

I have same problem...

[namansamra]

@mingg123 I am using javascript for this purpose in my project.

Solution 1: if you have only single input on the page then you can simply write the onClick function as :

const clickHandler=()=>{
 document.querySelector('input').click();
}

Solution 2: If you have multiple inputs on the page then below is the solution:

the FileUploader component takes 'classes' prop so use can pass it as <FileUploader classes={'file-uploader'}/>

then on click of some button outside file uploader you an write function as:

const clickHandler=()=>{
        const inputElement =document.getElementsByClassName('file-uploader')[0].getElementsByTagName('input')[0];
        inputElement.click();
}

both above will invoke the file input popup.