168 lines
5.3 KiB
HTML
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>
|