javascripthtmlcssreactjs

React js customizing the input of type file using CSS

I have an input of type file that needs to be customized. I need to add an icon in the input button, change the button's name and finally hide the selected file's name. I tried different methods like using a <div> or <a> but the problem is that I need to transfer the selected file to json format. So invoking the browsing action via JavaScript is causing an error in conversion. I need to use a customizable input of type file

                    <input type="file"/>

How I need it to look

Required shape

Solution

  • You can achieve this with label and hiding the input.You need to of course style it properly and write a handleFile function.

     <div>
     <label onChange={handleFile} htmlFor="formId">
         <input name="" type="file" id="formId" hidden />
          <Icon>
     </label>
 </div>