<div class="upload-wrapper">
<div class="file-box">
<input type="file" id="uploadFile" hidden>
<label for="uploadFile" class="upload-btn">Choose File</label>
<span id="fileName">No file chosen</span>
</div>
<div class="progress-area" id="progressArea" style="display:none;">
<div class="progress-bar">
<div class="progress-fill" id="fill"></div>
</div>
<span class="progress-text" id="text">0%</span>
</div>
</div>
.upload-wrapper {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #e5e7eb;
border-radius: 12px;
background: #fff;
}
.file-box {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.upload-btn {
background: #1f2937;
color: white;
padding: 10px 20px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
}
.upload-btn:hover {
background: #374151;
}
#fileName {
color: #6b7280;
font-size: 0.9rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.progress-area {
display: flex;
align-items: center;
gap: 10px;
}
.progress-bar {
flex: 1;
height: 8px;
background: #f3f4f6;
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
width: 0%;
background: #3b82f6;
transition: width 0.2s;
}
.progress-text {
font-size: 0.85rem;
font-weight: 600;
color: #3b82f6;
}
const fileInput = document.getElementById("uploadFile");
const fileName = document.getElementById("fileName");
const progressArea = document.getElementById("progressArea");
const fill = document.getElementById("fill");
const text = document.getElementById("text");
fileInput.addEventListener("change", (e) => {
const file = e.target.files[0];
if (file) {
fileName.innerText = file.name;
uploadFile(file);
}
});
function uploadFile(file) {
progressArea.style.display = "flex";
let progress = 0;
// Simulate upload
const interval = setInterval(() => {
progress += 5;
if (progress > 100) {
clearInterval(interval);
text.innerText = "Done";
fill.style.backgroundColor = "#10b981";
} else {
fill.style.width = `${progress}%`;
text.innerText = `${progress}%`;
}
}, 100);
}