How to style a file upload input

In this tutorial, we will apply some custom styling to a file upload input field. The default styling for these inputs are not that satisfying I would say, so today, we will add some basic (but hopefully better looking) styling to it.

Final result

This is our final result

Default style

This is how it looks without any styling

JSX code

Let's get to it. We will start with our React component.

<label className={style.chooseButton} htmlFor="fileInput">
  Choose image
  <input
    id="fileInput"
    className={style.input}
    onChange={onFileChoose}
    type="file"
    accept="image/*"
  />
</label>

And our SCSS/CSS

.chooseButton {
  display: flex;
  font-size: 12px;
  font-weight: bold;
  justify-content: center;
  padding: 10px 0;
  cursor: pointer;
  background-color: #b17e07;
  color: white;
  border-radius: 4px;
  width: 120px;

  .input {
    display: none;
  }
}

And that is it. Now we have styled our file input to look a little bit more user friendly.

Outro

Thanks for reading this short guide on how to style a file input field. I hope you got some inspiration on how you can do it in your project.

All the best,