Skip to content

Commit 63539fd

Browse files
Dinesh1042Dinesh1042
authored
Upload Drag and Drop
1 parent fcdc3d0 commit 63539fd

File tree

5 files changed

+288
-0
lines changed

5 files changed

+288
-0
lines changed

‎Upload Drag and Drop/asset/upload.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎Upload Drag and Drop/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Upload File</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<script defer src="./script.js"></script>
10+
<script src="https://unpkg.com/ionicons@5.4.0/dist/ionicons.js"></script>
11+
</head>
12+
<body>
13+
<section>
14+
<div class="container">
15+
<header>
16+
<h1>Upload your files</h1>
17+
<p>File should be Image, Video</p>
18+
</header>
19+
<div class="dropArea" id="dropArea">
20+
<div class="contentHolder">
21+
<img src="./asset/upload.svg" draggable="false" alt="upload-icon" />
22+
<p id="dropText">Drag & Drop your files</p>
23+
<span>Or</span>
24+
<input type="file" multiple id="uploadInput" />
25+
<button id="browseBtn">Browse File</button>
26+
</div>
27+
</div>
28+
<div class="uploadedFileCont" id="uploadedFileCont"></div>
29+
<div class="uploadBtnCont" id="uploadBtnCont">
30+
<button class="uploadBtn">Upload</button>
31+
</div>
32+
</div>
33+
</section>
34+
</body>
35+
</html>

‎Upload Drag and Drop/readMe.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Upload - Drag and drop
2+
3+
![Upload - Drag and drop]()

‎Upload Drag and Drop/script.js‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
const uploadInputEl = document.getElementById("uploadInput");
2+
const dropAreaEl = document.getElementById("dropArea");
3+
const uploadedFileContEl = document.getElementById("uploadedFileCont");
4+
const uploadBtnContEl = document.getElementById("uploadBtnCont");
5+
const browseBtnEl = document.getElementById("browseBtn");
6+
const dropTextEl = document.getElementById("dropText");
7+
8+
dropAreaEl.addEventListener("dragover", dragOver);
9+
dropAreaEl.addEventListener("dragleave", dragLeave);
10+
dropAreaEl.addEventListener("drop", dropItem);
11+
browseBtnEl.addEventListener("click", browseFile);
12+
uploadInputEl.addEventListener("change", uploadFile);
13+
14+
let files = [];
15+
16+
function dragOver(e) {
17+
e.preventDefault();
18+
this.classList.add("content-over");
19+
dropTextEl.innerHTML = `Release to Upload files`;
20+
}
21+
22+
function dragLeave(e) {
23+
e.preventDefault();
24+
this.classList.remove("content-over");
25+
dropTextEl.innerHTML = `Drag & Drop your files`;
26+
}
27+
28+
function browseFile() {
29+
uploadInputEl.click();
30+
}
31+
32+
function uploadFile() {
33+
let file = this.files;
34+
dropFile(file);
35+
}
36+
37+
function dropItem(e, currentFile) {
38+
e.preventDefault();
39+
currentFile = [...e.dataTransfer.files];
40+
currentFile.forEach((file) => (file.fileId = getRandomFileId()));
41+
dropFile(currentFile);
42+
}
43+
44+
function dropFile(currentFile) {
45+
files.push(...currentFile);
46+
uploadedFileContEl.innerHTML = null;
47+
files.forEach((data) => createFileHolderEl(data));
48+
}
49+
50+
function createFileHolderEl(file) {
51+
const uploadedFileEl = document.createElement("div");
52+
uploadedFileEl.classList.add("uploadedFile");
53+
54+
// Filename
55+
const fileNameCont = document.createElement("div");
56+
fileNameCont.classList.add("fileName");
57+
58+
const fileName = document.createElement("p");
59+
fileNameCont.appendChild(fileName);
60+
fileName.innerHTML = file.name; //
61+
uploadedFileEl.appendChild(fileNameCont);
62+
63+
const fileSize = document.createElement("span");
64+
fileNameCont.appendChild(fileSize);
65+
let sizeInMb =
66+
(file.size / (1024 * 1024)).toFixed(2) <= 0
67+
? `${file.size} KB`
68+
: `${(file.size / (1024 * 1024)).toFixed(2)} MB`;
69+
fileSize.innerHTML = sizeInMb;
70+
const closeBtn = document.createElement("div");
71+
closeBtn.classList.add("closeBtn");
72+
uploadedFileEl.appendChild(closeBtn);
73+
closeBtn.innerHTML = `<ion-icon name="close"></ion-icon>`;
74+
uploadedFileContEl.prepend(uploadedFileEl);
75+
closeBtn.addEventListener("click", (e) => {
76+
uploadedFileEl.remove();
77+
removeFile(file.fileId);
78+
if (!files.length) uploadBtnContEl.classList.remove("content-here");
79+
});
80+
if (files.length) uploadBtnContEl.classList.add("content-here");
81+
dropAreaEl.classList.remove("content-over");
82+
dropTextEl.innerHTML = `Drag & Drop your files`;
83+
}
84+
85+
function getRandomFileId() {
86+
return Math.floor(Math.random() * 10000000).toString(16);
87+
}
88+
89+
function removeFile(fileId) {
90+
return (files = files.filter((file) => file.fileId !== fileId));
91+
}

