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.
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
Make changes in the App.js files
import Uploader from './components/Uploader/Uploader';
import './App.css';
function App() {
return (
<Uploader />
);
}
export default App;
The Uploader.js component
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
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.
Top comments (0)