How to Create Custom File Upload Input Control with React and CSS
Tags: react, css, uploader, javascript
Published: 2022-10-25 13:33:48

### What we will build

Hello Hope all is well, in this article I share on how to create a simple custom file upload input control in reactjs and CSS.

Your can checkout the video version for more details.
{% embed https://www.youtube.com/watch?v=FtpN8QI9PuA&t=1s %}

### Create React App

First we will create our app with create-react-app, that's assuming you already have nodejs installed. Run this command in the terminal or command prompt for windows ` npx create-react-app uploader`

For the icons in our project (cloud, image and delete icons), we shall be using the npm package react-icons. To install this in our project. first move to the project folder in the terminal `cd uploader` and then `npm install react-icons`

### Project structue
create a components folder inside the src folder and inside this folder create an uploader folder which contains the Uploader.js and uploader.css


![reactjs folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0iggm6le3i43amdeg0cu.png)

Make changes in the `App.js` files
```jsx
import Uploader from './components/Uploader/Uploader';
import './App.css';

function App() {
  return (
    <Uploader />
  );
}
export default App;

```

The Uploader.js component
```jsx
import { useState } from 'react'
import './uploader.css'
import { MdCloudUpload, MdDelete } from 'react-icons/md'
import { AiFillFileImage } from 'react-icons/ai'

function Uploader() {

  const [image, setImage] = useState(null)
  const [fileName, setFileName] = useState("No selected file")
  return (
    <main>
      <form
      onClick={() => document.querySelector(".input-field").click()}
      >
        <input type="file" accept='image/*' className='input-field' hidden 
        onChange={({ target: {files}}) => {
          files[0] && setFileName(files[0].name)
          if(files){
            setImage(URL.createObjectURL(files[0]))
          }
        }}
         />

        {image ?
        <img src={image} width={150} height={150} alt={fileName} />
        : 
        <>
        <MdCloudUpload color='#1475cf' size={60} />
        <p>Browse Files to upload</p>
        </>
      }

      </form>

      <section className='uploaded-row'>
        <AiFillFileImage color='#1475cf' />
        <span className='upload-content'>
          {fileName} - 
          <MdDelete
          onClick={() => {
            setFileName("No selected File")
            setImage(null)
          }}
           />
        </span>
      </section>

    </main>
  )
}

export default Uploader
```


final, let's style our component with style.css
```css
form{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px dashed #1475cf;
  height: 300px;
  width: 500px;
  cursor: pointer;
  border-radius: 5px;
}

.uploaded-row{
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-radius: 5px;
  background-color: #e9f0ff;
}

.upload-content{
  display: flex;
  align-items: center;
}
```

And that's all for this article, Happy coding.