Skip to content

Commit 8d49b6e

Browse files
Avtech04Avtech04
committed
File Uplaoding using JS
1 parent d36fa4d commit 8d49b6e

File tree

4 files changed

+396
-0
lines changed

4 files changed

+396
-0
lines changed

‎FileUploadingJS/index.html

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
<!DOCTYPE html>
2+
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
3+
<html lang="en">
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>File Upload with Progress Bar | CodingNepal</title>
8+
9+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
10+
<style>
11+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
12+
::selection{
13+
color: #fff;
14+
background: #6990F2;
15+
}
16+
.wrapper{
17+
width: 430px;
18+
background: #fff;
19+
border-radius: 5px;
20+
padding: 30px;
21+
box-shadow: 7px 7px 12px rgba(0,0,0,0.05);
22+
}
23+
.wrapper header{
24+
color: #6990F2;
25+
font-size: 27px;
26+
font-weight: 600;
27+
text-align: center;
28+
}
29+
.wrapper form{
30+
height: 167px;
31+
display: flex;
32+
cursor: pointer;
33+
margin: 30px 0;
34+
align-items: center;
35+
justify-content: center;
36+
flex-direction: column;
37+
border-radius: 5px;
38+
border: 2px dashed #6990F2;
39+
}
40+
form :where(i, p){
41+
color: #6990F2;
42+
}
43+
form i{
44+
font-size: 50px;
45+
}
46+
form p{
47+
margin-top: 15px;
48+
font-size: 16px;
49+
}
50+
51+
section .row{
52+
margin-bottom: 10px;
53+
background: #E9F0FF;
54+
list-style: none;
55+
padding: 15px 20px;
56+
border-radius: 5px;
57+
display: flex;
58+
align-items: center;
59+
justify-content: space-between;
60+
}
61+
section .row i{
62+
color: #6990F2;
63+
font-size: 30px;
64+
}
65+
section .details span{
66+
font-size: 14px;
67+
}
68+
.progress-area .row .content{
69+
width: 100%;
70+
margin-left: 15px;
71+
}
72+
.progress-area .details{
73+
display: flex;
74+
align-items: center;
75+
margin-bottom: 7px;
76+
justify-content: space-between;
77+
}
78+
.progress-area .content .progress-bar{
79+
height: 6px;
80+
width: 100%;
81+
margin-bottom: 4px;
82+
background: #fff;
83+
border-radius: 30px;
84+
}
85+
.content .progress-bar .progress{
86+
height: 100%;
87+
width: 0%;
88+
background: #6990F2;
89+
border-radius: inherit;
90+
}
91+
.uploaded-area{
92+
max-height: 232px;
93+
overflow-y: scroll;
94+
}
95+
.uploaded-area.onprogress{
96+
max-height: 150px;
97+
}
98+
.uploaded-area::-webkit-scrollbar{
99+
width: 0px;
100+
}
101+
.uploaded-area .row .content{
102+
display: flex;
103+
align-items: center;
104+
}
105+
.uploaded-area .row .details{
106+
display: flex;
107+
margin-left: 15px;
108+
flex-direction: column;
109+
}
110+
.uploaded-area .row .details .size{
111+
color: #404040;
112+
font-size: 11px;
113+
}
114+
.uploaded-area i.fa-check{
115+
font-size: 16px;
116+
}
117+
</style>
118+
119+
</head>
120+
<body>
121+
<div class="wrapper">
122+
<header>File Uploader JavaScript</header>
123+
<form action="#">
124+
<input class="file-input" type="file" name="file" hidden>
125+
<i class="fas fa-cloud-upload-alt"></i>
126+
<p>Browse File to Upload</p>
127+
</form>
128+
<section class="progress-area"></section>
129+
<section class="uploaded-area"></section>
130+
</div>
131+
132+
<script>const form = document.querySelector("form"),
133+
fileInput = document.querySelector(".file-input"),
134+
progressArea = document.querySelector(".progress-area"),
135+
uploadedArea = document.querySelector(".uploaded-area");
136+
137+
// form click event
138+
form.addEventListener("click", () =>{
139+
fileInput.click();
140+
});
141+
142+
fileInput.onchange = ({target})=>{
143+
let file = target.files[0]; //getting file [0] this means if user has selected multiple files then get first one only
144+
if(file){
145+
let fileName = file.name; //getting file name
146+
if(fileName.length >= 12){ //if file name length is greater than 12 then split it and add ...
147+
let splitName = fileName.split('.');
148+
fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
149+
}
150+
uploadFile(fileName); //calling uploadFile with passing file name as an argument
151+
}
152+
}
153+
154+
// file upload function
155+
function uploadFile(name){
156+
let xhr = new XMLHttpRequest(); //creating new xhr object (AJAX)
157+
xhr.open("POST", "php/upload.php"); //sending post request to the specified URL
158+
xhr.upload.addEventListener("progress", ({loaded, total}) =>{ //file uploading progress event
159+
let fileLoaded = Math.floor((loaded / total) * 100); //getting percentage of loaded file size
160+
let fileTotal = Math.floor(total / 1000); //gettting total file size in KB from bytes
161+
let fileSize;
162+
// if file size is less than 1024 then add only KB else convert this KB into MB
163+
(fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024*1024)).toFixed(2) + " MB";
164+
let progressHTML = `<li class="row">
165+
<i class="fas fa-file-alt"></i>
166+
<div class="content">
167+
<div class="details">
168+
<span class="name">${name} • Uploading</span>
169+
<span class="percent">${fileLoaded}%</span>
170+
</div>
171+
<div class="progress-bar">
172+
<div class="progress" style="width: ${fileLoaded}%"></div>
173+
</div>
174+
</div>
175+
</li>`;
176+
// uploadedArea.innerHTML = ""; //uncomment this line if you don't want to show upload history
177+
uploadedArea.classList.add("onprogress");
178+
progressArea.innerHTML = progressHTML;
179+
if(loaded == total){
180+
progressArea.innerHTML = "";
181+
let uploadedHTML = `<li class="row">
182+
<div class="content upload">
183+
<i class="fas fa-file-alt"></i>
184+
<div class="details">
185+
<span class="name">${name} • Uploaded</span>
186+
<span class="size">${fileSize}</span>
187+
</div>
188+
</div>
189+
<i class="fas fa-check"></i>
190+
</li>`;
191+
uploadedArea.classList.remove("onprogress");
192+
// uploadedArea.innerHTML = uploadedHTML; //uncomment this line if you don't want to show upload history
193+
uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML); //remove this line if you don't want to show upload history
194+
}
195+
});
196+
let data = new FormData(form); //FormData is an object to easily send form data
197+
xhr.send(data); //sending form data
198+
}
199+
</script>
200+
201+
</body>
202+
</html>

