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