How to Create Custom File Upload Input Control with React and CSS

Charles Kasasira — Tue, 25 Oct 2022 13:33:48 +0000

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.

How to create a simple modal/popup with reactjs and tailwindcss

Charles Kasasira — Thu, 29 Sep 2022 13:17:51 +0000

What we will build

Hello Hope all is well, in this article I share on how to create a simple popup or modal component in reactjs using the useState hook. for the styles I will be using tailwindcss.

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.

npx create-react-app react-modal

Adding Tailwindcss to a react js project

To install tailwindcss in reactjs is very easy. you will only need this few commands
first make sure you are in the project folder that is you should be able to see the node modules folder and other folders plus files. then just copy and paste these commands

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Then update the tailwind.config.js file, this should be in the root of your project, that is next the package.json file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Then next, add these Add the Tailwind directives to your index.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwindcss is configured

Installing React-icons

  npm install react-icons

This package will help us use the different icons, for this component, we shall use one in particular, the (IoWarning) icon, you can checkout React-icons for all the available icons.

Creating Modal using useState Hook

In the App.js file, we setup the button which will trigger our model.

import { useState } from 'react'
import Modal from './Modal'

function App() {
  const [popUp, setPopUp] = useState(false)

  return (
    <div className='p-20'>
      <div className='flex gap-8 items-center mb-10'>
        <div className='bg-gray-700 text-white w-16 h-16 rounded-full flex items-center justify-center'>
          CK
        </div>
        <div className='flex flex-col justify-center'>
          <h1 className='font-bold text-3xl'>Charles Kasasira</h1>
          <p className='text-gray-700'>Web developer</p>
        </div>
      </div>
      <button className='outline outline-1 px-3 py-2 hover:bg-black hover:text-white'
      onClick={() => setPopUp(true)}
      >Open Modal</button>
      {popUp && <Modal setPopUp={setPopUp} />}
    </div>
  );
}

export default App;

Modal Component
This is our model component, you can watch more of the explanation on my youtube channel https://youtube.com/charleskasasira

import React from 'react'
import { IoWarning} from 'react-icons/io5'

function Modal({setPopUp}) {
  return (
    <div className='w-screen h-screen bg-black bg-opacity-30 fixed top-0 right-0 flex justify-center items-center'>
      <div className='bg-white p-10 rounded-md shadow-md'>
        <h1 className='font-bold text-center text-lg my-5'>Delete User</h1>
        <p>
          Are you sure you want to delete <b>Charle Kasasira</b>
          <p className='bg-[#ffe9d9] p-2 border-l-2 border-[#fa703f] text-[#bc4c2e] flex flex-col text-sm my-1'>
            <span className='text-[#771505] font-bold flex items-center gap-1'>
              <IoWarning />
              Warning
            </span>
            By Deleting this account, you won't be able to access the system.
          </p>
        </p>
        <div className='flex justify-between mt-5'>
          <button className='outline outline-1 outline-[#101f20] bg-[#101f20] text-white py-2 px-4 hover:bg-transparent hover:text-black'
          onClick={() => setPopUp(false)}
          >No, Cancel</button>
          <button className='outline outline-1 outline-[#101f20] hover:bg-[#101f20] hover:text-white py-2 px-4 bg-transparent text-black'
          onClick={() => console.log("Please like and subscribe")}
          >Yes, Delete</button>
        </div>
      </div>
    </div>
  )
}

export default Modal

And that's it. hope this was helpful.

DEV Community: Charles Kasasira

How to Create Custom File Upload Input Control with React and CSS

What we will build

Create React App

Project structue

How to create a simple modal/popup with reactjs and tailwindcss

What we will build

Create React App

Adding Tailwindcss to a react js project

Installing React-icons

Creating Modal using useState Hook