Initial first thoughts about how file uploading might work.

django_unicorn/static/js/element.js

@@ -36,6 +36,7 @@ export class Element {
     this.key = null;
     this.events = [];
     this.errors = [];
+    this.file = {};
 
     if (!this.el.attributes) {
       return;
@@ -62,6 +63,15 @@ export class Element {
         this[key].debounceTime = attribute.modifiers.debounce
           ? parseInt(attribute.modifiers.debounce, 10) || -1
           : -1;
+
+        if (this.el.type === "file") {
+          this.file = {
+            accept: this.el.accept,
+            multiple: this.el.multiple,
+          };
+
+          // console.log("this.file", this.file);
+        }
       } else if (attribute.isDb) {
         this.db.name = attribute.value;
       } else if (attribute.isPK) {

example/coffee/models.py

@@ -1,6 +1,6 @@
 import uuid
 
-from django.db.models import SET_NULL, ForeignKey, Model
+from django.db.models import SET_NULL, FileField, ForeignKey, Model
 from django.db.models.fields import (
     CharField,
     DateField,
@@ -27,3 +27,9 @@ class Flavor(Model):
 
     def __str__(self):
         return self.name
+
+
+class Document(Model):
+    description = CharField(max_length=255, blank=True)
+    document = FileField()
+    uploaded_at = DateTimeField(auto_now_add=True)

example/unicorn/components/js.py

@@ -2,8 +2,14 @@
 
 from django_unicorn.components import UnicornView
 
+from ..forms import DocumentForm
+
 
 class JsView(UnicornView):
+    form_class = DocumentForm
+
+    document = ""
+
     states = (
         "Alabama",
         "Alaska",
@@ -27,5 +33,8 @@ def select_state(self, val, idx):
         print("select_state called idx", idx)
         self.selected_state = val
 
+    def upload_file(self):
+        print("UPLOAD")
+
     class Meta:
         javascript_excludes = ("states",)

example/unicorn/forms.py

@@ -1,7 +1,18 @@
 from django import forms
 
+from example.coffee.models import Document
+
 
 class ValidationForm(forms.Form):
     text = forms.CharField(min_length=3, max_length=10)
     date_time = forms.DateTimeField()
     number = forms.IntegerField()
+
+
+class DocumentForm(forms.ModelForm):
+    class Meta:
+        model = Document
+        fields = (
+            "description",
+            "document",
+        )

example/unicorn/templates/unicorn/js.html

@@ -54,4 +54,12 @@ <h2>Select2</h2>
             select2_datetime: {{ select2_datetime }}
         </div>
     </div>
+
+    <div>
+        <form wire:submit.prevent="upload_file">
+            <input id="blob" type="file" u:model="document" />
+
+            <button type="submit">Upload</button>
+        </form>
+    </div>
 </div>