From 7659e2da9c2a7c91560ff3b2d6b291687e7c2312 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mart=C3=ADn=20Josemar=C3=ADa?= <martin.vuelta@gmail.com>
Date: Sat, 20 Apr 2019 16:27:25 -0500
Subject: [PATCH] Styled file field with materializecss template filter

---
 templates/materializecssform/field.html | 67 +++++++++++++++++++++----
 1 file changed, 57 insertions(+), 10 deletions(-)

diff --git a/templates/materializecssform/field.html b/templates/materializecssform/field.html
index 2c01f0cd490..1695498a3a7 100644
--- 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 }}">