Building a Stylish Photo Upload Component with React and Tailwind CSS

I write articles based on my experiences. Recently, I was building something which required users to attach their photo(s). The process is straightforward but quite often people find it difficult to add.

In this article, you will learn how to add the "Upload" component in React using Tailwind CSS(my favorite).

In modern web development, incorporating file upload functionalities into your React applications is a common requirement. Tailwind CSS, with its utility-first approach, can streamline the styling process, making the user interface sleek and responsive. In this tutorial, we'll walk through the process of creating a simple photo upload component using React and Tailwind CSS.

Let's break down the provided code and discuss each part in detail.

Understanding the Code

The Upload component is a functional component that manages the file upload functionality. It uses the useState hook to maintain the state of the selected file and whether the file is ready to be displayed.

File Drop Zone

import React, { useState } from "react";

function Upload() {
  const [file, setFile] = useState();
  const [show, setShow] = useState(true);

  function handleChange(e) {
    console.log(e.target.files);
    setFile(URL.createObjectURL(e.target.files[0]));
    setShow(false);
  }

  return (
    <div className="">
      {/* Upload UI */}
      {show ? (
        <div class="flex items-center justify-center w-full mb-6">
          <label
            for="dropzone-file"
            class="flex flex-col items-center justify-center w-full h-64 border-2 border-sky-300 border-dashed rounded-lg cursor-pointer bg-sky-600 dark:hover:bg-bray-800 hover:bg-sky-700"
          >
            {/* ... */}
          </label>
        </div>
      ) : (
        // Display uploaded image
        <div className="flex justify-center">
          <a href={file} download={true}>
            <img
              src={file}
              className="images md:h-[400px] rounded-lg mb-6 shadow-2xl drop-shadow-xl border-2 border-dashed border-blue-900 p-1"
            />
          </a>
        </div>
      )}
    </div>
  );
}

export default Upload;

Explaining the Upload UI

The UI is divided into two sections: the file drop zone and the displayed image. Let's focus on the file drop zone.

File Drop Zone

<label
  for="dropzone-file"
  class="flex flex-col items-center justify-center w-full h-64 border-2 border-sky-300 border-dashed rounded-lg cursor-pointer bg-sky-600 dark:hover:bg-bray-800 hover:bg-sky-700"
>
  {/* ... */}
</label>

This label serves as the drop zone for uploading files. It has a dashed border, a background color that changes on hover and is visually appealing. Users can click on the drop zone or drag and drop files onto it.

SVG Icon

<svg
  class="w-8 h-8 mb-4 text-white"
  aria-hidden="true"
  xmlns="http://www.w3.org/2000/svg"
  fill="none"
  viewBox="0 0 20 16"
>
  {/* ... */}
</svg>

This SVG icon adds a visual element to the drop zone. It represents a cloud and provides a clear indication of the purpose of the drop zone.

Text Information

<p class="mb-2 text-sm text-white ">
  <span class="font-semibold">Click to upload</span> or drag and drop
</p>
<p class="text-xs text-white">SVG, PNG, JPG, or WEBP</p>

These paragraphs provide information to the user, guiding them on how to upload files. The first paragraph emphasizes the action of clicking, while the second specifies the supported file formats.

File Input

<input
  id="dropzone-file"
  type="file"
  onChange={handleChange}
  accept="image/*"
  className="hidden"
/>

The actual file input element is hidden. When a user clicks on the drop zone, it triggers the file input's click event, allowing users to select files from their devices.

Displaying Uploaded Image

<a href={file} download={true}>
  <img
    src={file}
    className="images md:h-[400px] rounded-lg mb-6 shadow-2xl drop-shadow-xl border-2 border-dashed border-blue-900 p-1"
  />
</a>

Once a file is selected, the show state is set to false, and the uploaded image is displayed. The image is wrapped in a link (<a>) that allows users to download the uploaded image. The image has Tailwind CSS classes for styling, including rounded corners, shadows, and borders.

Conclusion

Creating a file upload component in React with Tailwind CSS provides a clean and visually appealing user interface. This tutorial breaks down the provided code, explaining each part in detail. You can customize and extend this component to suit the specific requirements of your application.

What are you waiting for? Go make something amazing with this and don't forget to tag me😀! Here are my socials: Sneha