diff --git a/index.html.tmpl b/index.html.tmpl index 39e3983..07e90af 100644 --- a/index.html.tmpl +++ b/index.html.tmpl @@ -57,7 +57,7 @@ } button:hover { background: #555; } .progress-container { - width: 100%%; + width: 100%; background: #ddd; border-radius: 4px; margin: 10px 0; @@ -65,7 +65,7 @@ display: none; } .progress-bar { - height: 100%%; + height: 100%; background: #333; border-radius: 4px; width: 0; @@ -152,7 +152,7 @@ } progressContainer.style.display = 'block'; - progressBar.style.width = '0%%'; + progressBar.style.width = '0%'; results.innerHTML = ''; const xhr = new XMLHttpRequest(); @@ -160,7 +160,7 @@ xhr.upload.addEventListener('progress', (e) => { if (e.lengthComputable) { const percent = (e.loaded / e.total) * 100; - progressBar.style.width = percent + '%%'; + progressBar.style.width = percent + '%'; } }); @@ -169,9 +169,20 @@ const response = JSON.parse(xhr.responseText); displayResults(response.urls); } else { - results.innerHTML = '
Upload failed: ' + xhr.statusText + '
'; + let message = xhr.statusText; + try { + const response = JSON.parse(xhr.responseText); + if (response.error) { + message = response.error; + } + } catch (e) { + if (xhr.responseText) { + message = xhr.responseText; + } + } + results.innerHTML = '
Upload failed: ' + message + '
'; } - progressBar.style.width = '100%%'; + progressBar.style.width = '100%'; }); xhr.addEventListener('error', () => {