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

Author: paulrobertlloyd

package-lock.json

@@ -1,3 +1,4 @@
+import { IndiekitError } from "@indiekit/error";
 import { wrapElement } from "../../lib/utils/wrap-element.js";
 
 export const FileInputFieldController = class extends HTMLElement {
@@ -76,17 +77,19 @@ 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) {

packages/frontend/components/file-input/index.js

@@ -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",