-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
103 lines (98 loc) · 3.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File List</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
line-height: 1.6;
background-color: #f9f9f9;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
font-weight: bold;
}
td {
white-space: nowrap;
}
tbody tr:hover {
background-color: #f1f1f1;
}
caption {
caption-side: top;
font-size: 1.2em;
margin-bottom: 10px;
font-weight: bold;
}
a {
color: #007BFF;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>File List</h1>
<table>
<caption>Files in Public Folder</caption>
<thead>
<tr>
<th>Name</th>
<th>Size</th>
</tr>
</thead>
<tbody id="fileList">
<!-- Data will be dynamically populated here -->
</tbody>
</table>
<script>
// Fetch file data from the /list route
fetch('/dir/list')
.then(response => response.json())
.then(data => {
const fileList = document.getElementById('fileList');
fileList.innerHTML = ''; // Clear the table body
data.forEach(file => {
const row = document.createElement('tr');
// File Name with Link
const nameCell = document.createElement('td');
const link = document.createElement('a');
link.href = `http://localhost/cdn/${encodeURIComponent(file.name)}`;
link.textContent = file.name;
nameCell.appendChild(link);
row.appendChild(nameCell);
// File Size
const sizeCell = document.createElement('td');
sizeCell.textContent = file.size;
row.appendChild(sizeCell);
fileList.appendChild(row);
});
})
.catch(error => {
console.error('Error fetching file list:', error);
const fileList = document.getElementById('fileList');
const errorRow = document.createElement('tr');
const errorCell = document.createElement('td');
errorCell.textContent = 'Error loading file list';
errorCell.colSpan = 2;
errorCell.style.textAlign = 'center';
errorRow.appendChild(errorCell);
fileList.appendChild(errorRow);
});
</script>
</body>
</html>