From d9e1d525a5c0f975ee71eddb457c40e687991064 Mon Sep 17 00:00:00 2001 From: Blaster4385 Date: Sat, 27 Jul 2024 12:47:07 +0530 Subject: chore: formatted code using prettier --- client/.prettierrc | 9 ++ client/assets/fonts.css | 39 +++--- client/assets/index.js | 318 ++++++++++++++++++++++++----------------------- client/assets/styles.css | 214 +++++++++++++++---------------- client/index.html | 74 ++++++----- 5 files changed, 338 insertions(+), 316 deletions(-) create mode 100644 client/.prettierrc diff --git a/client/.prettierrc b/client/.prettierrc new file mode 100644 index 0000000..fe82409 --- /dev/null +++ b/client/.prettierrc @@ -0,0 +1,9 @@ +{ + "semi": false, + "trailingComma": "none", + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2, + "useTabs": false, + "bracketSpacing": true +} diff --git a/client/assets/fonts.css b/client/assets/fonts.css index 53f8738..7918c13 100644 --- a/client/assets/fonts.css +++ b/client/assets/fonts.css @@ -1,21 +1,22 @@ /* latin-ext */ @font-face { - font-family: "JetBrains Mono"; - font-style: normal; - font-weight: 100 800; - font-display: swap; - src: url(/assets/fonts/JetBrains_Mono_latin-ext.woff2) format("woff2"); - unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, - U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; - } - /* latin */ - @font-face { - font-family: "JetBrains Mono"; - font-style: normal; - font-weight: 100 800; - font-display: swap; - src: url(/assets/fonts/JetBrains_Mono_latin.woff2) format("woff2"); - unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, - U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, - U+2193, U+2212, U+2215, U+FEFF, U+FFFD; - } \ No newline at end of file + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 100 800; + font-display: swap; + src: url(/assets/fonts/JetBrains_Mono_latin-ext.woff2) format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, + U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} +/* latin */ +@font-face { + font-family: 'JetBrains Mono'; + font-style: normal; + font-weight: 100 800; + font-display: swap; + src: url(/assets/fonts/JetBrains_Mono_latin.woff2) format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, + U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, + U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + diff --git a/client/assets/index.js b/client/assets/index.js index 0e9d61a..dcf7f25 100644 --- a/client/assets/index.js +++ b/client/assets/index.js @@ -1,177 +1,183 @@ document.addEventListener('DOMContentLoaded', async () => { - const urlParams = new URLSearchParams(window.location.search); - const fileId = urlParams.get('id'); - const key = urlParams.get('key'); + const urlParams = new URLSearchParams(window.location.search) + const fileId = urlParams.get('id') + const key = urlParams.get('key') - if (fileId && key) { - displayFileDetails(fileId, key); - } else { - document.getElementById('upload__form').style.display = 'block'; - setupUploadForm(); - } -}); + if (fileId && key) { + displayFileDetails(fileId, key) + } else { + document.getElementById('upload__form').style.display = 'block' + setupUploadForm() + } +}) -const baseUrl = window.location.origin; -const CHUNK_SIZE = 100 * 1024 * 1024; // 100 MB +const baseUrl = window.location.origin +const CHUNK_SIZE = 100 * 1024 * 1024 // 100 MB async function displayFileDetails(fileId, key) { - try { - const response = await fetch(`${baseUrl}/get/${fileId}?key=${key}`, { - method: 'GET', - }); - - const fileDetails = document.getElementById('file__details'); - const fileNameElement = document.getElementById('file__name'); - const fileSizeElement = document.getElementById('file__size'); - const downloadButton = document.getElementById('download__btn'); - const copyButton = document.getElementById('copy__btn'); - - if (!response.ok) { - fileDetails.textContent = `Error: ${response.statusText}`; - fileDetails.style.display = 'flex'; - return; - } - - const contentType = response.headers.get('Content-Type'); - - if (contentType && contentType.includes('application/json')) { - const result = await response.json(); - const downloadUrl = `${baseUrl}/download/${fileId}?key=${key}`; - const pageUrl = `${baseUrl}/?id=${fileId}&key=${key}`; - fileNameElement.textContent = `${result.fileName}`; - fileSizeElement.textContent = `${result.fileSize}`; - downloadButton.innerHTML = `Download`; - copyButton.onclick = () => { - navigator.clipboard.writeText(pageUrl); - copyButton.textContent = 'Copied!'; - }; - } else { - const result = await response.text(); - fileDetails.textContent = result; - } - - fileDetails.style.display = 'flex'; - } catch (error) { - console.error('Error:', error); - document.getElementById('file__details').textContent = 'An error occurred. Please try again.'; - document.getElementById('file__details').style.display = 'flex'; + try { + const response = await fetch(`${baseUrl}/get/${fileId}?key=${key}`, { + method: 'GET' + }) + + const fileDetails = document.getElementById('file__details') + const fileNameElement = document.getElementById('file__name') + const fileSizeElement = document.getElementById('file__size') + const downloadButton = document.getElementById('download__btn') + const copyButton = document.getElementById('copy__btn') + + if (!response.ok) { + fileDetails.textContent = `Error: ${response.statusText}` + fileDetails.style.display = 'flex' + return + } + + const contentType = response.headers.get('Content-Type') + + if (contentType && contentType.includes('application/json')) { + const result = await response.json() + const downloadUrl = `${baseUrl}/download/${fileId}?key=${key}` + const pageUrl = `${baseUrl}/?id=${fileId}&key=${key}` + fileNameElement.textContent = `${result.fileName}` + fileSizeElement.textContent = `${result.fileSize}` + downloadButton.innerHTML = `Download` + copyButton.onclick = () => { + navigator.clipboard.writeText(pageUrl) + copyButton.textContent = 'Copied!' + } + } else { + const result = await response.text() + fileDetails.textContent = result } + + fileDetails.style.display = 'flex' + } catch (error) { + console.error('Error:', error) + document.getElementById('file__details').textContent = + 'An error occurred. Please try again.' + document.getElementById('file__details').style.display = 'flex' + } } function setupUploadForm() { - const fileInput = document.querySelector('.upload__input'); - const overlayText = document.querySelector('.upload__input__overlay__text'); - - fileInput.addEventListener('change', () => { - if (fileInput.files.length > 0) { - overlayText.textContent = fileInput.files[0].name; - } else { - overlayText.textContent = 'Choose a file or drag it here'; - } - }); - - document.getElementById('upload__form').addEventListener('submit', async (event) => { - event.preventDefault(); - - const file = fileInput.files[0]; - - if (!file) { - console.log('No file selected.'); - return; - } - - const progressBar = document.getElementById('upload__progress'); - const progressFill = document.getElementById('progress__fill'); - const uploadButton = document.getElementById('upload__btn'); - - uploadButton.style.display = 'none'; - progressBar.style.display = 'block'; - fileInput.disabled = true; - - try { - await uploadFileInChunks(file, progressFill); - } catch (error) { - console.error('Error:', error); - document.getElementById('upload__result').textContent = 'An error occurred. Please try again.'; - document.getElementById('upload__result').classList.add('upload__result__visible'); - } finally { - progressBar.style.display = 'none'; - uploadButton.style.display = 'inline-block'; - fileInput.disabled = false; - } - }); -} + const fileInput = document.querySelector('.upload__input') + const overlayText = document.querySelector('.upload__input__overlay__text') -async function uploadFileInChunks(file, progressFill) { - const fileSize = file.size; - const chunkCount = Math.ceil(fileSize / CHUNK_SIZE); - const uploadId = generateUploadId(); - let uploadedSize = 0; - - for (let chunkIndex = 0; chunkIndex < chunkCount; chunkIndex++) { - const start = chunkIndex * CHUNK_SIZE; - const end = Math.min(start + CHUNK_SIZE, fileSize); - const chunk = file.slice(start, end); - - const formData = new FormData(); - formData.append('chunk', chunk); - formData.append('uploadId', uploadId); - formData.append('chunkIndex', chunkIndex); - formData.append('chunkCount', chunkCount); - formData.append('fileName', file.name); - - await uploadChunk(formData, progressFill, uploadedSize, fileSize); - - uploadedSize += chunk.size; + fileInput.addEventListener('change', () => { + if (fileInput.files.length > 0) { + overlayText.textContent = fileInput.files[0].name + } else { + overlayText.textContent = 'Choose a file or drag it here' } + }) + + document + .getElementById('upload__form') + .addEventListener('submit', async (event) => { + event.preventDefault() + + const file = fileInput.files[0] + + if (!file) { + console.log('No file selected.') + return + } + + const progressBar = document.getElementById('upload__progress') + const progressFill = document.getElementById('progress__fill') + const uploadButton = document.getElementById('upload__btn') + + uploadButton.style.display = 'none' + progressBar.style.display = 'block' + fileInput.disabled = true + + try { + await uploadFileInChunks(file, progressFill) + } catch (error) { + console.error('Error:', error) + document.getElementById('upload__result').textContent = + 'An error occurred. Please try again.' + document + .getElementById('upload__result') + .classList.add('upload__result__visible') + } finally { + progressBar.style.display = 'none' + uploadButton.style.display = 'inline-block' + fileInput.disabled = false + } + }) +} - // Call upload_complete endpoint - const completeFormData = new FormData(); - completeFormData.append('uploadId', uploadId); - completeFormData.append('chunkCount', chunkCount); - completeFormData.append('fileName', file.name); +async function uploadFileInChunks(file, progressFill) { + const fileSize = file.size + const chunkCount = Math.ceil(fileSize / CHUNK_SIZE) + const uploadId = generateUploadId() + let uploadedSize = 0 + + for (let chunkIndex = 0; chunkIndex < chunkCount; chunkIndex++) { + const start = chunkIndex * CHUNK_SIZE + const end = Math.min(start + CHUNK_SIZE, fileSize) + const chunk = file.slice(start, end) + + const formData = new FormData() + formData.append('chunk', chunk) + formData.append('uploadId', uploadId) + formData.append('chunkIndex', chunkIndex) + formData.append('chunkCount', chunkCount) + formData.append('fileName', file.name) + + await uploadChunk(formData, progressFill, uploadedSize, fileSize) + + uploadedSize += chunk.size + } + + // Call upload_complete endpoint + const completeFormData = new FormData() + completeFormData.append('uploadId', uploadId) + completeFormData.append('chunkCount', chunkCount) + completeFormData.append('fileName', file.name) + + const completeResponse = await fetch(`${baseUrl}/upload_complete`, { + method: 'POST', + body: completeFormData + }) + + if (!completeResponse.ok) { + throw new Error(`Error completing upload: ${completeResponse.statusText}`) + } + + const result = await completeResponse.json() + const pageUrl = `${baseUrl}/?id=${result.id}&key=${result.key}` + window.location.href = pageUrl +} - const completeResponse = await fetch(`${baseUrl}/upload_complete`, { - method: 'POST', - body: completeFormData, - }); +async function uploadChunk(formData, progressFill, uploadedSize, fileSize) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest() + xhr.open('POST', `${baseUrl}/upload_chunk`, true) + + xhr.upload.onprogress = (event) => { + if (event.lengthComputable) { + const totalUploaded = uploadedSize + event.loaded + const progress = Math.round((totalUploaded / fileSize) * 100) + progressFill.style.width = `${progress}%` + } + } - if (!completeResponse.ok) { - throw new Error(`Error completing upload: ${completeResponse.statusText}`); + xhr.onload = () => { + if (xhr.status === 200) { + resolve() + } else { + reject(new Error(`Error uploading chunk: ${xhr.statusText}`)) + } } - const result = await completeResponse.json(); - const pageUrl = `${baseUrl}/?id=${result.id}&key=${result.key}`; - window.location.href = pageUrl; -} + xhr.onerror = () => reject(new Error('Network error occurred')) -async function uploadChunk(formData, progressFill, uploadedSize, fileSize) { - return new Promise((resolve, reject) => { - const xhr = new XMLHttpRequest(); - xhr.open('POST', `${baseUrl}/upload_chunk`, true); - - xhr.upload.onprogress = (event) => { - if (event.lengthComputable) { - const totalUploaded = uploadedSize + event.loaded; - const progress = Math.round((totalUploaded / fileSize) * 100); - progressFill.style.width = `${progress}%`; - } - }; - - xhr.onload = () => { - if (xhr.status === 200) { - resolve(); - } else { - reject(new Error(`Error uploading chunk: ${xhr.statusText}`)); - } - }; - - xhr.onerror = () => reject(new Error('Network error occurred')); - - xhr.send(formData); - }); + xhr.send(formData) + }) } function generateUploadId() { - return Math.random().toString(36).substr(2, 9); + return Math.random().toString(36).substr(2, 9) } diff --git a/client/assets/styles.css b/client/assets/styles.css index c5b1dcc..6332760 100644 --- a/client/assets/styles.css +++ b/client/assets/styles.css @@ -1,162 +1,162 @@ @import url('fonts.css'); body { - background-color: #282828; - color: #ebdbb2; - margin: 0; - padding: 0; - font-family: 'JetBrains Mono', monospace; + background-color: #282828; + color: #ebdbb2; + margin: 0; + padding: 0; + font-family: 'JetBrains Mono', monospace; } #root { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - height: 100vh; - width: auto; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + width: auto; } .header { - display: flex; - justify-content: center; - padding: 1rem; + display: flex; + justify-content: center; + padding: 1rem; } .upload__container, .file__details { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - min-height: 600px; - min-width: 600px; - border-radius: 2rem; - gap: 1rem; - padding: 1rem; - background-color: #ebdbb2; - color: #282828; - overflow-wrap: anywhere; - position: relative; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + min-height: 600px; + min-width: 600px; + border-radius: 2rem; + gap: 1rem; + padding: 1rem; + background-color: #ebdbb2; + color: #282828; + overflow-wrap: anywhere; + position: relative; } .file__details__text { - font-size: 1.5rem; + font-size: 1.5rem; } .file__details__button__container { - display: flex; - gap: 1rem; + display: flex; + gap: 1rem; } .upload__button, .download__button { - font-size: 1.5rem; - padding: 1rem; - background-color: #282828; - border-radius: 16px; - border: 1px solid #282828; - color: #ebdbb2; - cursor: pointer; - transition: transform 0.3s ease-in-out; + font-size: 1.5rem; + padding: 1rem; + background-color: #282828; + border-radius: 16px; + border: 1px solid #282828; + color: #ebdbb2; + cursor: pointer; + transition: transform 0.3s ease-in-out; } .upload__button:hover, .download__button:hover { - transform: scale(1.1); + transform: scale(1.1); } .upload__button { - position: absolute; - bottom: 5%; + position: absolute; + bottom: 5%; } .upload__input { - color: #282828; - border: 2px solid #282828; - padding: 2rem; - border-radius: 0.5rem; - min-height: 300px; - min-width: 300px; - position: absolute; - left: 50%; - transform: translateX(-50%); - opacity: 0; - z-index: 2; - cursor: pointer; + color: #282828; + border: 2px solid #282828; + padding: 2rem; + border-radius: 0.5rem; + min-height: 300px; + min-width: 300px; + position: absolute; + left: 50%; + transform: translateX(-50%); + opacity: 0; + z-index: 2; + cursor: pointer; } .upload__input__overlay { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - left: 50%; - transform: translateX(-50%); - color: #282828; - border: 2px solid #282828; - padding: 2rem; - border-radius: 0.5rem; - min-height: 300px; - min-width: 300px; + display: flex; + justify-content: center; + align-items: center; + position: absolute; + left: 50%; + transform: translateX(-50%); + color: #282828; + border: 2px solid #282828; + padding: 2rem; + border-radius: 0.5rem; + min-height: 300px; + min-width: 300px; } .upload__result { - opacity: 0; - padding: 1rem; + opacity: 0; + padding: 1rem; } .upload__result__visible { - opacity: 1; + opacity: 1; } .upload__progress { - width: 90%; - height: 20px; - background-color: #a89984; - border-radius: 8px; - overflow: hidden; - margin: 1rem; - position: absolute; - bottom: 5%; + width: 90%; + height: 20px; + background-color: #a89984; + border-radius: 8px; + overflow: hidden; + margin: 1rem; + position: absolute; + bottom: 5%; } .upload__progress__fill { - height: 100%; - width: 0; - background-color: #504945; - transition: width 0.2s ease-in-out; + height: 100%; + width: 0; + background-color: #504945; + transition: width 0.2s ease-in-out; } a { - text-decoration: none; - color: inherit; + text-decoration: none; + color: inherit; } @media (max-width: 768px) { + .upload__container, + .file__details { + min-height: 400px; + min-width: 300px; + max-height: 400px; + max-width: 300px; + } + + .upload__input, + .upload__input__overlay { + min-height: 100px; + min-width: 250px; + max-width: 250px; + padding: 0.5rem; + } + + .upload__button, + .download__button { + font-size: 1.2rem; + } + + .file__details__text { + font-size: 1.2rem; + } +} - .upload__container, - .file__details { - min-height: 400px; - min-width: 300px; - max-height: 400px; - max-width: 300px; - } - - .upload__input, - .upload__input__overlay { - min-height: 100px; - min-width: 250px; - max-width: 250px; - padding: 0.5rem; - } - - .upload__button, - .download__button { - font-size: 1.2rem; - } - - .file__details__text { - font-size: 1.2rem; - } -} \ No newline at end of file diff --git a/client/index.html b/client/index.html index 4cec1db..8c433ab 100644 --- a/client/index.html +++ b/client/index.html @@ -1,42 +1,48 @@ - + + + + + File Share + + - - - - File Share - - - - -
-
-

File Share

-
-