file-share/client/assets/index.js

117 lines
No EOL
4.2 KiB
JavaScript

document.addEventListener('DOMContentLoaded', async () => {
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();
}
});
const baseUrl = window.location.origin;
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 = `<a href="${downloadUrl}">Download</a>`;
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 formData = new FormData();
formData.append('file', file);
try {
const response = await fetch(`${baseUrl}/upload`, {
method: 'POST',
body: formData
});
const uploadResult = document.getElementById('upload__result');
if (!response.ok) {
uploadResult.textContent = `Error: ${response.statusText}`;
uploadResult.classList.add('upload__result__visible');
return;
}
const contentType = response.headers.get('Content-Type');
if (contentType && contentType.includes('application/json')) {
const result = await response.json();
const pageUrl = `${baseUrl}/?id=${result.id}&key=${result.key}`;
window.location.href = pageUrl;
} else {
const result = await response.text();
uploadResult.textContent = result;
}
uploadResult.classList.add('upload__result__visible');
} 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');
}
});
}