‎Upload Drag and Drop/style.css‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Overpass:ital,wght@0,100;0,200;0,300;0,400;0,600;0,800;1,700&display=swap");
2+
3+
* {
4+
margin: 0%;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Overpass", sans-serif;
8+
}
9+
body section {
10+
display: grid;
11+
place-items: center;
12+
min-height: 100vh;
13+
background-color: #f0f8ff;
14+
padding-top: 2rem;
15+
}
16+
body section .container {
17+
padding: 2.5rem;
18+
padding-top: 0rem;
19+
padding-bottom: 1.5rem;
20+
border-radius: 0.8rem;
21+
background-color: #fff;
22+
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
23+
display: flex;
24+
align-items: center;
25+
justify-content: center;
26+
flex-direction: column;
27+
width: 90%;
28+
max-width: 500px;
29+
}
30+
body section .container header {
31+
padding: 2.2rem;
32+
text-align: center;
33+
}
34+
body section .container header h1 {
35+
color: #3c4043;
36+
font-size: 1.8rem;
37+
color: #6099f0;
38+
}
39+
body section .container header p {
40+
color: #858a92;
41+
font-size: 1rem;
42+
}
43+
body section .container .dropArea {
44+
border: 2px dashed #c2d9f9;
45+
border-radius: 0.5rem;
46+
width: 100%;
47+
position: relative;
48+
transition: 0.3s ease;
49+
transition-property: background-color, border;
50+
user-select: none;
51+
}
52+
body section .container .dropArea .contentHolder {
53+
display: flex;
54+
flex-direction: column;
55+
align-items: center;
56+
justify-content: center;
57+
padding: 1.5rem 2rem;
58+
color: #858a92;
59+
}
60+
body section .container .dropArea .contentHolder img {
61+
width: 80px;
62+
}
63+
body section .container .dropArea .contentHolder p {
64+
font-size: 1rem;
65+
margin-bottom: 10px;
66+
}
67+
body section .container .dropArea .contentHolder span {
68+
font-size: 1rem;
69+
color: #a0a5ad;
70+
}
71+
body section .container .dropArea .contentHolder button {
72+
border: none;
73+
outline: none;
74+
background-color: #468bf5;
75+
color: #fff;
76+
padding: 0.45rem 1.2rem;
77+
border-radius: 0.25rem;
78+
cursor: pointer;
79+
font-size: 1rem;
80+
line-height: 1.5;
81+
margin-top: 10px;
82+
}
83+
body section .container .dropArea .contentHolder input {
84+
visibility: hidden;
85+
position: absolute;
86+
bottom: 0%;
87+
}
88+
body section .container .dropArea.content-over {
89+
border: 2px solid #c2d9f9;
90+
background-color: #c2d9f952;
91+
}
92+
body section .container .uploadedFileCont {
93+
width: 100%;
94+
margin-top: 1rem;
95+
}
96+
body section .container .uploadedFileCont .uploadedFile {
97+
display: grid;
98+
grid-template-columns: auto 5%;
99+
align-items: center;
100+
gap: 2px;
101+
padding: 0.5rem 1rem;
102+
background-color: rgba(82, 179, 171, 0.1);
103+
border-radius: 0.4rem;
104+
user-select: none;
105+
margin: 10px 0;
106+
}
107+
body section .container .uploadedFileCont .uploadedFile .fileName p {
108+
color: #468bf5;
109+
font-size: 1rem;
110+
line-height: 1.5;
111+
}
112+
body section .container .uploadedFileCont .uploadedFile .fileName span {
113+
font-size: 12px;
114+
color: #858a92;
115+
margin-left: 5px;
116+
}
117+
body section .container .uploadedFileCont .uploadedFile .closeBtn {
118+
cursor: pointer;
119+
120+
display: flex;
121+
align-items: center;
122+
justify-content: center;
123+
}
124+
body section .container .uploadedFileCont .uploadedFile .closeBtn ion-icon {
125+
color: #dc3545;
126+
font-size: 20px;
127+
}
128+
body section .container .uploadBtnCont {
129+
width: 100%;
130+
margin-top: 10px;
131+
display: none;
132+
}
133+
body section .container .uploadBtn {
134+
border: none;
135+
outline: none;
136+
background-color: #468bf5;
137+
color: #fff;
138+
padding: 0.45rem 1.2rem;
139+
border-radius: 0.25rem;
140+
cursor: pointer;
141+
font-size: 1rem;
142+
line-height: 1.5;
143+
float: right;
144+
text-align: right;
145+
}
146+
body section .container .uploadBtnCont.content-here {
147+
display: flex;
148+
justify-content: flex-end;
149+
}
150+
151+
@media (max-width: 450px) {
152+
body section .container header h1 {
153+
font-size: 1.4rem;
154+
}
155+
body section .container header p {
156+
font-size: 1rem;
157+
}
158+
}

0 commit comments

Comments
 (0)