‎FileUploadingJS/php/upload.php

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?php
2+
$file_name = $_FILES['file']['name']; //getting file name
3+
$tmp_name = $_FILES['file']['tmp_name']; //getting temp_name of file
4+
$file_up_name = time().$file_name; //making file name dynamic by adding time before file name
5+
move_uploaded_file($tmp_name, "files/".$file_up_name); //moving file to the specified folder with dynamic name
6+
?>

‎FileUploadingJS/script.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
const form = document.querySelector("form"),
2+
fileInput = document.querySelector(".file-input"),
3+
progressArea = document.querySelector(".progress-area"),
4+
uploadedArea = document.querySelector(".uploaded-area");
5+
6+
// form click event
7+
form.addEventListener("click", () =>{
8+
fileInput.click();
9+
});
10+
11+
fileInput.onchange = ({target})=>{
12+
let file = target.files[0]; //getting file [0] this means if user has selected multiple files then get first one only
13+
if(file){
14+
let fileName = file.name; //getting file name
15+
if(fileName.length >= 12){ //if file name length is greater than 12 then split it and add ...
16+
let splitName = fileName.split('.');
17+
fileName = splitName[0].substring(0, 13) + "... ." + splitName[1];
18+
}
19+
uploadFile(fileName); //calling uploadFile with passing file name as an argument
20+
}
21+
}
22+
23+
// file upload function
24+
function uploadFile(name){
25+
let xhr = new XMLHttpRequest(); //creating new xhr object (AJAX)
26+
xhr.open("POST", "php/upload.php"); //sending post request to the specified URL
27+
xhr.upload.addEventListener("progress", ({loaded, total}) =>{ //file uploading progress event
28+
let fileLoaded = Math.floor((loaded / total) * 100); //getting percentage of loaded file size
29+
let fileTotal = Math.floor(total / 1000); //gettting total file size in KB from bytes
30+
let fileSize;
31+
// if file size is less than 1024 then add only KB else convert this KB into MB
32+
(fileTotal < 1024) ? fileSize = fileTotal + " KB" : fileSize = (loaded / (1024*1024)).toFixed(2) + " MB";
33+
let progressHTML = `<li class="row">
34+
<i class="fas fa-file-alt"></i>
35+
<div class="content">
36+
<div class="details">
37+
<span class="name">${name} • Uploading</span>
38+
<span class="percent">${fileLoaded}%</span>
39+
</div>
40+
<div class="progress-bar">
41+
<div class="progress" style="width: ${fileLoaded}%"></div>
42+
</div>
43+
</div>
44+
</li>`;
45+
// uploadedArea.innerHTML = ""; //uncomment this line if you don't want to show upload history
46+
uploadedArea.classList.add("onprogress");
47+
progressArea.innerHTML = progressHTML;
48+
if(loaded == total){
49+
progressArea.innerHTML = "";
50+
let uploadedHTML = `<li class="row">
51+
<div class="content upload">
52+
<i class="fas fa-file-alt"></i>
53+
<div class="details">
54+
<span class="name">${name} • Uploaded</span>
55+
<span class="size">${fileSize}</span>
56+
</div>
57+
</div>
58+
<i class="fas fa-check"></i>
59+
</li>`;
60+
uploadedArea.classList.remove("onprogress");
61+
// uploadedArea.innerHTML = uploadedHTML; //uncomment this line if you don't want to show upload history
62+
uploadedArea.insertAdjacentHTML("afterbegin", uploadedHTML); //remove this line if you don't want to show upload history
63+
}
64+
});
65+
let data = new FormData(form); //FormData is an object to easily send form data
66+
xhr.send(data); //sending form data
67+
}

