title: How to fix an upload icon to a file upload input (material UI)
body: <p>I'm currently trying to build a file upload Input field with an icon as an input adornment, using Material UI. I want to be able to click the icon to upload a file.</p>
  <p>Following the MUI documentation here: <a href="https://material-ui.com/components/text-fields/#input-adornments" rel="nofollow noreferrer">input adornment</a>, I have tried to follow the exact formatting except using an IconButton instead of the Password visibility icon in the demo.</p>
  <p>Here is a sample of my code:</p>
  <pre><code>   &lt;FormControl className={classes.formControl}&gt;
        &lt;InputLabel htmlFor=&quot;upload-script&quot;&gt;Sim Script&lt;/InputLabel&gt;
        &lt;Input
          id=&quot;upload-script&quot;
          type=&quot;file&quot;
          value={values.script}
          onChange={() =&gt; handleChange('script')}
          endAdornment={
            &lt;InputAdornment position=&quot;end&quot;&gt;
              &lt;IconButton aria-label=&quot;upload&quot;&gt;
                &lt;PublishIcon /&gt;                        // (here is my icon)
              &lt;/IconButton&gt;
            &lt;/InputAdornment&gt;
          }
        /&gt;
      &lt;/FormControl&gt;
  </code></pre>
  <p>This works, but the result is not at all what I was intending- here is a screenshot of what it looks like in the browser: <a href="https://i.stack.imgur.com/dZb4B.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dZb4B.png" alt="upload field" /></a></p>
  <p>You can see my upload icon all the way on the right, but the input field clearly has its own upload button and placeholder text ('No file chosen').</p>
  <p>Looking online, I saw a suggestion here: <a href="https://stackoverflow.com/questions/40589302/how-to-enable-file-upload-on-reacts-material-ui-simple-input">(similar StackOverflow post)</a> that says we should add <code>style: {{ display: none }}</code> to the <code>Input</code> component, and add <code>component=&quot;span&quot;</code> as a property of the IconButton. When I try this, however, this is what the browser gives us:</p>
  <p><a href="https://i.stack.imgur.com/UCCQ1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UCCQ1.png" alt="upload field pt2" /></a></p>
  <p>(this is all the way scrolled... my sources icon is gone, the Input field has no line delimiter underneath, the spacing is clearly messed up...)</p>
  <p>Clearly, neither of these is what I want haha. Can anyone help?? (I hope this description is good enough...)</p>
  <p>Thank you so much!!</p>
  <h2>-</h2>
  <p><strong>EDIT:</strong>
  Here is what it looks like with @Shiladitya's initial solution:
  <a href="https://i.stack.imgur.com/jPdqh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jPdqh.png" alt="pt3" /></a></p>
  <p>But I want there to be a line for the text field! I want it to look exactly like the 'Sim Binary' text field, except with an upload icon on the right instead of a dropdown arrow.</p>