React with Tailwind CSS File Upload Example

In this tutorial, we’ll create a file upload feature in your React application using Tailwind CSS. Before you begin, make sure your project has React, TypeScript, and Tailwind CSS installed and configured.

Install & Setup Tailwind CSS + React + Typescript + Vite

React File Upload Using Tailwind CSS

Create a simple file upload component using React hooks with Tailwind CSS.

import { useState } from 'react';

const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    setSelectedFile(e.target.files[0]);
  };

  const handleUpload = () => {
    console.log(selectedFile);
  };

  return (
    <div className="max-w-md mx-auto">
      <input
        type="file"
        onChange={handleFileChange}
        className="border border-gray-300 p-2 w-full"
      />
      <button
        onClick={handleUpload}
        className="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        Upload
      </button>
      {selectedFile && (
        <div className="mt-4">
          <p className="font-semibold">Selected File:</p>
          <p>{selectedFile.name}</p>
        </div>
      )}
    </div>
  );
};

export default FileUpload;

Create a file input button using React, TypeScript, and Tailwind CSS, then apply the file modifier for styling.

import React, { useState } from "react";

const FileUpload = () => {
  const [selectedFile, setSelectedFile] = useState<File | null>(null);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files && e.target.files.length > 0) {
      setSelectedFile(e.target.files[0]);
    }
  };

  const handleUpload = () => {
    console.log(selectedFile);
  };

  return (
    <div className="max-w-md mx-auto mt-20">
      <form className="flex items-center space-x-6">
        <div className="shrink-0">
          <img
            className="h-16 w-16 object-cover rounded-full"
            src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80"
            alt="Current profile photo"
          />
        </div>
        <label className="block">
          <span className="sr-only">Choose profile photo</span>
          <input
            type="file"
            onChange={handleFileChange}
            className="block w-full text-sm text-slate-500
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-violet-50 file:text-violet-700
              hover:file:bg-violet-100"
          />
        </label>
      </form>
      <button
        onClick={handleUpload}
        className="mt-4 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-md"
      >
        Upload
      </button>
      {selectedFile && (
        <div className="mt-4">
          <p className="font-semibold">Selected File:</p>
          <p>{selectedFile.name}</p>
        </div>
      )}
    </div>
  );
};

export default FileUpload;

react typescript tailwind file upload with button

Implement Multiple File Upload with React, TypeScript, and Tailwind CSS.

import React, { useState } from 'react';

const MultipleFileUpload = () => {
  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);

  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (e.target.files) {
      setSelectedFiles([...selectedFiles, ...Array.from(e.target.files)]);
    }
  };

  const handleUpload = () => {
    console.log(selectedFiles);
  };

  return (
    <div className="max-w-md mx-auto">
      <div className="mt-8">
        <label className="block">
          <span className="text-gray-700">Choose Files</span>
          <input
            type="file"
            onChange={handleFileChange}
            className="block w-full text-sm text-slate-500
              file:mr-4 file:py-2 file:px-4
              file:rounded-full file:border-0
              file:text-sm file:font-semibold
              file:bg-violet-50 file:text-violet-700
              hover:file:bg-violet-100"
            multiple
          />
        </label>
      </div>
      <button
        onClick={handleUpload}
        className="mt-4 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
      >
        Upload
      </button>
      {selectedFiles.length > 0 && (
        <div className="mt-4">
          <p className="font-semibold">Selected Files:</p>
          <ul>
            {selectedFiles.map((file, index) => (
              <li key={index}>{file.name}</li>
            ))}
          </ul>
        </div>
      )}
    </div>
  );
};

export default MultipleFileUpload;

Sources

react useState (react.dev)
File input buttons (tailwindcss.com/docs)

React with Tailwind CSS File Upload Example

React File Upload Using Tailwind CSS

See Also

Aaronn