-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
137 lines (122 loc) · 4.45 KB
/
index.html
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Url Converter for Google Drive and Dropbox</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.sample {
border: 2px solid #a1a1a1;
padding: 10px 40px;
background: #dddddd;
width: 100%;
border-radius: 25px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="text-center p-4">
Url Converter for Google Drive and Dropbox
</h1>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8 input-group mt-5 mb-3">
<input
type="text"
id="form-url"
class="form-control"
placeholder="Your Google Drive and Dropbox URL"
aria-label="Your Google Drive and Dropbox URL"
aria-describedby="Your Google Drive and Dropbox URL"
/>
<div class="input-group-append">
<button class="btn btn-secondary" id="convert-btn">
Convert URL
</button>
</div>
</div>
<div class="col-md-2"></div>
</div>
<fieldset class="text-center mt-5 text-center">
<legend>
Your Direct URL:
</legend>
<div class="row sample" id="resultBox">
<h5 class="col-12 text-center">
<span id="result"></span>
</h5>
<img src="" alt="" class="mt-5" style="margin: auto;" id="imageRes" />
</div>
</fieldset>
<hr />
<blockquote class="blockquote text-center">
<p class="mb-0">
Note: if your image didn't show, check your if your url has already
converted, or the file permisssions.
</p>
<footer class="blockquote-footer">
𝕔 <cite title="Source Title">Ahmad Ali</cite>,
<a href="https://github.com/ahmad-ali14/Url-Converter-for-Google-Drive-and-Dropbox" target="_blank">Star on Github</a> or
<a href="https://www.ahmad-ali.co.uk/" target="_blank">Visit my Portfolio</a>
</footer>
</blockquote>
</div>
<script>
window.onload = function () {
const goobox = (url) => {
let dropbox_regex = /(http(s)*:\/\/)*(www\.)*(dropbox.com)/;
let drive_regex = /(http(s)*:\/\/)*(www\.)*(drive.google.com\/file\/d\/)/;
let drive_direct_url_regex = /^(https:\/\/drive.google.com\/uc\?id=)/;
let dropbox_direct_url_regex = /^(https:\/\/dl.dropbox.com)/;
// if it's already a direct url
if (
url.match(drive_direct_url_regex) ||
url.match(dropbox_direct_url_regex)
) {
return url;
}
// converting dropbox url
if (url.match(dropbox_regex)) {
return url.replace(/(http(s)*:\/\/)*(www\.)*/, "https://dl.");
}
// converting google drive url
if (url.match(drive_regex)) {
return `https://drive.google.com/uc?id=${url
.replace(drive_regex, "")
.match(/[\w]*\//)[0]
.replace(/\//, "")}`;
}
// if Error
console.error("Wrong URL, not a vlid drobox or google drive url");
return "Wrong URL, not a vlid drobox or google drive url";
};
let convertButton = document.getElementById("convert-btn");
convertButton.addEventListener("click", function convert(e) {
e.preventDefault();
let url = document.getElementById("form-url").value;
// converting
let convertedUrl = goobox(url);
// getting result
let resultDiv = document.getElementById("result");
let imageRes = document.getElementById("imageRes");
//if No change to url
if (convertedUrl === url) {
resultDiv.innerText =
"Your Url is already a direct url, just use it as it is. you don't need to convert it";
imageRes.src = convertedUrl;
} else {
resultDiv.innerText = convertedUrl;
imageRes.src = convertedUrl;
}
});
};
</script>
</body>
</html>