diff --git a/index.html.tmpl b/index.html.tmpl index 077cdd2..38d70e4 100644 --- a/index.html.tmpl +++ b/index.html.tmpl @@ -139,6 +139,17 @@ document.getElementById('maxUploadSizeLabel').textContent = formatBytes(maxUploadSize); document.getElementById('maxUploadSizeText').textContent = formatBytes(maxUploadSize); + function clearResults() { + results.replaceChildren(); + } + + function showMessage(message) { + const div = document.createElement('div'); + div.className = 'result-item'; + div.textContent = message; + results.replaceChildren(div); + } + uploadArea.addEventListener('click', () => fileInput.click()); uploadArea.addEventListener('dragover', (e) => { @@ -174,14 +185,14 @@ } if (oversizedFiles.length > 0) { - results.innerHTML = '
Upload failed: the following file(s) exceed the maximum size of ' + - formatBytes(maxUploadSize) + ': ' + oversizedFiles.join(', ') + '
'; + showMessage('Upload failed: the following file(s) exceed the maximum size of ' + + formatBytes(maxUploadSize) + ': ' + oversizedFiles.join(', ')); return; } if (maxUploadSize && totalSize > maxUploadSize) { - results.innerHTML = '
Upload failed: total upload size (' + formatBytes(totalSize) + - ') exceeds the maximum of ' + formatBytes(maxUploadSize) + '
'; + showMessage('Upload failed: total upload size (' + formatBytes(totalSize) + + ') exceeds the maximum of ' + formatBytes(maxUploadSize)); return; } @@ -192,7 +203,7 @@ progressContainer.style.display = 'block'; progressBar.style.width = '0%'; - results.innerHTML = ''; + clearResults(); const xhr = new XMLHttpRequest(); @@ -219,13 +230,13 @@ message = xhr.responseText; } } - results.innerHTML = '
Upload failed: ' + message + '
'; + showMessage('Upload failed: ' + message); } progressBar.style.width = '100%'; }); xhr.addEventListener('error', () => { - results.innerHTML = '
Upload failed: Network error
'; + showMessage('Upload failed: Network error'); }); xhr.open('POST', '/upload'); @@ -233,11 +244,19 @@ } function displayResults(urls) { - results.innerHTML = '

Download URLs:

'; + const heading = document.createElement('h3'); + heading.textContent = 'Download URLs:'; + results.replaceChildren(heading); + urls.forEach(url => { const div = document.createElement('div'); div.className = 'result-item'; - div.innerHTML = '' + url + ''; + const link = document.createElement('a'); + link.href = url; + link.target = '_blank'; + link.rel = 'noopener noreferrer'; + link.textContent = url; + div.appendChild(link); results.appendChild(div); }); }