React JS: Upload File Options is Not working On Custom button

Question

 <div cssName="row upload-btn-box">
                                <Button
                                  htmlFor="myInput"
                                  component="span"
                                  className="upload-btn"
                                >
                                    {/* <span> <img src={Upload} alt="Upload Certificate" /> </span> */}
                                   Upload  Certificate
                                                        </Button>
                                    <input
                                    id="myInput"
                                    style={{ display: 'none' }}
                                    type={"file"}
                                    onChange={fileSelectedHandler}
                                />
                            </div>

this the code i am using i have seen many stack over flow but nothing is working . where i am doing mistake why the dialog for uploading file is not opening

Alex K · Accepted Answer · 2022-01-07 19:02:25Z

2

You have a htmlFor attribute on a button element when that should be used on a label. If you were to change your code to the following it should work, you can style the label accordingly to appear as a button.

 <div cssName="row upload-btn-box">
   <label
     htmlFor="myInput"
     className="upload-btn"
   >
       Upload  Certificate
   </label>
   <input
     id="myInput"
     style={{ display: 'none' }}
     type={"file"}
     onChange={fileSelectedHandler}
   />
 </div>

answered Jan 7, 2022 at 19:02

Alex K

8904 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React JS: Upload File Options is Not working On Custom button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related