[openstreetmap/openstreetmap-website] Image download with user feedback (PR #6192)

[Marwin Hochfelsner]

@hlfan commented on this pull request.



> +    async function handleExportSuccess(fetchResponse) {
+      try {
+        const blob = await fetchResponse.response.blob();
+        const filename = OSM.i18n.t("javascripts.share.filename");
+        downloadBlob(blob, filename);
+      } catch (err) {
+        // eslint-disable-next-line no-alert
+        alert(OSM.i18n.t("javascripts.share.export_failed", { reason: "(blob error)" }));
+      }
+    }
+
+    async function handleExportError(event) {
+      let detailMessage;
+      try {
+        detailMessage = event?.detail?.error?.message;
+        if (!detailMessage) {
+          const responseText = await event.detail.fetchResponse.responseText;
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(responseText, "text/html");
+          detailMessage = doc.body ? doc.body.textContent.trim() : "(unknown)";
+        }
+      } catch (err) {
+        detailMessage = "(unknown)";
+      }
+      // eslint-disable-next-line no-alert
+      alert(OSM.i18n.t("javascripts.share.export_failed", { reason: detailMessage }));
+    }
+
+    $("#export-image").on("turbo:submit-end", async function (event) {
+      if (event.detail.success) {
+        await handleExportSuccess(event.detail.fetchResponse);
+      } else {
+        await handleExportError(event);
+      }
+    });

I found having the logic in a Promise pipeline rather than split over three async functions easier to follow:
```js
    function extractTextFromHTML(htmlString) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlString, "text/html");
      return doc.body ? doc.body.textContent.trim() : "(unknown)";
    }

    function notifyExportFailure(reason) {
      // eslint-disable-next-line no-alert
      alert(OSM.i18n.t("javascripts.share.export_failed", { reason }));
    }

    $("#export-image").on("turbo:submit-end", function ({ detail }) {
      if (detail.success) {
        detail.fetchResponse.response.blob()
          .then(downloadBlob)
          .catch(() => { notifyExportFailure("(blob error)"); });
      } else {
        Promise.resolve()
          .then(() => detail?.error?.message || detail.fetchResponse.responseText.then(extractTextFromHTML))
          .then(notifyExportFailure)
          .catch(() => { notifyExportFailure("(unknown)"); });
      }
    });
```
This requires `OSM.i18n.t("javascripts.share.filename")` to be inside `downloadBlob`.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/6192#pullrequestreview-3039204058
You are receiving this because you are subscribed to this thread.

Message ID: <openstreetmap/openstreetmap-website/pull/6192/review/3039204058 at github.com>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20250721/7f15635d/attachment-0001.htm>