React with Tailwind CSS File Upload Example

#react #tailwindcss #webdev

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.

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;

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;