Fix file upload widget for oruga

tailbone/forms/core.py

@@ -52,7 +52,7 @@ from tailbone.util import raw_datetime, get_form_data, render_markdown
 from tailbone.forms import types
 from tailbone.forms.widgets import (ReadonlyWidget, PlainDateWidget,
                                     JQueryDateWidget, JQueryTimeWidget,
-                                    MultiFileUploadWidget)
+                                    FileUploadWidget, MultiFileUploadWidget)
 from tailbone.exceptions import TailboneJSONFieldError
 
 
@@ -646,7 +646,7 @@ class Form(object):
             self.set_widget(key, dfwidget.TextAreaWidget(cols=80, rows=8))
         elif type_ == 'file':
             tmpstore = SessionFileUploadTempStore(self.request)
-            kw = {'widget': dfwidget.FileUploadWidget(tmpstore),
+            kw = {'widget': FileUploadWidget(tmpstore, request=self.request),
                   'title': self.get_label(key)}
             if 'required' in kwargs and not kwargs['required']:
                 kw['missing'] = colander.null

tailbone/forms/widgets.py

@@ -337,6 +337,23 @@ class JQueryAutocompleteWidget(dfwidget.AutocompleteInputWidget):
         return field.renderer(template, **tmpl_values)
 
 
+class FileUploadWidget(dfwidget.FileUploadWidget):
+    """
+    Widget to handle file upload.  Must override to add ``use_oruga``
+    to field template context.
+    """
+
+    def __init__(self, *args, **kwargs):
+        self.request = kwargs.pop('request')
+        super().__init__(*args, **kwargs)
+
+    def get_template_values(self, field, cstruct, kw):
+        values = super().get_template_values(field, cstruct, kw)
+        if self.request:
+            values['use_oruga'] = self.request.use_oruga
+        return values
+
+
 class MultiFileUploadWidget(dfwidget.FileUploadWidget):
     """
     Widget to handle multiple (arbitrary number) of file uploads.

tailbone/templates/deform/file_upload.pt

@@ -2,11 +2,14 @@
 <tal:block tal:define="oid oid|field.oid;
                        css_class css_class|field.widget.css_class;
                        style style|field.widget.style;
-                       field_name field_name|field.name;">
+                       field_name field_name|field.name;
+                       use_oruga use_oruga;">
 
   <div tal:define="vmodel vmodel|'field_model_' + field_name;">
     ${field.start_mapping()}
-    <b-field class="file">
+
+    <b-field class="file"
+             tal:condition="not use_oruga">
       <b-upload name="upload"
                 v-model="${vmodel}">
         <a class="button is-primary">
@@ -18,6 +21,23 @@
         {{ ${vmodel}.name }}
       </span>
     </b-field>
+
+    <o-field class="file"
+             tal:condition="use_oruga">
+      <o-upload name="upload"
+                v-slot="{ onclick }"
+                v-model="${vmodel}">
+        <o-button variant="primary"
+                  @click="onclick">
+          <o-icon icon="upload" />
+          <span>Click to upload</span>
+        </o-button>
+      </o-upload>
+      <span class="file-name" v-if="${vmodel}">
+        {{ ${vmodel}.name }}
+      </span>
+    </o-field>
+
     ${field.end_mapping()}
   </div>