‎FileUploadingJS/style.css

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
/* Import Google font - Poppins */
2+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
body{
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
min-height: 100vh;
14+
background: #6990F2;
15+
}
16+
17+
::selection{
18+
color: #fff;
19+
background: #6990F2;
20+
}
21+
.wrapper{
22+
width: 430px;
23+
background: #fff;
24+
border-radius: 5px;
25+
padding: 30px;
26+
box-shadow: 7px 7px 12px rgba(0,0,0,0.05);
27+
}
28+
.wrapper header{
29+
color: #6990F2;
30+
font-size: 27px;
31+
font-weight: 600;
32+
text-align: center;
33+
}
34+
.wrapper form{
35+
height: 167px;
36+
display: flex;
37+
cursor: pointer;
38+
margin: 30px 0;
39+
align-items: center;
40+
justify-content: center;
41+
flex-direction: column;
42+
border-radius: 5px;
43+
border: 2px dashed #6990F2;
44+
}
45+
form :where(i, p){
46+
color: #6990F2;
47+
}
48+
form i{
49+
font-size: 50px;
50+
}
51+
form p{
52+
margin-top: 15px;
53+
font-size: 16px;
54+
}
55+
56+
section .row{
57+
margin-bottom: 10px;
58+
background: #E9F0FF;
59+
list-style: none;
60+
padding: 15px 20px;
61+
border-radius: 5px;
62+
display: flex;
63+
align-items: center;
64+
justify-content: space-between;
65+
}
66+
section .row i{
67+
color: #6990F2;
68+
font-size: 30px;
69+
}
70+
section .details span{
71+
font-size: 14px;
72+
}
73+
.progress-area .row .content{
74+
width: 100%;
75+
margin-left: 15px;
76+
}
77+
.progress-area .details{
78+
display: flex;
79+
align-items: center;
80+
margin-bottom: 7px;
81+
justify-content: space-between;
82+
}
83+
.progress-area .content .progress-bar{
84+
height: 6px;
85+
width: 100%;
86+
margin-bottom: 4px;
87+
background: #fff;
88+
border-radius: 30px;
89+
}
90+
.content .progress-bar .progress{
91+
height: 100%;
92+
width: 0%;
93+
background: #6990F2;
94+
border-radius: inherit;
95+
}
96+
.uploaded-area{
97+
max-height: 232px;
98+
overflow-y: scroll;
99+
}
100+
.uploaded-area.onprogress{
101+
max-height: 150px;
102+
}
103+
.uploaded-area::-webkit-scrollbar{
104+
width: 0px;
105+
}
106+
.uploaded-area .row .content{
107+
display: flex;
108+
align-items: center;
109+
}
110+
.uploaded-area .row .details{
111+
display: flex;
112+
margin-left: 15px;
113+
flex-direction: column;
114+
}
115+
.uploaded-area .row .details .size{
116+
color: #404040;
117+
font-size: 11px;
118+
}
119+
.uploaded-area i.fa-check{
120+
font-size: 16px;
121+
}

0 commit comments

Comments
 (0)