120 lines
3.6 KiB
HTML
120 lines
3.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="ja">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
|
|
<title>StorageServer</title>
|
||
|
|
<link rel="stylesheet" href="https://devras.net/cloud/css/bootstrap.min.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div class="container">
|
||
|
|
<div class="m-2">
|
||
|
|
<form method="post" enctype="multipart/form-data" action="http://localhost:5000/File/Create" id="upload_form">
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-3">
|
||
|
|
<label for="file" class="form-label">アップロードするファイル</label>
|
||
|
|
</div>
|
||
|
|
<div class="col-9">
|
||
|
|
<input type="file" name="File" accept="*/*" id="file" class="form-control" multiple />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group">
|
||
|
|
<button type="submit" class="btn btn-primary">アップロード</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
<div class="m-2">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-6">
|
||
|
|
<img src="" class="img-fluid" id="img" />
|
||
|
|
</div>
|
||
|
|
<div class="col-6">
|
||
|
|
<ul class="list-group" id="file_list"></ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
||
|
|
const uploadForm = document.getElementById('upload_form');
|
||
|
|
const fileInput = document.getElementById('file');
|
||
|
|
const imageContainer = document.getElementById('img');
|
||
|
|
const fileList = document.getElementById('file_list');
|
||
|
|
|
||
|
|
const appendFile = (fileId, fileName) => {
|
||
|
|
const a = document.createElement('a');
|
||
|
|
a.href = `http://localhost:5000/File/Read/${fileId}`;
|
||
|
|
a.textContent = `${fileName}`;
|
||
|
|
const li = document.createElement('li');
|
||
|
|
li.classList.add('list-group-item');
|
||
|
|
li.append(a);
|
||
|
|
|
||
|
|
fileList.append(li);
|
||
|
|
return li;
|
||
|
|
};
|
||
|
|
|
||
|
|
const readFileList = async () => {
|
||
|
|
fileList.innerHTML = ``;
|
||
|
|
|
||
|
|
const response = await fetch('http://localhost:5000/FileList');
|
||
|
|
const json = await response.json();
|
||
|
|
for (const item of json)
|
||
|
|
{
|
||
|
|
const li = appendFile(item.fileID, item.fileName);
|
||
|
|
const a = li.querySelector('a');
|
||
|
|
if (item.mimeType.startsWith("image/"))
|
||
|
|
{
|
||
|
|
a.addEventListener('click', async e => {
|
||
|
|
e.preventDefault();
|
||
|
|
imageContainer.src = a.href;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const uploadRequest = async (file, fileName) => {
|
||
|
|
const fd = new FormData();
|
||
|
|
fd.append("File", file);
|
||
|
|
if (typeof fileName === "string" && fileName.length > 0) {
|
||
|
|
fd.append("FileName", fileName);
|
||
|
|
}
|
||
|
|
|
||
|
|
const response = await fetch("http://localhost:5000/File/Create", {
|
||
|
|
method: "POST",
|
||
|
|
body: fd,
|
||
|
|
}).catch(() => {
|
||
|
|
return {
|
||
|
|
ok: false,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
return await response.json();
|
||
|
|
};
|
||
|
|
|
||
|
|
uploadForm.addEventListener('submit', async e => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
if (fileInput.files.length === 0) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
const promises = [];
|
||
|
|
for (let i = 0 ; i < fileInput.files.length ; i++) {
|
||
|
|
promises.push(uploadRequest(fileInput.files[i]));
|
||
|
|
}
|
||
|
|
|
||
|
|
await Promise.all(promises);
|
||
|
|
fileInput.value = ``;
|
||
|
|
await readFileList();
|
||
|
|
});
|
||
|
|
|
||
|
|
readFileList();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|