bagas/filekeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: create new file page with improved UI, combine upload and download functionality

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-09-15 17:24:18 +07:00
parent b54d0f16a5
commit eee047a9b0
22 changed files with 1189 additions and 1137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
public/main.js
View File

@ -78,55 +78,32 @@ async function handleFile(file){
function addNewUploadElement(file){
const newDiv = document.createElement('div');
newDiv.innerHTML = `
<div class="p-6 rounded-lg shadow bg-gray-800 border-gray-700">
<div class="mb-2 flex justify-between items-center">
<div class="flex items-center gap-x-3">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 48 48">
<path fill="#90CAF9" d="M40 45L8 45 8 3 30 3 40 13z"></path>
<path fill="#E1F5FE" d="M38.5 14L29 14 29 4.5z"></path>
</svg>
<div>
<p class="text-sm font-medium text-white">${ file.name }</p>
<p class="text-xs text-gray-500">${ convertFileSize(file.size) }</p>
</div>
</div>
<div class="inline-flex items-center gap-x-2">
<a class="text-gray-500 hover:text-gray-800" href="#">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<rect width="4" height="16" x="6" y="4" />
<rect width="4" height="16" x="14" y="4" />
</svg>
</a>
<a class="text-gray-500 hover:text-gray-800" href="#">
<svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round">
<path d="M3 6h18" />
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
<line x1="10" x2="10" y1="11" y2="17" />
<line x1="14" x2="14" y1="11" y2="17" />
</svg>
</a>
</div>
</div>
<div class="flex items-center gap-x-3 whitespace-nowrap">
<div id="progress-${ file.name }-1" class="flex w-full h-2 rounded-full overflow-hidden bg-gray-200"
role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">
<div id="progress-${ file.name }-2"
class="flex flex-col justify-center rounded-full overflow-hidden bg-teal-500 text-xs text-white text-center whitespace-nowrap transition duration-500">
</div>
</div>
<span id="progress-${ file.name }-3" class="text-sm text-white ">Starting...</span>
</div>
<div id="progress-${ file.name }-4" class="text-sm text-gray-500">Uploading 0%</div>
</div>
<div class="space-y-4">
<div class="p-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="relative">
<svg class="w-12 h-12" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
<circle cx="18" cy="18" r="16" fill="none" class="stroke-current text-gray-200" stroke-width="2"></circle>
<circle id="progress-${ file.name }-1" cx="18" cy="18" r="16" fill="none" class="stroke-current text-blue-600" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="100" transform="rotate(-90 18 18)"></circle>
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span id="progress-${ file.name }-2" class="text-xs font-medium">0%</span>
</div>
</div>
<div class="flex flex-col">
<span class="text-base font-medium truncate w-48">${ file.name }</span>
<div class="flex items-center gap-x-3 whitespace-nowrap">
</div>
<div id="progress-${ file.name }-3" class="text-sm text-gray-500">Starting...</div>
</div>
</div>
<button class="text-blue-500 text-base font-medium">Batal</button>
</div>
</div>
`;
document.getElementById('container').appendChild(newDiv);
document.getElementById('FileUploadBoxItem').appendChild(newDiv);
document.getElementById('uploadBox').classList.remove('hidden');
}
function convertFileSize(sizeInBytes) {
@ -150,7 +127,6 @@ async function splitFile(file, chunkSize) {
const start = i * chunkSize;
const end = Math.min(fileSize, start + chunkSize);
const chunk = file.slice(start, end);
chunk.hash = "test"
fileChunks.push(chunk);
}
@ -171,7 +147,6 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) {
let progress1 = document.getElementById(`progress-${name}-1`);
let progress2 = document.getElementById(`progress-${name}-2`);
let progress3 = document.getElementById(`progress-${name}-3`);
let progress4 = document.getElementById(`progress-${name}-4`);
let isFailed = false
for (let index = 0; index < chunks.length; index++) {
const percentComplete = Math.round((index + 1) / chunks.length * 100);
@ -183,12 +158,12 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) {
formData.append('index', index);
formData.append('done', false);
progress1.setAttribute("aria-valuenow", percentComplete);
progress2.style.width = `${percentComplete}%`;
progress1.style.strokeDashoffset = 100 - percentComplete;
progress2.innerText = `${percentComplete}%`;
const startTime = performance.now();
try {
await fetch(`/upload/${FileID}`, {
await fetch(`/file/${FileID}`, {
method: 'POST',
body: formData
});
@ -203,22 +178,18 @@ async function uploadChunks(name, size, chunks, chunkArray, FileID) {
const totalTime = (endTime - startTime) / 1000;
const uploadSpeed = chunk.size / totalTime / 1024 / 1024;
byteUploaded += chunk.size
progress3.innerText = `${uploadSpeed.toFixed(2)} MB/s`;
progress4.innerText = `Uploading ${percentComplete}% - ${convertFileSize(byteUploaded)} of ${ convertFileSize(size)}`;
progress3.innerText = `Uploading... ${uploadSpeed.toFixed(2)} MB/s`;
} else {
progress1.setAttribute("aria-valuenow", percentComplete);
progress2.style.width = `${percentComplete}%`;
progress1.style.strokeDashoffset = 100 - percentComplete;
progress2.innerText = `${percentComplete}%`;
progress3.innerText = `Fixing Missing Byte`;
progress4.innerText = `Uploading Missing Byte ${percentComplete}% - ${convertFileSize(byteUploaded)} of ${ convertFileSize(size)}`;
byteUploaded += chunk.size
}
}
if (isFailed) {
progress3.innerText = `Upload Failed`;
progress4.innerText = `There was an issue uploading the file. Please try again.`;
} else {
progress3.innerText = `Done`;
progress4.innerText = `File Uploaded 100% - ${convertFileSize(byteUploaded)} of ${ convertFileSize(size)}`;
}
}