From 0455c6d25f9a8eb0e25acac5ee79a269d9a2715b Mon Sep 17 00:00:00 2001
From: Jason McBrayer <jmcbray@carcosa.net>
Date: Wed, 9 May 2018 14:44:45 -0400
Subject: [PATCH] Add javascript to pretty version of media upload

---
 brutaldon/templates/main/post_partial.html | 31 +++++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/brutaldon/templates/main/post_partial.html b/brutaldon/templates/main/post_partial.html
index 3dc5243..eacb180 100644
--- a/brutaldon/templates/main/post_partial.html
+++ b/brutaldon/templates/main/post_partial.html
@@ -34,15 +34,27 @@
     </div>
 
     <div class="field">
-        <label class="label"> {{ form.media_file_1.label }}</label>
-        <div class="content">
-            {% render_field form.media_file_1 %}
+        <div class="file has-name">
+            <label class="file-label">
+                {% render_field form.media_file_1 class+="file-input" %}
+                <span class="file-cta">
+                    <span class="file-icon">
+                        <i class="fa fa-upload"></i>
+                    </span>
+                    <span class="file-label">
+                        {{ form.media_file_1.label }}
+                    </span>
+                </span>
+                <span class="file-name"  id="media_filename_1">
+                </span>
+            </label>
         </div>
         <div class="control">
             {% render_field form.media_text_1 class+="input" placeholder="Describe attachment" %}
         </div>
     </div>
 
+
     <div>
         {{ form.errors }}
     </div>
@@ -53,4 +65,15 @@
                    name="toot" value="Toot">
         </div>
     </div>
-</form>
+        </form>
+
+<script type="application/javascript">
+var file = document.getElementById("id_media_file_1");
+file.onchange = function(){
+    if(file.files.length > 0)
+    {
+        document.getElementById('media_filename_1').innerHTML =  file.files[0].name;
+    }
+};
+
+</script>