info_tfgrid/books/test2.html
2024-10-03 17:29:42 +03:00

168 lines
5.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Storage Interface</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
#file-list {
list-style-type: none;
padding: 0;
}
#file-list li {
margin-bottom: 10px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
#file-list button {
margin-left: 10px;
}
</style>
</head>
<body>
<h1>File Storage Interface</h1>
<input type="file" id="file-input">
<button onclick="uploadFile()">Upload</button>
<h2>File List</h2>
<ul id="file-list"></ul>
<script>
class FileStorage {
constructor() {
this.storage = localStorage;
}
upload(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
const fileData = event.target.result;
const fileInfo = {
name: file.name,
size: file.size,
type: file.type,
data: fileData
};
this.storage.setItem(file.name, JSON.stringify(fileInfo));
resolve(fileInfo);
};
reader.onerror = (error) => reject(error);
reader.readAsDataURL(file);
});
}
download(fileName) {
const fileInfo = this.getFileInfo(fileName);
if (!fileInfo) {
throw new Error('File not found');
}
const link = document.createElement('a');
link.href = fileInfo.data;
link.download = fileInfo.name;
link.click();
}
delete(fileName) {
this.storage.removeItem(fileName);
}
list() {
return Object.keys(this.storage)
.map(key => this.getFileInfo(key))
.filter(fileInfo => fileInfo !== null)
.map(fileInfo => ({
name: fileInfo.name,
size: fileInfo.size
}));
}
stat(fileName) {
const fileInfo = this.getFileInfo(fileName);
if (!fileInfo) {
throw new Error('File not found');
}
return {
name: fileInfo.name,
size: fileInfo.size
};
}
getFileInfo(fileName) {
try {
const fileInfo = JSON.parse(this.storage.getItem(fileName));
if (fileInfo && fileInfo.name && fileInfo.size) {
return fileInfo;
}
} catch (error) {
console.warn(`Invalid file info for ${fileName}:`, error);
}
return null;
}
}
const fileStorage = new FileStorage();
function uploadFile() {
const fileInput = document.getElementById('file-input');
const file = fileInput.files[0];
if (file) {
fileStorage.upload(file).then(() => {
updateFileList();
fileInput.value = '';
});
}
}
function downloadFile(fileName) {
fileStorage.download(fileName);
}
function deleteFile(fileName) {
fileStorage.delete(fileName);
updateFileList();
}
function updateFileList() {
const fileList = document.getElementById('file-list');
fileList.innerHTML = '';
const files = fileStorage.list();
files.forEach(file => {
const li = document.createElement('li');
li.textContent = `${file.name} (${formatSize(file.size)})`;
const downloadBtn = document.createElement('button');
downloadBtn.textContent = 'Download';
downloadBtn.onclick = () => downloadFile(file.name);
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.onclick = () => deleteFile(file.name);
li.appendChild(downloadBtn);
li.appendChild(deleteBtn);
fileList.appendChild(li);
});
}
function formatSize(bytes) {
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
let size = bytes;
let unitIndex = 0;
while (size >= 1024 && unitIndex < units.length - 1) {
size /= 1024;
unitIndex++;
}
return `${size.toFixed(2)} ${units[unitIndex]}`;
}
updateFileList();
</script>
</body>
</html>