137 lines
5.0 KiB
HTML
137 lines
5.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="ja">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>アップロードされたファイル一覧</title>
|
||
|
|
<style>
|
||
|
|
body {
|
||
|
|
font-family: Arial, sans-serif;
|
||
|
|
margin: 20px;
|
||
|
|
}
|
||
|
|
table {
|
||
|
|
width: 100%;
|
||
|
|
border-collapse: collapse;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
}
|
||
|
|
th, td {
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid #ddd;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
th {
|
||
|
|
background-color: #f2f2f2;
|
||
|
|
}
|
||
|
|
button {
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
async function handleFileUpload(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
const form = document.getElementById('uploadForm');
|
||
|
|
const formData = new FormData(form);
|
||
|
|
const progressBar = document.getElementById('uploadProgress');
|
||
|
|
progressBar.style.display = 'block';
|
||
|
|
progressBar.value = 0;
|
||
|
|
|
||
|
|
const xhr = new XMLHttpRequest();
|
||
|
|
xhr.open('POST', '/upload', true);
|
||
|
|
|
||
|
|
xhr.upload.onprogress = function(event) {
|
||
|
|
if (event.lengthComputable) {
|
||
|
|
const percentComplete = (event.loaded / event.total) * 100;
|
||
|
|
progressBar.value = percentComplete;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
xhr.onload = function() {
|
||
|
|
if (xhr.status === 200) {
|
||
|
|
const result = JSON.parse(xhr.responseText);
|
||
|
|
progressBar.style.display = 'none';
|
||
|
|
if (result.error) {
|
||
|
|
document.getElementById('message').innerText = result.error;
|
||
|
|
} else {
|
||
|
|
updateFileList();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
document.getElementById('message').innerText = 'エラーが発生しました: ' + xhr.statusText;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
xhr.onerror = function() {
|
||
|
|
document.getElementById('message').innerText = 'エラーが発生しました: ネットワークエラー';
|
||
|
|
};
|
||
|
|
|
||
|
|
xhr.send(formData);
|
||
|
|
}
|
||
|
|
|
||
|
|
async function handleAction(event, endpoint) {
|
||
|
|
event.preventDefault();
|
||
|
|
try {
|
||
|
|
const response = await fetch(endpoint, { method: 'POST' });
|
||
|
|
const result = await response.json();
|
||
|
|
document.getElementById('message').innerText = result.message || result.error;
|
||
|
|
if (!result.error) {
|
||
|
|
updateFileList();
|
||
|
|
}
|
||
|
|
} catch (error) {
|
||
|
|
document.getElementById('message').innerText = 'エラーが発生しました: ' + error.message;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
async function updateFileList() {
|
||
|
|
try {
|
||
|
|
const response = await fetch('/files');
|
||
|
|
const files = await response.json();
|
||
|
|
const fileList = document.getElementById('fileList');
|
||
|
|
fileList.innerHTML = '';
|
||
|
|
files.forEach(file => {
|
||
|
|
const encodedFile = encodeURIComponent(file);
|
||
|
|
const tr = document.createElement('tr');
|
||
|
|
tr.innerHTML = `
|
||
|
|
<td>${file}</td>
|
||
|
|
<td>
|
||
|
|
<form onsubmit="handleAction(event, '/delete/${encodedFile}')">
|
||
|
|
<button type="submit">削除</button>
|
||
|
|
</form>
|
||
|
|
<!--
|
||
|
|
<form onsubmit="handleAction(event, '/play/${encodedFile}')">
|
||
|
|
<button type="submit">再生</button>
|
||
|
|
</form>
|
||
|
|
-->
|
||
|
|
</td>
|
||
|
|
`;
|
||
|
|
fileList.appendChild(tr);
|
||
|
|
});
|
||
|
|
} catch (error) {
|
||
|
|
document.getElementById('message').innerText = 'ファイルリストの更新中にエラーが発生しました: ' + error.message;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
document.addEventListener('DOMContentLoaded', updateFileList);
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>アップロードされたファイル一覧</h1>
|
||
|
|
<div id="message" style="color: red; margin-top: 20px;"></div>
|
||
|
|
<button onclick="location.href='/'">トップページに戻る</button>
|
||
|
|
<form id="uploadForm" onsubmit="handleFileUpload(event)">
|
||
|
|
<label for="files">音源をアップロード:</label>
|
||
|
|
<input type="file" name="files" id="files" multiple>
|
||
|
|
<button type="submit">アップロード</button>
|
||
|
|
</form>
|
||
|
|
<progress id="uploadProgress" value="0" max="100" style="display:none; width: 100%;"></progress>
|
||
|
|
<table>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>ファイル名</th>
|
||
|
|
<th>アクション</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody id="fileList">
|
||
|
|
<!-- ファイルリストはここに動的に挿入されます -->
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
</body>
|
||
|
|
</html>
|