Skip to content

Commit a232663

Browse files
navnee1hnavnee1h
authored
Update index.html
1 parent f5f729b commit a232663

File tree

1 file changed

+143
-11
lines changed

1 file changed

+143
-11
lines changed

‎index.html

+143-11
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
<!DOCTYPE html>
33
<html>
44
<head>
5-
6-
<title>File Upload</title>
5+
<title>Upload Your Files/title>
76
<style>
87
body {
98
font-family: Arial, sans-serif;
@@ -14,14 +13,17 @@
1413
justify-content: center;
1514
align-items: center;
1615
height: 100vh;
17-
}
16+
flex-direction: column;
17+
}
1818

1919
#upload-form {
2020
background-color: #fff;
2121
padding: 20px;
2222
border-radius: 8px;
23-
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
23+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
2424
text-align: center;
25+
max-width: 400px;
26+
width: 90%;
2527
}
2628

2729
h2 {
@@ -30,32 +32,162 @@
3032

3133
input[type="file"] {
3234
margin-bottom: 10px;
35+
width: 100%;
36+
box-sizing: border-box;
3337
}
3438

35-
input[type="submit"] {
39+
input[type="button"] {
3640
background-color: #4caf50;
3741
color: #fff;
3842
border: none;
3943
padding: 10px 20px;
4044
border-radius: 5px;
4145
cursor: pointer;
42-
transition: background-color 0.3s ease;
46+
transition: background-color 0.3s ease, transform 0.2s ease;
47+
width: 100%;
48+
box-sizing: border-box;
4349
}
4450

45-
input[type="submit"]:hover {
51+
input[type="button"]:hover {
4652
background-color: #45a049;
53+
transform: scale(1.05);
54+
}
55+
56+
#progress-bar {
57+
width: 100%;
58+
height: 20px;
59+
margin-top: 10px;
60+
display: none;
61+
border-radius: 10px;
62+
overflow: hidden;
63+
background-color: #ddd;
64+
}
65+
66+
#progress-bar::-webkit-progress-bar {
67+
background-color: #ddd;
68+
}
69+
70+
#progress-bar::-webkit-progress-value {
71+
background-color: #4caf50;
72+
transition: width 0.3s ease-in-out;
73+
}
74+
75+
#progress-bar::-moz-progress-bar {
76+
background-color: #4caf50;
77+
transition: width 0.3s ease-in-out;
78+
}
79+
80+
#status {
81+
margin-top: 10px;
82+
font-size: 14px;
83+
color: #555;
84+
min-height: 40px;
85+
line-height: 20px;
86+
text-align: left;
87+
display: flex;
88+
align-items: center;
89+
justify-content: center;
90+
background: #f4f4f4;
91+
padding: 5px;
92+
border: 1px solid #ddd;
93+
border-radius: 5px;
94+
width: 100%;
95+
box-sizing: border-box;
96+
overflow: hidden;
97+
word-wrap: break-word;
98+
}
99+
100+
/* Responsive Design */
101+
@media (max-width: 768px) {
102+
#upload-form {
103+
padding: 15px;
104+
}
105+
106+
input[type="file"], input[type="button"] {
107+
font-size: 14px;
108+
padding: 10px;
109+
}
110+
111+
#status {
112+
font-size: 12px;
113+
}
47114
}
48115
</style>
49116
</head>
50117
<body>
51118
<div id="upload-form">
52119
<h2>Upload Multiple Files</h2>
53-
<form action="upload" method="post" enctype="multipart/form-data">
54-
<input type="file" name="files[]" multiple>
120+
<form id="fileUploadForm" enctype="multipart/form-data">
121+
<input type="file" id="fileInput" name="files[]" multiple>
55122
<br>
56-
<input type="submit" value="Upload">
123+
<input type="button" value="Upload" id="uploadButton">
124+
<progress id="progress-bar" value="0" max="100"></progress>
125+
<div id="status">Waiting for upload...</div>
57126
</form>
58127
</div>
128+
129+
<script>
130+
document.getElementById('uploadButton').addEventListener('click', function() {
131+
const form = document.getElementById('fileUploadForm');
132+
const files = document.getElementById('fileInput').files;
133+
const progressBar = document.getElementById('progress-bar');
134+
const status = document.getElementById('status');
135+
136+
if (files.length === 0) {
137+
alert('Please select at least one file.');
138+
return;
139+
}
140+
141+
const formData = new FormData();
142+
for (let i = 0; i < files.length; i++) {
143+
formData.append('files[]', files[i]);
144+
}
145+
146+
const xhr = new XMLHttpRequest();
147+
xhr.open('POST', '/upload', true);
148+
149+
// Show the progress bar and reset status
150+
progressBar.style.display = 'block';
151+
status.textContent = 'Starting upload...';
152+
153+
let startTime = Date.now();
154+
155+
// Update progress bar and calculate transfer speed
156+
xhr.upload.onprogress = function(event) {
157+
if (event.lengthComputable) {
158+
const percentComplete = (event.loaded / event.total) * 100;
159+
progressBar.value = percentComplete;
160+
161+
const elapsedTime = (Date.now() - startTime) / 1000; // time in seconds
162+
const speed = (event.loaded / elapsedTime) / (1024 * 1024); // speed in MB/s
163+
status.textContent = `Transferred: ${Math.round(event.loaded / (1024 * 1024))} MB /
164+
${Math.round(event.total / (1024 * 1024))} MB
165+
(${percentComplete.toFixed(2)}%) at ${speed.toFixed(2)} MB/s`;
166+
}
167+
};
168+
169+
xhr.onload = function() {
170+
if (xhr.status === 200) {
171+
alert('Files uploaded successfully!');
172+
progressBar.value = 0;
173+
progressBar.style.display = 'none';
174+
status.textContent = 'Upload completed successfully!';
175+
} else {
176+
alert('An error occurred while uploading files.');
177+
}
178+
};
179+
180+
// Handle errors
181+
xhr.onerror = function() {
182+
alert('An error occurred while uploading files.');
183+
progressBar.value = 0;
184+
progressBar.style.display = 'none';
185+
status.textContent = 'Upload failed. Please try again.';
186+
};
187+
188+
xhr.send(formData);
189+
});
190+
</script>
59191
</body>
60192
</html>
61-
<!-- code by navnee1h -->
193+
<!-- code by navnee1h -->

0 commit comments

Comments
 (0)