Building a React file upload UI seems simple, but making it production-ready, user-friendly, and visually appealing takes some planning.
In this guide, we’ll create a React file upload component that looks great and works smoothly.
You’ll learn best practices and tips to make your file upload UI accessible and fast.
By the end, you’ll have a fully functional, professional-looking file upload component ready to use in your projects.
Key Takeaways
- A file upload UI should be simple, quick, and easy for users to navigate.
- React, TypeScript, and Tailwind CSS make the code safe and simple to style.
- Make it accessible by allowing keyboard use, and add status messages.
- Limit file types and sizes to ensure safe and fast uploads.
- Keep sensitive data like API keys in environment variables, not in your codebase.
Why File Upload UI Matters
File uploads are a key part of many apps: profile pictures, documents, product images, and more. But just having a button to upload isn’t enough. A good upload UI should be:
- Easy to use: Users should know what’s happening and see errors clearly.
- Responsive: Works well on mobile and desktop devices.
- User-Friendly: Provides clear feedback and error handling.
- Scalable: Can manage large uploads and connect with cloud storage.
For file handling, you have to store files, validate types, and connect to cloud storage.
But you don’t have to build all of this yourself. Services like Filestack, Cloudinary, and Uploadcare simplify this process.
Tech Stack We’ll Use
- React: To build the UI with reusable components.
- TypeScript: Helps catch mistakes early and keeps code clean.
- Tailwind CSS: Makes styling fast and simple.
- File handling service: To simplify uploads and storage.
In this guide, I’ll use Filestack as an example, but you can use any other service as well. The setup process is almost similar for other providers.
Let’s start building it!
Step 1: Create a New React Vite Project
Start by creating a React and TypeScript project with Vite:
| npm create vite@latest file-upload-ui — –template react-ts cd file-upload-ui |
Step 2: Install and Configure Tailwind CSS
Install Tailwind with Vite support:
| npm install tailwindcss @tailwindcss/vite |
Update your vite.config.ts to include the plugin:
| import { defineConfig } from “vite”; import react from “@vitejs/plugin-react”; import tailwindcss from “@tailwindcss/vite”; // <– Add this // https://vite.dev/config/ export default defineConfig({ plugins: [ react(), // Enable React support tailwindcss() // Add Tailwind CSS plugin ], }); |
Import Tailwind CSS in src/index.css:
| @import “tailwindcss”; |
Run your dev server:
| npm run dev |
You should see the default Vite React starter app at http://localhost:5173.
Step 3: Add a File Handling Service
Install Filestack:
| npm install filestack-js |
For detailed documentation, visit Filestack Documentation.
Step 4: Set Up Filestack Account and Environment Variables
- Create a free account at Filestack.
- Copy your API key from the dashboard.
- Create a .env file in your project root and add the following:
| VITE_FILESTACK_API_KEY=your_filestack_api_key_here |
⚠️Important: Add .env to the .gitignore file to keep your API key secure.
Step 5: Create the File Upload Component
Step 5.1: Create the Component File
Make a new file src/components/FileUpload.tsx .
Step 5.2: Import Dependencies
Import React, state hook, and Filestack:
| import React, { useState } from “react”; import * as filestack from “filestack-js”; |
Step 5.3: Initialise the Client
Set up the client with your API key (from .env):
| const client = filestack.init(import.meta.env.VITE_FILESTACK_API_KEY); |
Step 5.4: Add the Upload Logic
Write a function to open the picker and handle uploads.
| const FileUpload: React.FC = () => { const [uploadStatus, setUploadStatus] = useState(“”); // Function to open the Filestack picker const openPicker = () => { client .picker({ fromSources: [ “local_file_system”, // Upload from computer “url”, // Enter a URL “imagesearch”, // Search for images “googledrive”, // Google Drive “dropbox”, // Dropbox “onedrive”, // OneDrive “github”, // GitHub “facebook”, // Facebook photos “instagram”, // Instagram “flickr”, // Flickr “webcam”, // Capture from webcam ], accept: [“image/*”, “application/pdf”], // Limit file types maxFiles: 5, // Max 5 files at a time onUploadDone: (res) => { console.log(“Files uploaded:”, res); // Provide accessible feedback setUploadStatus(“Upload complete!”); // Update state }, }) .open(); // Open the picker modal }; |
Here,
- client.picker({…}) opens Filestack’s upload modal.
- fromSources defines where users can upload files from.
- accept restricts file types to images and PDFs.
- maxFiles controls how many files can be uploaded at once.
- onUploadDone runs after successful uploads and updates the React state, which displays a screen-reader-friendly status message.
Step 5.5: Build the UI
| return ( <div className=“p-6 max-w-md mx-auto text-center”> <div className=“bg-white rounded-2xl shadow-xl p-6 md:p-10 text-center”> <header className=“mb-10”> <h1 className=“text-4xl font-bold text-slate-800 mb-2”> File Upload Demo </h1> </header> <main className=“p-8 border-2 border-dashed rounded-2xl bg-slate-50 flex flex-col justify-center items-center min-h-[300px]”> <button onClick={openPicker} aria-label=“Upload files using the file picker” className=“cursor-pointer bg-gradient-to-r from-sky-500 to-indigo-500 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 ease-in-out shadow-lg hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-sky-300 transform hover:-translate-y-2 hover:scale-110 hover:rotate-1 hover:from-indigo-600 hover:to-sky-600 active:scale-95” > Upload Files </button> {/* Upload status */} {uploadStatus && ( <p className=”mt-4 text-green-600 font-medium” aria-live=”polite”> {uploadStatus} </p> )} </main> </div> </div> ); |
Here, the button uses aria-label and the status message is wrapped in a <p> with aria-live=”polite”, improving accessibility by ensuring users relying on assistive technologies are informed about the upload action and its completion.
Step 5.6: Export the Component
| export default FileUpload; |
Putting it All Together:
| import React, { useState } from “react”; import * as filestack from “filestack-js”; // Initialise Filestack client with API key const client = filestack.init(import.meta.env.VITE_FILESTACK_API_KEY); const FileUpload: React.FC = () => { const [uploadStatus, setUploadStatus] = useState(“”); // Function to open the Filestack picker const openPicker = () => { client .picker({ fromSources: [ “local_file_system”, // Upload from computer “url”, // Enter a URL “imagesearch”, // Search for images “googledrive”, // Google Drive “dropbox”, // Dropbox “onedrive”, // OneDrive “github”, // GitHub “facebook”, // Facebook photos “instagram”, // Instagram “flickr”, // Flickr “webcam”, // Capture from webcam ], accept: [“image/*”, “application/pdf”], // Limit file types maxFiles: 5, // Max 5 files at a time onUploadDone: (res) => { console.log(“Files uploaded:”, res); // Provide accessible feedback setUploadStatus(“Upload complete!”); // Update state }, }) .open(); // Open the picker modal }; return ( <div className=“p-6 max-w-md mx-auto text-center”> <div className=“bg-white rounded-2xl shadow-xl p-6 md:p-10 text-center”> <header className=“mb-10”> <h1 className=“text-4xl font-bold text-slate-800 mb-2”> File Upload Demo </h1> </header> <main className=“p-8 border-2 border-dashed rounded-2xl bg-slate-50 flex flex-col justify-center items-center min-h-[300px]”> <button onClick={openPicker} aria-label=“Upload files using the file picker” className=“cursor-pointer bg-gradient-to-r from-sky-500 to-indigo-500 text-white font-bold py-4 px-8 rounded-xl transition-all duration-300 ease-in-out shadow-lg hover:shadow-2xl focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-sky-300 transform hover:-translate-y-2 hover:scale-110 hover:rotate-1 hover:from-indigo-600 hover:to-sky-600 active:scale-95” > Upload Files </button> {/* Upload status */} {uploadStatus && ( <p className=”mt-4 text-green-600 font-medium” aria-live=”polite”> {uploadStatus} </p> )} </main> </div> </div> ); }; export default FileUpload; |
Note: Keyboard navigation is supported in the Filestack modal; users can move through buttons and interactive elements using Tab/Shift+Tab and activate actions with Enter or Space.
Step 6: Use the Component in Your App
Update src/App.tsx like this:
| // src/App.tsx import React from “react”; import FileUpload from “./components/FileUpload”; const App: React.FC = () => { return ( <div className=“min-h-screen flex items-center justify-center bg-gray-100”> <FileUpload /> </div> ); }; export default App; |
This renders the FileUpload component in a centred layout, ready for users to interact.
Step 7: Custom Styling for Filestack Picker
Now let’s customise the look and feel of Filestack’s default drag-and-drop modal using Tailwind classes.
Filestack supports predictable class names like .fsp-picker and .fsp-button–primary. This makes it easy to use Tailwind’s @apply directive to create custom styles without worrying about breaking changes.
Get the code from here to add to your index.css file.
Here’s what it looks like after the changes:
Best Practices
Here are some best practices to keep in mind while building a file uploader UI:
- Allow only certain file types and sizes to keep things safe and fast.
- Show clear error messages if something goes wrong.
- Keep API keys in environment files, not in the code.
- Make sure the UI works well on phones and computers.
- Check accessibility with screen readers and keyboard navigation.
Takeaways
Building a file upload UI in React doesn’t have to be difficult. With TypeScript, Tailwind CSS, and Filestack, you can easily set up a component that’s fast, good-looking, and easy for everyone to use.
This setup has many benefits, like clear code with TypeScript, clean design with Tailwind, and powerful file handling with Filestack.
In the end, this approach saves you time, avoids common mistakes, and makes sure your users get a smooth and reliable upload experience.
