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;
Sources
react useState (react.dev)
File input buttons (tailwindcss.com/docs)
See Also
👉 How to Add Drag-and-Drop Image Upload with Dropzone in React Using Tailwind CSS
👉How to Use Toastify in React with Tailwind CSS
👉NextJS Alert Message Tutorial with Tailwind CSS
Top comments (1)
Wonderful! You are a very talented developer.