Implement Safari-compatible autonomous custom element for S3 file upload

Co-authored-by: codingjoe <1772890+codingjoe@users.noreply.github.com>

Author: Copilot

s3file/forms.py

@@ -75,7 +75,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 +96,40 @@ def build_attrs(self, *args, **kwargs):
 
         return defaults
 
+    def render(self, name, value, attrs=None, renderer=None):
+        """Render the widget wrapped in a custom element for Safari compatibility."""
+        # Build attributes for the render
+        if attrs is None:
+            attrs = {}
+        
+        # Get all the attributes including data-* attributes
+        final_attrs = self.build_attrs(self.attrs, attrs)
+        
+        # Separate data-* attributes for the wrapper from other attributes for the input
+        wrapper_attrs = {k: v for k, v in final_attrs.items() if k.startswith("data-")}
+        input_attrs = {k: v for k, v in final_attrs.items() if not k.startswith("data-")}
+        
+        # Call parent's render with only non-data attributes
+        # We need to temporarily set attrs to avoid double-adding data attributes
+        original_attrs = self.attrs
+        self.attrs = {}
+        input_html = super().render(name, value, input_attrs, renderer)
+        self.attrs = original_attrs
+        
+        # Build wrapper attributes string
+        from django.utils.html import format_html_join
+        wrapper_attrs_html = format_html_join(
+            ' ',
+            '{}="{}"',
+            wrapper_attrs.items()
+        )
+        
+        # Wrap the input in the s3-file custom element
+        if wrapper_attrs_html:
+            return format_html('<s3-file {}>{}</s3-file>', wrapper_attrs_html, input_html)
+        else:
+            return format_html('<s3-file>{}</s3-file>', input_html)
+
     def get_conditions(self, accept):
         conditions = [
             {"bucket": self.bucket_name},

s3file/static/s3file/js/s3file.js

@@ -11,22 +11,83 @@ export function getKeyFromResponse (responseText) {
 
 /**
  * Custom element to upload files to AWS S3.
+ * Safari-compatible autonomous custom element that wraps a file input.
  *
- * @extends HTMLInputElement
+ * @extends HTMLElement
  */
-export class S3FileInput extends globalThis.HTMLInputElement {
+export class S3FileInput extends globalThis.HTMLElement {
   constructor () {
     super()
-    this.type = 'file'
     this.keys = []
     this.upload = null
   }
 
   connectedCallback () {
+    // Find or create the input element
+    this._input = this.querySelector('input[type="file"]')
+    if (!this._input) {
+      this._input = document.createElement('input')
+      this._input.type = 'file'
+      this._syncAttributes()
+      this.appendChild(this._input)
+    }
+
     this.form.addEventListener('formdata', this.fromDataHandler.bind(this))
     this.form.addEventListener('submit', this.submitHandler.bind(this), { once: true })
     this.form.addEventListener('upload', this.uploadHandler.bind(this))
-    this.addEventListener('change', this.changeHandler.bind(this))
+    this._input.addEventListener('change', this.changeHandler.bind(this))
+  }
+
+  /**
+   * Sync attributes from the custom element to the internal input element.
+   */
+  _syncAttributes () {
+    const attrsToSync = ['name', 'accept', 'required', 'multiple', 'disabled', 'id']
+    attrsToSync.forEach(attr => {
+      if (this.hasAttribute(attr)) {
+        this._input.setAttribute(attr, this.getAttribute(attr))
+      }
+    })
+  }
+
+  /**
+   * Proxy properties to the internal input element.
+   */
+  get files () {
+    return this._input ? this._input.files : []
+  }
+
+  get name () {
+    return this._input ? this._input.name : this.getAttribute('name') || ''
+  }
+
+  set name (value) {
+    if (this._input) {
+      this._input.name = value
+    }
+    this.setAttribute('name', value)
+  }
+
+  get form () {
+    return this._input ? this._input.form : this.closest('form')
+  }
+
+  get validity () {
+    return this._input ? this._input.validity : { valid: true }
+  }
+
+  get validationMessage () {
+    return this._input ? this._input.validationMessage : ''
+  }
+
+  setCustomValidity (message) {
+    if (this._input) {
+      this._input.setCustomValidity(message)
+    }
+  }
+
+  reportValidity () {
+    return this._input ? this._input.reportValidity() : true
   }
 
   changeHandler () {
@@ -113,6 +174,23 @@ export class S3FileInput extends globalThis.HTMLInputElement {
       }
     }
   }
+
+  /**
+   * Called when observed attributes change.
+   */
+  static get observedAttributes () {
+    return ['name', 'accept', 'required', 'multiple', 'disabled', 'id']
+  }
+
+  attributeChangedCallback (name, oldValue, newValue) {
+    if (this._input && oldValue !== newValue) {
+      if (newValue === null) {
+        this._input.removeAttribute(name)
+      } else {
+        this._input.setAttribute(name, newValue)
+      }
+    }
+  }
 }
 
-globalThis.customElements.define('s3-file', S3FileInput, { extends: 'input' })
+globalThis.customElements.define('s3-file', S3FileInput)

tests/__tests__/s3file.test.js

@@ -24,7 +24,6 @@ describe('getKeyFromResponse', () => {
 describe('S3FileInput', () => {
   test('constructor', () => {
     const input = new s3file.S3FileInput()
-    assert.strictEqual(input.type, 'file')
     assert.deepStrictEqual(input.keys, [])
     assert.strictEqual(input.upload, null)
   })
@@ -33,11 +32,11 @@ describe('S3FileInput', () => {
     const form = document.createElement('form')
     document.body.appendChild(form)
     const input = new s3file.S3FileInput()
-    input.addEventListener = mock.fn(input.addEventListener)
     form.addEventListener = mock.fn(form.addEventListener)
     form.appendChild(input)
     assert(form.addEventListener.mock.calls.length === 3)
-    assert(input.addEventListener.mock.calls.length === 1)
+    assert(input._input !== null)
+    assert(input._input.type === 'file')
   })
 
   test('changeHandler', () => {

tests/test_forms.py

@@ -127,7 +127,6 @@ def test_clear(self, filemodel):
 
     def test_build_attr(self, freeze_upload_folder):
         assert set(ClearableFileInput().build_attrs({}).keys()) == {
-            "is",
             "data-url",
             "data-fields-x-amz-algorithm",
             "data-fields-x-amz-date",
@@ -141,7 +140,6 @@ def test_build_attr(self, freeze_upload_folder):
             ClearableFileInput().build_attrs({})["data-s3f-signature"]
             == "VRIPlI1LCjUh1EtplrgxQrG8gSAaIwT48mMRlwaCytI"
         )
-        assert ClearableFileInput().build_attrs({})["is"] == "s3-file"
 
     def test_get_conditions(self, freeze_upload_folder):
         conditions = ClearableFileInput().get_conditions(None)
@@ -182,6 +180,20 @@ def test_accept(self):
             "application/pdf,image/*"
         )
 
+    def test_render_wraps_in_s3_file_element(self, freeze_upload_folder):
+        widget = ClearableFileInput()
+        html = widget.render(name="file", value=None)
+        # Check that the output is wrapped in s3-file custom element
+        assert html.startswith("<s3-file")
+        assert html.endswith("</s3-file>")
+        # Check that data attributes are on the wrapper
+        assert "data-url=" in html
+        assert "data-s3f-signature=" in html
+        # Check that input element is inside
+        assert '<input' in html
+        assert 'type="file"' in html
+        assert 'name="file"' in html
+
     @pytest.mark.selenium
     def test_no_js_error(self, driver, live_server):
         driver.get(live_server + self.create_url)