Skip to content

Commit

Permalink
add oss
Browse files Browse the repository at this point in the history
  • Loading branch information
@lixinyang123
lixinyang123 committed Jun 28, 2024
1 parent 1f3f1d5 commit f820e14
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 6 deletions.
10 changes: 7 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@

<title>海螺大脑俱乐部</title>

<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/[email protected].0/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/[email protected].2/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://fastly.jsdelivr.net/npm/[email protected]/animate.min.css" />
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/CodeByZach/pace/themes/blue/pace-theme-barber-shop.css" />
<link rel="stylesheet" href="/css/index.css" />

<script src="https://fastly.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/[email protected].0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://fastly.jsdelivr.net/npm/[email protected].2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://fastly.jsdelivr.net/gh/CodeByZach/pace/pace.min.js"></script>
<script src="/js/index.js"></script>
</head>
Expand Down Expand Up @@ -76,6 +76,10 @@
<li class="nav-item">
<a href="javascript:void(0)" onclick="navigate('webproxy')" class="nav-link">WebProxy</a>
</li>

<li class="nav-item">
<a href="javascript:void(0)" onclick="navigate('oss')" class="nav-link">OSS</a>
</li>
</ul>

<!-- <div class="dropdown">
Expand Down
149 changes: 149 additions & 0 deletions js/oss.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
let files = []
let totalSize = 0
let uploadedSize = 0;
let fileHandlers = []

async function addFile() {
let items = await showOpenFilePicker({ multiple: true })
fileHandlers.push(...items);
render(fileHandlers)
}

async function addFolder() {
fileHandlers.push(await showDirectoryPicker())
render(fileHandlers)
}

function removeFile(fileName) {
fileHandlers.splice(fileHandlers.findIndex(i => i.name == fileName), 1)
render(fileHandlers)
}

async function render(handlers, target = '#fileList') {
let parent = document.querySelector(target)
if (target == '#fileList') parent.innerHTML = ''

for (let handler of handlers) {
if (handler.kind == 'file') {
await showFile(handler, parent)
}

if (handler.kind == 'directory') {
await showFolder(handler, parent)
}
}
}

async function showFile(handler, parent) {
let file = await handler.getFile()

parent.innerHTML +=`
<div class="card-header" style="background-color: whitesmoke;">
<div class="d-flex w-100 justify-content-between">
<div>
<p class="mb-1">${file.name}</p>
<small>And some small print.</small>
</div>
<div>
<small>${Math.round(file.size / 1000)}kb</small> &nbsp;&nbsp;
${
(() => {
return parent.id ? '' : `
<button type="button" class="close" onclick="removeFile('${handler.name}')">
<span aria-hidden="true">&times;</span>
</button>`
})()
}
</div>
</div>
</div>`
}

async function showFolder(handler, parent) {
parent.innerHTML += `
<div class="card">
<div class="card-header" style="background-color: white;">
<div class="d-flex w-100 justify-content-between" data-toggle="collapse" data-target="#${handler.name}">
<div>
<p class="mb-1">${handler.name}</p>
<small>And some small print.</small>
</div>
<div>
${
(() => {
return parent.id ? '' : `
<button type="button" class="close" onclick="removeFile('${handler.name}')">
<span aria-hidden="true">&times;</span>
</button>`
})()
}
</div>
</div>
</div>
<div id="${handler.name}" class="collapse"></div>
</div>`

let children = []
for await (let child of handler.values()) {
children.push(child)
}
await render(children, `#${handler.name}`)
}

async function upload() {
files.splice(0)
await recursive(fileHandlers)

for (let file of files) {
let reader = file.stream().getReader();

await fetch(`http://localhost:8787/${file.key}`, {
method: 'PUT',
body: file
})
.then(res => {
res.text(result => {
console.log(result)
})
})
.catch(err => {
alert(err)
})

reader.read().then(function processChunk({ done, value }) {
if (done) {
return;
}
uploadedSize += value.length;
let progress = (uploadedSize / totalSize) * 100;
console.log(`Upload progress: ${progress.toFixed(2)}%`);
return reader.read().then(processChunk);
})
}
}

async function recursive(handlers, base = '') {
if (!base) {
base = guid()
totalSize = 0
uploadedSize = 0
}

for await (let item of handlers) {
if (item.kind == 'file') {
let file = await item.getFile()
file.key = `${base}/${file.name}`
totalSize += file.size
files.push(file)
}

if (item.kind == 'directory') {
let children = []
for await (let child of item.values()) {
children.push(child)
}
let key = `${base}/${item.name}`
await recursive(children, key)
}
}
}
2 changes: 1 addition & 1 deletion view/corsproxy.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="container mt-5 mb-5 animate__animated animate__fadeIn">
<div class="text-center">
<h1>Welcome to ConchBrain CorsProxy</h1>
<h1>ConchBrain CorsProxy</h1>
<p>Cross-origin Resource Sharing Proxy Service</p>
</div>
<hr />
Expand Down
2 changes: 1 addition & 1 deletion view/dockerproxy.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="container mt-5 mb-5 animate__animated animate__fadeIn">
<div class="text-center">
<h1>Welcome to ConchBrain DockerProxy</h1>
<h1>ConchBrain DockerProxy</h1>
<p>Dockerhub Proxy Service</p>
</div>
<hr />
Expand Down
2 changes: 1 addition & 1 deletion view/kv.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div class="container mt-5 mb-5 animate__animated animate__fadeIn">
<div class="text-center">
<h1>Welcome to ConchBrain KV</h1>
<h1>ConchBrain KV</h1>
<p>WebApi Based Key Value Pair Storage</p>
</div>
<hr />
Expand Down
44 changes: 44 additions & 0 deletions view/oss.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<script src="/js/oss.js"></script>

<div class="container mt-5 mb-5 animate__animated animate__fadeIn">
<div class="text-center">
<h1>ConchBrain OSS</h1>
<p>Object Storage Service</p>
</div>

<div class="jumbotron p-3">
<div class="card">
<div class="card-body text-center m-5 p-5">
<svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" fill="currentColor"
class="bi bi-file-earmark-arrow-up" viewBox="0 0 16 16">
<path
d="M8.5 11.5a.5.5 0 0 1-1 0V7.707L6.354 8.854a.5.5 0 1 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 7.707V11.5z" />
<path
d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z" />
</svg>

<p class="lead mt-4">拖动文件/文件夹到此处</p>
</div>
</div>

<hr class="my-4">

<div class="input-group mb-3">
<div class="custom-file mr-2" onclick="addFile()">
<label class="custom-file-label">Choose File</label>
</div>

<div class="custom-file mr-2" onclick="addFolder()">
<label class="custom-file-label">Choose Folder</label>
</div>

<button type="button" class="btn btn-outline-secondary" onclick="upload()">Upload</button>
</div>

<!-- <div class="progress">
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div> -->

<div class="accordion" id="fileList"></div>
</div>
<div>

0 comments on commit f820e14

Please sign in to comment.