Description:
A user-friendly file uploader tool with drag-and-drop functionality, real-time progress bar, and file type validation. Easily upload files by dragging them onto the designated area or by selecting them through a conventional file input. Monitor the upload progress in real-time, ensuring a seamless and intuitive file-sharing experience
Develop a File Uploader tool with drag-and-drop functionality, progress bar, and file type validation. Write the code in HTML, CSS, and JavaScript.
Project tool -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>File Uploader</title> <style> body { font-family: Arial, sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; } #uploader-container { text-align: center; } #drop-zone { border: 2px dashed #ccc; padding: 20px; cursor: pointer; } #progress-bar-container { margin-top: 20px; display: none; } #progress-bar { width: 0; height: 20px; background-color: #4CAF50; } </style> </head> <body> <div id="uploader-container"> <div id="drop-zone" ondrop="handleDrop(event)" ondragover="handleDragOver(event)"> <p>Drag & Drop files here or click to select files</p> <input type="file" id="file-input" style="display: none;" onchange="handleFiles(this.files)"> </div> <div id="progress-bar-container"> <div id="progress-bar"></div> </div> </div> <script> function handleDragOver(event) { event.preventDefault(); event.dataTransfer.dropEffect = 'copy'; } function handleDrop(event) { event.preventDefault(); const files = event.dataTransfer.files; handleFiles(files); } function handleFiles(files) { const fileInput = document.getElementById('file-input'); fileInput.files = files; uploadFiles(); } function uploadFiles() { const files = document.getElementById('file-input').files; const progressBarContainer = document.getElementById('progress-bar-container'); const progressBar = document.getElementById('progress-bar'); // Reset progress bar progressBar.style.width = '0%'; // Display progress bar progressBarContainer.style.display = 'block'; // Simulate file upload (replace this with actual AJAX upload) simulateUpload(files); } function simulateUpload(files) { const progressBar = document.getElementById('progress-bar'); const totalSize = Array.from(files).reduce((acc, file) => acc + file.size, 0); let uploadedSize = 0; const interval = setInterval(() => { // Simulate progress uploadedSize += 10240; // Increment by 10 KB // Update progress bar const progressPercentage = (uploadedSize / totalSize) * 100; progressBar.style.width = `${progressPercentage}%`; // Check if upload is complete if (uploadedSize >= totalSize) { clearInterval(interval); progressBarContainer.style.display = 'none'; alert('Upload complete!'); } }, 200); } </script> </body> </html>
Certainly! Below is an example code for a File Uploader tool with drag-and-drop functionality, progress bar, and file type validation using HTML, CSS, and JavaScript:
No comments:
Post a Comment