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);
});
}