File Upload

This tailwind example is contributed by Rajesh Maheshwari, on 28-Feb-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are popup,dialog

Card Form Input Modal

Author Rajesh Maheshwari

Tailwind v3.4 1.4k 3

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">

<div class="bg-white p-8 rounded-xl shadow-xl max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 text-center mb-6">Upload Your File</h2>
        
        
        <div class="flex flex-col items-center justify-center p-6 border-2 border-dashed border-gray-300 rounded-xl hover:border-blue-500 transition-all duration-300">
            
            <svg class="w-16 h-16 text-blue-500 mb-4 transition-all duration-300" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
            </svg>

<input id="file-upload" type="file" class="hidden" />
            
            
            <label for="file-upload" class="text-gray-600 cursor-pointer text-center hover:text-blue-600 transition-all duration-300">
                <span class="block text-xl font-medium">Drag & Drop your file here</span>
                <span class="block text-sm text-gray-400">Or click to browse</span>
            </label>

<div id="file-name" class="mt-3 text-gray-700 text-sm font-medium hidden">No file selected</div>
        </div>
        
        
        <button id="upload-btn" class="w-full mt-6 py-2 px-4 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 transition-all duration-300" disabled>Upload</button>
    </div>

// Display file name after selection
        fileInput.addEventListener('change', () => {
            if (fileInput.files.length > 0) {
                fileNameDisplay.textContent = fileInput.files[0].name;
                fileNameDisplay.classList.remove('hidden');
                uploadButton.removeAttribute('disabled');
            } else {
                fileNameDisplay.textContent = 'No file selected';
                fileNameDisplay.classList.add('hidden');
                uploadButton.setAttribute('disabled', 'true');
            }
        });
    </script>

</body>