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

Add password validation

Browse Source
This commit is contained in:
Bagas Aulia Rezki
2024-04-25 22:51:37 +07:00
commit 2e2fbdf800
51 changed files with 3526 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

173
public/upload.js Normal file
View File

@ -0,0 +1,173 @@
document.addEventListener("dragover", function (event) {
event.preventDefault();
});
document.addEventListener("drop", async function (event) {
event.preventDefault();
const file = event.dataTransfer.files[0]
await handleFile(file)
});
document.getElementById('dropzone-file').addEventListener('change', async function(event) {
event.preventDefault();
const file = event.target.files[0]
await handleFile(file)
});
async function handleFile(file){
const chunkSize = 2 * 1024 * 1024;
const chunks = Math.ceil(file.size / chunkSize);
const data = JSON.stringify({
"name": file.name,
"size": file.size,
"chunk": chunks,
});
fetch('/upload/init', {
method: 'POST',
body: data,
}).then(async response => {
const responseData = await response.json()
console.log(responseData)
if (responseData.Done === false) {
addNewUploadElement(file)
const fileChunks = await splitFile(file, chunkSize);
await uploadChunks(file.name,file.size, fileChunks, responseData.Uploaded, responseData.FileID);
} else {
alert("file already uploaded")
}
}).catch(error => {
console.error('Error uploading file:', error);
});
}
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>
`;
document.getElementById('container').appendChild(newDiv);
}
function convertFileSize(sizeInBytes) {
if (sizeInBytes < 1024) {
return sizeInBytes + ' B';
} else if (sizeInBytes < 1024 * 1024) {
return (sizeInBytes / 1024).toFixed(2) + ' KB';
} else if (sizeInBytes < 1024 * 1024 * 1024) {
return (sizeInBytes / (1024 * 1024)).toFixed(2) + ' MB';
} else {
return (sizeInBytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
}
}
async function splitFile(file, chunkSize) {
const fileSize = file.size;
const chunks = Math.ceil(fileSize / chunkSize);
const fileChunks = [];
for (let i = 0; i < chunks; i++) {
const start = i * chunkSize;
const end = Math.min(fileSize, start + chunkSize);
const chunk = file.slice(start, end);
fileChunks.push(chunk);
}
return fileChunks;
}
async function uploadChunks(name, size, chunks, uploadedChunk= -1, FileID) {
let byteUploaded = 0
var progress1 = document.getElementById(`progress-${name}-1`);
var progress2 = document.getElementById(`progress-${name}-2`);
var progress3 = document.getElementById(`progress-${name}-3`);
var progress4 = document.getElementById(`progress-${name}-4`);
for (let index = 0; index < chunks.length; index++) {
const percentComplete = Math.round((index + 1) / chunks.length * 100);
const chunk = chunks[index];
if (!(index <= uploadedChunk)) {
const formData = new FormData();
formData.append('name', name);
formData.append('chunk', chunk);
formData.append('index', index);
formData.append('done', false);
progress1.setAttribute("aria-valuenow", percentComplete);
progress2.style.width = `${percentComplete}%`;
const startTime = performance.now();
await fetch(`/upload/${FileID}`, {
method: 'POST',
body: formData
});
const endTime = performance.now();
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)}`;
} else {
progress1.setAttribute("aria-valuenow", percentComplete);
progress2.style.width = `${percentComplete}%`;
byteUploaded += chunk.size
}
}
const formData = new FormData();
formData.append('name', name);
formData.append('done', true);
return fetch(`/upload/${FileID}`, {
method: 'POST',
body: formData
});
}