Revert v6 web component rewrite (#367)

Back to the roots, I carefully reverted the web component changes
while keeping the updates to the Selenium suite and the package.

Reverts 2706cb3

Author: codingjoe

.pre-commit-config.yaml

@@ -20,6 +20,10 @@ repos:
     rev: 1.29.1
     hooks:
       - id: django-upgrade
+  - repo: https://github.com/codingjoe/esupgrade
+    rev: 2025.9.0
+    hooks:
+      - id: esupgrade
   - repo: https://github.com/hukkin/mdformat
     rev: 1.0.0
     hooks:

README.md

@@ -153,6 +153,51 @@ to your CORS policy.
 ]
 ```
 
+### Progress Bar
+
+S3File does emit progress signals that can be used to display some kind
+of progress bar. Signals named `progress` are emitted for both each
+individual file input as well as for the form as a whole.
+
+The progress signal carries the following details:
+
+```javascript
+console.debug(event.detail)
+
+{
+    progress: 0.4725307607171312  // total upload progress of either a form or single input
+    loaded: 1048576  // total upload progress of either a form or single input
+    total: 2219064  // total bytes to upload
+    currentFile: File {…}  // file object
+    currentFileName: "text.txt"  // file name of the file currently uploaded
+    currentFileProgress: 0.47227834703299176  // upload progress of that file
+    originalEvent: ProgressEvent {…} // the original XHR onprogress event
+}
+```
+
+The following example implements a Bootstrap progress bar for upload
+progress of an entire form.
+
+```html
+<div class="progress">
+  <div class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
+</div>
+```
+
+```javascript
+const form = document.querySelector('form')
+const progressBar = document.querySelector('.progress-bar')
+
+form.addEventListener('progress', (event) => {
+    // event.detail.progress is a value between 0 and 1
+    const percent = Math.round(event.detail.progress * 100)
+
+    progressBar.setAttribute('style', `width: ${percent}%`)
+    progressBar.setAttribute('aria-valuenow', percent)
+    progressBar.innerText = `${percent}%`
+})
+```
+
 ### Using S3File in development
 
 Using S3File in development can be helpful especially if you want to use

s3file/forms.py

@@ -1,122 +1,63 @@
 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
-from s3file.storages import get_aws_location, storage
-
-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."""
+try:
+    from django.forms import Script
+except ImportError:
+    from django.forms.utils import flatatt
+    from django.templatetags.static import static
+    from django.utils.html import format_html, html_safe
+
+    # Django < 6.0 backport
+    @html_safe
+    class MediaAsset:
+        element_template = "{path}"
+
+        def __init__(self, path, **attributes):
+            self._path = path
+            self.attributes = attributes
+
+        def __eq__(self, other):
+            return (self.__class__ is other.__class__ and self.path == other.path) or (
+                isinstance(other, str) and self._path == other
+            )
 
-    def __init__(self, path):
-        self.path = path
+        def __hash__(self):
+            return hash(self._path)
 
-    def __eq__(self, other):
-        return (self.__class__ is other.__class__ and self.path == other.path) or (
-            other.__class__ is str and self.path == other
-        )
+        def __str__(self):
+            return format_html(
+                self.element_template,
+                path=self.path,
+                attributes=flatatt(self.attributes),
+            )
 
-    def __hash__(self):
-        return hash(self.path)
+        def __repr__(self):
+            return f"{type(self).__qualname__}({self._path!r})"
 
-    def __str__(self):
-        return self.absolute_path(self.path)
+        @property
+        def path(self):
+            if self._path.startswith(("http://", "https://", "/")):
+                return self._path
+            return static(self._path)
 
-    def absolute_path(self, path):
-        if path.startswith(("http://", "https://", "/")):
-            return path
-        return static(path)
+    class Script(MediaAsset):
+        element_template = '<script src="{path}"{attributes}></script>'
 
-    def __repr__(self):
-        return f"{type(self).__qualname__}: {self.path!r}"
+        def __init__(self, src, **attributes):
+            super().__init__(src, **attributes)
 
 
-class ESM(Asset):
-    """A JavaScript asset for ECMA Script Modules (ESM)."""
+from s3file.middleware import S3FileMiddleware
+from s3file.storages import get_aws_location, storage
 
-    def __str__(self):
-        path = super().__str__()
-        template = '<script src="{}" type="module"></script>'
-        return format_html(template, self.absolute_path(path))
+logger = logging.getLogger("s3file")
 
 
 class S3FileInputMixin:
@@ -162,15 +103,12 @@ def build_attrs(self, *args, **kwargs):
         )
         defaults.update(attrs)
 
+        try:
+            defaults["class"] += " s3file"
+        except KeyError:
+            defaults["class"] = "s3file"
         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},
@@ -201,4 +139,4 @@ def upload_folder(self):
         )  # S3 uses POSIX paths
 
     class Media:
-        js = [ESM("s3file/js/s3file.js")]
+        js = [Script("s3file/js/s3file.js", type="module")]