fix(frontend): resolve fetched error message in file upload component

paulrobertlloyd · paulrobertlloyd · commit dc6174a38500 · 2024-04-09T23:17:29.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/frontend/components/file-input/index.js b/packages/frontend/components/file-input/index.js
@@ -1,3 +1,4 @@
+import { IndiekitError } from "@indiekit/error";
 import { wrapElement } from "../../lib/utils/wrap-element.js";
 
 export const FileInputFieldController = class extends HTMLElement {
@@ -8,6 +9,7 @@ export const FileInputFieldController = class extends HTMLElement {
 
     /** @type {HTMLElement} */
     this.$uploadProgress = this.querySelector(".file-input__progress");
+    /** @type {HTMLInputElement} */
     this.$fileInputPath = this.querySelector(".file-input__path");
     this.$fileInputPicker = this.querySelector(".file-input__picker");
     this.$fileInputPickerTemplate = this.querySelector("#file-input-picker");
@@ -76,21 +78,23 @@ export const FileInputFieldController = class extends HTMLElement {
       this.$fileInputPath.readOnly = true;
 
       const endpointResponse = await fetch(this.endpoint, {
-        method: "POST",
         body: formData,
+        method: "POST",
+        headers: {
+          Accept: "application/json",
+        },
       });
 
-      if (endpointResponse.ok) {
-        this.$fileInputPath.value =
-          await endpointResponse.headers.get("location");
-      } else {
-        this.showErrorMessage(endpointResponse.statusText);
+      if (!endpointResponse.ok) {
+        throw await IndiekitError.fromFetch(endpointResponse);
       }
 
+      this.$fileInputPath.value =
+        await endpointResponse.headers.get("location");
       this.$fileInputPath.readOnly = false;
       this.$uploadProgress.hidden = true;
     } catch (error) {
-      this.showErrorMessage(error);
+      this.showErrorMessage(error.message);
       this.$fileInputPath.readOnly = false;
       this.$uploadProgress.hidden = true;
     }
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@accessible-components/tag-input": "^0.2.0",
+    "@indiekit/error": "^1.0.0-beta.8",
     "@indiekit/util": "^1.0.0-beta.10",
     "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.0.0",
