Fix #327 -- Switch to autonomous custom element for Safari support (#357)

Apple decided they would rather not support customized built-in elements,
see also: WebKit/standards-positions#97


Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: 4 people

.github/workflows/ci.yml

@@ -64,11 +64,6 @@ jobs:
     runs-on: ${{ matrix.os }}
     steps:
       - uses: actions/checkout@v6
-      - name: Install Selenium
-        run: |
-          curl -LsSfO https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-          sudo dpkg -i google-chrome-stable_current_amd64.deb || sudo apt-get -f install -y
-        if: matrix.os == 'ubuntu-latest'
       - uses: astral-sh/setup-uv@v7
       - run: uv run pytest -m selenium
       - uses: codecov/codecov-action@v5

s3file/forms.py

@@ -1,12 +1,15 @@
 import base64
+import html
 import logging
 import pathlib
 import uuid
+from html.parser import HTMLParser
 
 from django.conf import settings
 from django.templatetags.static import static
 from django.utils.functional import cached_property
 from django.utils.html import format_html, html_safe
+from django.utils.safestring import mark_safe
 from storages.utils import safe_join
 
 from s3file.middleware import S3FileMiddleware
@@ -15,6 +18,71 @@
 logger = logging.getLogger("s3file")
 
 
+class InputToS3FileRewriter(HTMLParser):
+    """HTML parser that rewrites <input type="file"> to <s3-file> custom elements."""
+
+    def __init__(self):
+        super().__init__()
+        self.output = []
+
+    def handle_starttag(self, tag, attrs):
+        if tag == "input" and dict(attrs).get("type") == "file":
+            self.output.append("<s3-file")
+            for name, value in attrs:
+                if name != "type":
+                    self.output.append(
+                        f' {name}="{html.escape(value, quote=True)}"'
+                        if value
+                        else f" {name}"
+                    )
+            self.output.append(">")
+        else:
+            self.output.append(self.get_starttag_text())
+
+    def handle_endtag(self, tag):
+        self.output.append(f"</{tag}>")
+
+    def handle_data(self, data):
+        self.output.append(data)
+
+    def handle_startendtag(self, tag, attrs):
+        if tag == "input" and dict(attrs).get("type") == "file":
+            self.output.append("<s3-file")
+            for name, value in attrs:
+                if name != "type":
+                    self.output.append(
+                        f' {name}="{html.escape(value, quote=True)}"'
+                        if value
+                        else f" {name}"
+                    )
+            self.output.append(">")
+        else:
+            self.output.append(self.get_starttag_text())
+
+    def handle_comment(self, data):
+        # Preserve HTML comments in the output
+        self.output.append(f"<!--{data}-->")
+
+    def handle_decl(self, decl):
+        # Preserve declarations such as <!DOCTYPE ...> in the output
+        self.output.append(f"<!{decl}>")
+
+    def handle_pi(self, data):
+        # Preserve processing instructions such as <?xml ...?> in the output
+        self.output.append(f"<?{data}>")
+
+    def handle_entityref(self, name):
+        # Preserve HTML entities like &amp;, &lt;, &gt;
+        self.output.append(f"&{name};")
+
+    def handle_charref(self, name):
+        # Preserve character references like &#39;, &#x27;
+        self.output.append(f"&#{name};")
+
+    def get_html(self):
+        return "".join(self.output)
+
+
 @html_safe
 class Asset:
     """A generic asset that can be included in a template."""
@@ -75,7 +143,6 @@ def client(self):
 
     def build_attrs(self, *args, **kwargs):
         attrs = super().build_attrs(*args, **kwargs)
-        attrs["is"] = "s3-file"
 
         accept = attrs.get("accept")
         response = self.client.generate_presigned_post(
@@ -97,6 +164,13 @@ def build_attrs(self, *args, **kwargs):
 
         return defaults
 
+    def render(self, name, value, attrs=None, renderer=None):
+        """Render the widget as a custom element for Safari compatibility."""
+        html_output = str(super().render(name, value, attrs=attrs, renderer=renderer))
+        parser = InputToS3FileRewriter()
+        parser.feed(html_output)
+        return mark_safe(parser.get_html())  # noqa: S308
+
     def get_conditions(self, accept):
         conditions = [
             {"bucket": self.bucket_name},