Display server errors on attachment upload

3 files changed, 39 insertions, 2 deletions

diff --git a/themes/alps/assets/attachments.js b/themes/alps/assets/attachments.js
index a57b4c5..612808a 100644
--- a/themes/alps/assets/attachments.js
+++ b/themes/alps/assets/attachments.js
@@ -85,17 +85,40 @@ function attachFile(file) {
 	let formData = new FormData();
 	formData.append("attachments", file);
 
+	const handleError = msg => {
+		attachments = attachments.filter(a => a !== attachment);
+		node.classList.add("error");
+		node.querySelector(".progress").remove();
+		node.querySelector(".size").remove();
+		node.querySelector("button").remove();
+		node.querySelector(".error").innerText = "Error: " + msg;
+		updateState();
+	};
+
 	xhr.open("POST", "/compose/attachment");
 	xhr.upload.addEventListener("progress", ev => {
 		attachment.progress = ev.loaded / ev.total;
 		updateState();
 	});
 	xhr.addEventListener("load", () => {
-		// TODO: Handle errors
-		const resp = JSON.parse(xhr.responseText);
+		let resp;
+		try {
+			resp = JSON.parse(xhr.responseText);
+		} catch {
+			resp = { "error": "Error: invalid response" };
+		}
+
+		if (xhr.status !== 200) {
+			handleError(resp["error"]);
+			return;
+		}
+
 		attachment.uuid = resp[0];
 		updateState();
 	});
+	xhr.addEventListener("error", () => {
+		handleError("an unexpected problem occured");
+	});
 	xhr.send(formData);
 
 	updateState();
@@ -105,6 +128,7 @@ function attachmentNodeFor(file) {
 	const node = document.createElement("div"),
 		progress = document.createElement("span"),
 		filename = document.createElement("span"),
+		error = document.createElement("span"),
 		size = document.createElement("span"),
 		button = document.createElement("button");
 	node.classList.add("upload");
@@ -116,6 +140,9 @@ function attachmentNodeFor(file) {
 	filename.innerText = file.name;
 	node.appendChild(filename);
 
+	error.classList.add("error");
+	node.appendChild(error);
+
 	size.classList.add("size");
 	size.innerText = formatSI(file.size) + "B";
 	node.appendChild(size);
diff --git a/themes/alps/assets/style.css b/themes/alps/assets/style.css
index 8b80504..79bc88a 100644
--- a/themes/alps/assets/style.css
+++ b/themes/alps/assets/style.css
@@ -245,6 +245,15 @@ main.create-update #attachment-list .upload .progress {
   left: 0;
 }
 
+main.create-update #attachment-list .upload .error {
+  display: none;
+}
+
+main.create-update #attachment-list .upload.error .error {
+  display: block;
+  color: red;
+}
+
 main.create-update textarea {
   flex: 1 auto;
   resize: none;
diff --git a/themes/alps/compose.html b/themes/alps/compose.html
index 1f8320b..f4b7b9a 100644
--- a/themes/alps/compose.html
+++ b/themes/alps/compose.html
@@ -52,6 +52,7 @@
             <div class="upload">
               <span class="progress"></span>
               <span class="filename">foobar.pdf</span>
+              <span class="error"></span>
               <span class="size">1234 KiB</span>
               <button>&times;</button>
             </div>