Skip to content

Commit a0f58f6

Browse files
Abirpal202049Abirpal202049
authored
Merge pull request Dezenix#191 from RAHULBAWA777/patch-24
Drag And Drop Uploads
2 parents 4cd1ec4 + 463ceaf commit a0f58f6

File tree

5 files changed

+195
-0
lines changed

5 files changed

+195
-0
lines changed

‎DRag and Drop Uploads/README.md

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
2+
# Drag And Drop Uploads
3+
Drag And Drop Uploads can be used as a utility app for dragging file to the hotspot and upload it.
4+
It can be integrated with any website to use it .
5+
## 🚀 About Me
6+
I'm a full stack developer...you can follow me here -https://github.com/RAHULBAWA777
7+
8+
9+
## Run Locally
10+
11+
Clone the project
12+
13+
14+
Start the live server
15+
16+
17+
## Used By
18+
19+
This project is used by the following companies:
20+
21+
- https://github.com/Dezenix/frontend-html-css-js
22+

‎DRag and Drop Uploads/icons8-open-file-folder-48.png

1017 Bytes
Loading

‎DRag and Drop Uploads/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
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>Drag And Drop Uploads</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<body>
12+
<div class="container">
13+
<div class="hotspot">
14+
<img src="icons8-open-file-folder-48.png" alt="" srcset="">
15+
<span class="instruction">
16+
Drag and drop your files here.
17+
</span>
18+
<div class="divide">
19+
<span class="divider"></span>
20+
<span class="or">OR</span>
21+
<span class="divider"></span>
22+
</div>
23+
<label for="file-upload">Browse Files</label>
24+
<input type="file" id="files-upload" class="data" multiple />
25+
</div>
26+
<div class="progressBar"></div>
27+
</div>
28+
<div class="watermark"><a href="https://github.com/RAHULBAWA777">made with ❤ by RAHULBAWA</a></div>
29+
</body>
30+
<script src="script.js"></script>
31+
</body>
32+
</html>

‎DRag and Drop Uploads/script.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const hotspot = document.querySelector(".hotspot");
2+
const input = document.querySelector(".hotspot input");
3+
const instruction = document.querySelector(".instruction");
4+
const progressBar = document.querySelector(".progressBar");
5+
6+
let files = [];
7+
8+
input.addEventListener("change", () => {
9+
hotspot.style.display = "none";
10+
upload();
11+
});
12+
13+
hotspot.addEventListener("dragover", (e) => {
14+
e.preventDefault();
15+
instruction.innerHTML = "Drag to the location.";
16+
hotspot.classList.add("active");
17+
});
18+
19+
hotspot.addEventListener("dragleave", (e) => {
20+
e.preventDefault();
21+
instruction.innerHTML = "Release at the location.";
22+
hotspot.classList.remove("active");
23+
});
24+
25+
hotspot.addEventListener("hotspot", (e) => {
26+
e.preventDefault();
27+
files = e.dataTransfer.files;
28+
hotspot.style.display = "none";
29+
upload();
30+
});
31+
32+
function upload() {
33+
let intervalCount = 0.25;
34+
progress.style.display = "block";
35+
progress.style.width = `${20 * intervalCount}%`;
36+
const interval = setInterval(() => {
37+
intervalCount += 0.25;
38+
progress.style.width = `${20 * intervalCount}%`;
39+
if (intervalCount == 5) {
40+
clearInterval(interval);
41+
}
42+
}, 100);
43+
}

‎DRag and Drop Uploads/style.css

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
body {
2+
height: 100vh;
3+
display: grid;
4+
place-items: center;
5+
overflow: hidden;
6+
background: linear-gradient(285deg,#608636,#124bdd,#58b00f,#8318ab,#f88c0d,#4fb6ca);
7+
background-size: 360% 360%;
8+
animation: gradient-animation 30s ease infinite;
9+
10+
}
11+
12+
@keyframes gradient-animation {
13+
0% {
14+
background-position: 0% 50%;
15+
}
16+
50% {
17+
background-position: 100% 50%;
18+
}
19+
100% {
20+
background-position: 0% 50%;
21+
}
22+
}
23+
24+
.container {
25+
background: rgb(255, 255, 255);
26+
width: 700px;
27+
padding: 3rem;
28+
border-radius: 50px;
29+
display: inline-block;
30+
box-shadow: 0 0 20px 22px rgba(0, 0, 0, 0.2);
31+
}
32+
.hotspot {
33+
border-radius: 10px;
34+
border: 5px dashed #aaaaaa;
35+
width: 100%;
36+
display: grid;
37+
padding: 2rem;
38+
place-content: center;
39+
display: grid;
40+
place-items: center;
41+
box-sizing: border-box;
42+
}
43+
44+
.active {
45+
border: 3px solid #4b4b4b;
46+
background: linear-gradient(59deg,#61252b,#cb44ad,#ab4bbd,#ea544a,#a6def1,#121020);
47+
background-size: 360% 360%;
48+
}
49+
50+
.hotspot .instruction {
51+
text-align: center;
52+
font-weight: 500;
53+
color: #443f46;
54+
margin-top: 1rem;
55+
}
56+
57+
.progressBar {
58+
background: #000000;
59+
width: 0%;
60+
height: 20px;
61+
display: none;
62+
border-radius: 20px;
63+
transition: all 0.2s;
64+
}
65+
.hotspot label {
66+
background: #000000;
67+
border-radius: 2px;
68+
padding: 0.7rem 1.8rem;
69+
color: #fff;
70+
cursor: pointer;
71+
}
72+
73+
.data {
74+
display: none;
75+
}
76+
77+
.divider {
78+
width: 100px;
79+
background: #949494;
80+
height: 1px;
81+
}
82+
83+
.divide {
84+
display: flex;
85+
margin: 0.5rem;
86+
align-items: center;
87+
}
88+
89+
.or {
90+
margin: 0 1rem;
91+
color: #514c53;
92+
}
93+
94+
.watermark >a{
95+
color: white;
96+
text-decoration: none;
97+
}
98+

0 commit comments

Comments
 (0)