Styled file field with materializecss template filter

saleor · Apr 20, 2019 · 7659e2d · 7659e2d
1 parent cb312fa
commit 7659e2d
Showing 1 changed file with 57 additions and 10 deletions.
diff --git a/templates/materializecssform/field.html b/templates/materializecssform/field.html
@@ -171,19 +171,66 @@
     {% endif %}
   </div>
 {% elif field|is_file %}
-  <div class="input col {{ classes.label }}">
+  <div
+    class="input col input-field {{ classes.label }}">
+    {% if field.auto_id %}
     <p>
-      {% if field.auto_id %}
-        <label class="{{ classes.label }}" for="{{ field.auto_id }}">
-          {{ field.label }}
-          {% if not field.field.required %}
-            {% trans "(optional)" context "Dashboard form labels" %}
+      <label
+        class="{{ classes.label }}"
+        for="{{ field.auto_id }}">
+        {{ field.label }}
+        {% if not field.field.required %}
+          {% trans "(optional)" context "Dashboard form labels" %}
+        {% endif %}
+      </label>
+    </p>
+    {% endif %}
+
+    {% with field.field.widget as widget %}
+      {% if field.value %}
+        <p>
+          {{ widget.initial_text }}:
+          <a
+            href="{{ field.value.url }}">
+            {{ field.value }}
+          </a>
+          {% if not widget.required %}
+            <input
+              type="checkbox"
+              name="{{ field.name }}-clear"
+              id="{{ field.name }}-clear_id">
+            <label
+              for="{{ field.name }}-clear_id">
+              {{ widget.clear_checkbox_label }}
+            </label>
           {% endif %}
-        </label>
-        <br>
+        </p>
       {% endif %}
-      {{ field }}
-    </p>
+    {% endwith %}
+
+    <div class="file-field">
+      <p>
+        <div class="btn">
+          <span>
+            {% trans "File" %}
+          </span>
+          <input class="file-chooser" id="{{ field.auto_id }}" name="{{ field.name }}" type="file">
+        </div>
+        <div class="file-path-wrapper">
+          <input class="file-path" type="text">
+        </div>
+      </p>
+      {% for error in field.errors %}
+        <p class="help-block materialize-red-text">
+          {{ error }}
+        </p>
+      {% endfor %}
+      {% if field.help_text %}
+        <p class="help-block">
+          {{ field.help_text|safe }}
+        </p>
+      {% endif %}
+    </div>
   </div>
 {% elif field|is_versatile_image_ppoi_click_widget %}
   <div class="input col file-field input-field {{ classes.label }}">