123 lines
4.1 KiB
JavaScript
123 lines
4.1 KiB
JavaScript
// Horizontal bar layout for file results
|
|
|
|
// Replace the entire displayUploadedFiles function with this:
|
|
function displayUploadedFiles(results) {
|
|
console.log('📁 Displaying file results:', results);
|
|
|
|
result.innerHTML = '';
|
|
|
|
const header = document.createElement('div');
|
|
header.innerHTML = '<h3>📁 Files Uploaded</h3>';
|
|
result.appendChild(header);
|
|
|
|
results.forEach((fileResult, index) => {
|
|
const fileContainer = document.createElement('div');
|
|
fileContainer.style.cssText = `
|
|
margin-bottom: 15px;
|
|
padding: 15px;
|
|
border: 2px solid #4CAF50;
|
|
border-radius: 8px;
|
|
background-color: #f0f8f0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
`;
|
|
|
|
// Left: File info
|
|
const fileInfo = document.createElement('div');
|
|
fileInfo.style.cssText = `
|
|
flex: 1;
|
|
min-width: 180px;
|
|
`;
|
|
|
|
const fileName = document.createElement('div');
|
|
fileName.innerHTML = `<strong>📄 ${fileResult.file.name}</strong>`;
|
|
fileName.style.marginBottom = '5px';
|
|
fileInfo.appendChild(fileName);
|
|
|
|
const fileSize = document.createElement('div');
|
|
fileSize.innerHTML = `📊 ${(fileResult.originalSize / 1024).toFixed(1)} KB`;
|
|
fileSize.style.cssText = `
|
|
font-size: 14px;
|
|
color: #666;
|
|
`;
|
|
fileInfo.appendChild(fileSize);
|
|
|
|
fileContainer.appendChild(fileInfo);
|
|
|
|
// Middle: Action buttons
|
|
const buttonContainer = document.createElement('div');
|
|
buttonContainer.style.cssText = `
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
`;
|
|
|
|
// Share button
|
|
const shareButton = document.createElement('button');
|
|
shareButton.textContent = '🔗 Copy';
|
|
shareButton.className = 'share-button';
|
|
shareButton.style.cssText = `padding: 6px 10px; font-size: 13px;`;
|
|
shareButton.addEventListener('click', () => {
|
|
navigator.clipboard.writeText(fileResult.url).then(() => {
|
|
shareButton.textContent = '✅ Copied!';
|
|
setTimeout(() => {
|
|
shareButton.textContent = '🔗 Copy';
|
|
}, 2000);
|
|
});
|
|
});
|
|
buttonContainer.appendChild(shareButton);
|
|
|
|
// View button
|
|
const viewButton = document.createElement('button');
|
|
viewButton.textContent = '👁️ View';
|
|
viewButton.className = 'view-button';
|
|
viewButton.style.cssText = `padding: 6px 10px; font-size: 13px;`;
|
|
viewButton.addEventListener('click', () => {
|
|
window.open(fileResult.url, '_blank');
|
|
});
|
|
buttonContainer.appendChild(viewButton);
|
|
|
|
// QR Code button
|
|
const qrButton = document.createElement('button');
|
|
qrButton.textContent = '📱 QR';
|
|
qrButton.className = 'qr-button';
|
|
qrButton.style.cssText = `
|
|
background-color: #9C27B0;
|
|
color: white;
|
|
padding: 6px 10px;
|
|
font-size: 13px;
|
|
`;
|
|
qrButton.addEventListener('click', () => {
|
|
showQRCode(fileResult.url, fileResult.file.name);
|
|
});
|
|
buttonContainer.appendChild(qrButton);
|
|
|
|
fileContainer.appendChild(buttonContainer);
|
|
|
|
// Right: Image thumbnail (if it's an image)
|
|
if (isImageFile(fileResult.file)) {
|
|
const thumbnail = document.createElement('img');
|
|
thumbnail.src = fileResult.url;
|
|
thumbnail.alt = fileResult.file.name;
|
|
thumbnail.style.cssText = `
|
|
width: 60px;
|
|
height: 60px;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
border: 1px solid #ddd;
|
|
flex-shrink: 0;
|
|
`;
|
|
|
|
thumbnail.onerror = () => {
|
|
thumbnail.style.display = 'none';
|
|
};
|
|
|
|
fileContainer.appendChild(thumbnail);
|
|
}
|
|
|
|
result.appendChild(fileContainer);
|
|
});
|
|
}
|