tangled
alpha
login
or
join now
danielmorrisey.com
/
website
1
fork
atom
madebydanny.uk written in html, css, and a lot of JavaScript I don't understand
madeydanny.uk
html
css
javascript
1
fork
atom
overview
issues
pulls
pipelines
cdn
Daniel Morrisey
2 weeks ago
c44472dc
a47ed68d
-132
2 changed files
expand all
collapse all
unified
split
cdn
script.js
cdn.html
cdn/index.html
cdn.html
-132
cdn/script.js
···
1
1
-
document.addEventListener("DOMContentLoaded", () => {
2
2
-
// Set current year
3
3
-
const yearEl = document.getElementById("current-year");
4
4
-
if (yearEl) yearEl.textContent = new Date().getFullYear();
5
5
-
6
6
-
const dropZone = document.getElementById('drop-zone');
7
7
-
const fileInput = document.getElementById('fileInput');
8
8
-
const uploadBtn = document.getElementById('uploadBtn');
9
9
-
const resultDiv = document.getElementById('result');
10
10
-
const useImrsCheckbox = document.getElementById('useImrs');
11
11
-
const useOfficeCheckbox = document.getElementById('useOfficeViewer');
12
12
-
13
13
-
// Handle clicks and touches on drop zone
14
14
-
['click', 'touchend'].forEach(event =>
15
15
-
dropZone.addEventListener(event, () => fileInput.click())
16
16
-
);
17
17
-
18
18
-
// Drag and drop
19
19
-
dropZone.addEventListener('dragover', e => {
20
20
-
e.preventDefault();
21
21
-
dropZone.classList.add('drag-over');
22
22
-
});
23
23
-
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('drag-over'));
24
24
-
dropZone.addEventListener('drop', e => {
25
25
-
e.preventDefault();
26
26
-
dropZone.classList.remove('drag-over');
27
27
-
if (e.dataTransfer && e.dataTransfer.files.length) {
28
28
-
fileInput.files = e.dataTransfer.files;
29
29
-
updateDropZoneText();
30
30
-
updateCheckboxVisibility();
31
31
-
}
32
32
-
});
33
33
-
34
34
-
// File selection
35
35
-
fileInput.addEventListener('change', () => {
36
36
-
updateDropZoneText();
37
37
-
updateCheckboxVisibility();
38
38
-
});
39
39
-
40
40
-
function updateDropZoneText() {
41
41
-
const textEl = dropZone.querySelector('p');
42
42
-
if (!textEl) return;
43
43
-
if (fileInput.files.length) {
44
44
-
textEl.innerHTML = `✅ Selected: ${fileInput.files[0].name}`;
45
45
-
} else {
46
46
-
textEl.innerHTML = `<i class="fa-solid fa-upload"></i> Drag & drop your file here, or tap to select`;
47
47
-
}
48
48
-
}
49
49
-
50
50
-
function updateCheckboxVisibility() {
51
51
-
if (!fileInput.files.length) {
52
52
-
useImrsCheckbox.parentElement.style.display = "none";
53
53
-
useOfficeCheckbox.parentElement.style.display = "none";
54
54
-
return;
55
55
-
}
56
56
-
const file = fileInput.files[0];
57
57
-
const fileExt = file.name.split('.').pop().toLowerCase();
58
58
-
useImrsCheckbox.parentElement.style.display = file.type.startsWith('image/') ? "block" : "none";
59
59
-
const officeExts = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'];
60
60
-
useOfficeCheckbox.parentElement.style.display = officeExts.includes(fileExt) ? "block" : "none";
61
61
-
}
62
62
-
63
63
-
uploadBtn.addEventListener('click', async () => {
64
64
-
if (!fileInput.files.length) {
65
65
-
resultDiv.textContent = "Please select a file first.";
66
66
-
return;
67
67
-
}
68
68
-
69
69
-
const file = fileInput.files[0];
70
70
-
const formData = new FormData();
71
71
-
formData.append('file', file);
72
72
-
73
73
-
resultDiv.innerHTML = '<i class="fa-solid fa-arrows-rotate fa-spin"></i> Uploading...';
74
74
-
75
75
-
try {
76
76
-
const response = await fetch('https://cdn.madebydanny.uk/upload', {
77
77
-
method: 'POST',
78
78
-
body: formData
79
79
-
});
80
80
-
81
81
-
const data = await response.json();
82
82
-
if (!response.ok) throw new Error(data.error || 'Upload failed');
83
83
-
84
84
-
let finalUrl = data.url;
85
85
-
if (useImrsCheckbox.checked && file.type.startsWith('image/')) {
86
86
-
finalUrl = `https://imrs.madebydanny.uk?url=${encodeURIComponent(finalUrl)}`;
87
87
-
}
88
88
-
89
89
-
// Copy URL to clipboard with fallback
90
90
-
let copied = false;
91
91
-
if (navigator.clipboard && navigator.clipboard.writeText) {
92
92
-
try {
93
93
-
await navigator.clipboard.writeText(finalUrl);
94
94
-
copied = true;
95
95
-
} catch { copied = false; }
96
96
-
}
97
97
-
if (!copied) {
98
98
-
const tempInput = document.createElement("input");
99
99
-
tempInput.value = finalUrl;
100
100
-
document.body.appendChild(tempInput);
101
101
-
tempInput.select();
102
102
-
document.execCommand("copy");
103
103
-
document.body.removeChild(tempInput);
104
104
-
}
105
105
-
106
106
-
resultDiv.innerHTML = `
107
107
-
✅ Uploaded! URL copied:<br>
108
108
-
<a href="${finalUrl}" target="_blank">${finalUrl}</a><br>
109
109
-
${file.type.startsWith('image/') ? `<img src="${data.url}" alt="Uploaded Image" style="max-width: 100%; margin-top: 1rem;">` : ''}
110
110
-
`;
111
111
-
112
112
-
fetchStats();
113
113
-
} catch (err) {
114
114
-
resultDiv.textContent = "Error: " + err.message;
115
115
-
}
116
116
-
});
117
117
-
118
118
-
async function fetchStats() {
119
119
-
try {
120
120
-
const res = await fetch('https://cdn.madebydanny.uk/stats');
121
121
-
const stats = await res.json();
122
122
-
document.getElementById('fileCount').textContent = stats.filesUploaded.toLocaleString();
123
123
-
document.getElementById('bandwidthUsed').textContent = `${stats.totalBandwidth} GB`;
124
124
-
document.getElementById('regionsSupported').textContent = stats.regionsSupported;
125
125
-
} catch {
126
126
-
const statsEl = document.querySelector('.stats');
127
127
-
if (statsEl) statsEl.innerHTML = '<p>Unable to load CDN stats.</p>';
128
128
-
}
129
129
-
}
130
130
-
131
131
-
fetchStats();
132
132
-
});