Image upload and images sidebar form work

2 files changed, 42 insertions, 32 deletions

diff --git a/pydis_site/templates/wiki/forms/fields/image.html b/pydis_site/templates/wiki/forms/fields/image.html
index 8591f547..afef6889 100644
--- a/pydis_site/templates/wiki/forms/fields/image.html
+++ b/pydis_site/templates/wiki/forms/fields/image.html
@@ -18,7 +18,27 @@
   <div class="field-body">
     <div class="field">
       <div class="control">
-        {{ field }}
+        <div class="file has-name is-fullwidth">
+          <label class="file-label">
+            <input class="file-input"
+                   type="file"
+                   id="{{ field.auto_id }}"
+                   name="{{ field.name }}"
+                   accept="image/*"
+
+                   {% if field.required %}required{% endif %}
+            />
+          <span class="file-cta">
+            <span class="file-icon">
+              <i class="fas fa-image"></i>
+            </span>
+            <span class="file-label">
+              Upload
+            </span>
+          </span>
+          <span class="file-name"></span>
+          </label>
+        </div>
       </div>
 
     {% if field.errors %}
diff --git a/pydis_site/templates/wiki/plugins/images/sidebar.html b/pydis_site/templates/wiki/plugins/images/sidebar.html
index d25fe48e..d206cbaf 100644
--- a/pydis_site/templates/wiki/plugins/images/sidebar.html
+++ b/pydis_site/templates/wiki/plugins/images/sidebar.html
@@ -41,37 +41,27 @@ function add_image(form) {
   #image-list tr:first-child td {border:0;}
 </style>
 
-  <h4>Add image</h4>
-
-  {% if article|images_can_add:user %}
-    {% include "wiki/includes/formerrors.html" %}
-
-    {# Include the hidden fields #}
-    {% for hidden in form.hidden_fields %}
-      {{ hidden }}
-    {% endfor %}
-
-    <p>
-    {% for field in form.visible_fields %}
-      {% include "wiki/includes/formfield.html" with render_labels=False %}
-    {% endfor %}
-
-    <p>
-      <button type="button" onClick="add_image(this.form)" name="{{ plugin.slug }}_save" value="1" class="button is-primary">
-        <span class="icon">
-          <i class="fas fa-upload"></i>
-        </span>
-        <span>Upload</span>
-      </button>
-    </p>
-  {% else %}
-
-    {% if user.is_anonymous %}
-      {% include "wiki/includes/anonymous_blocked.html" %}
-    {% else %}
-      <p><em>{% trans "You do not have permissions to add images." %}</em></p>
-    {% endif %}
-  {% endif %}
+{% if article|images_can_add:user %}
+  {% include "wiki/includes/formerrors.html" %}
+
+  {# Include the hidden fields #}
+  {% for hidden in form.hidden_fields %}
+    {{ hidden }}
+  {% endfor %}
+
+  {% for field in form.visible_fields %}
+    {% include "wiki/includes/formfield.html" with render_labels=False %}
+  {% endfor %}
+
+  <button type="button" onClick="add_image(this.form)" name="{{ plugin.slug }}_save" value="1" class="button is-primary is-fullwidth">
+    <span class="icon">
+      <i class="fas fa-save"></i>
+    </span>
+    <span>Save</span>
+  </button>
+{% endif %}
+
+<div class="is-divider"></div>
 
 <div style="max-height: 300px; overflow: auto;">
   <table class="table table-responsive table-bordered" id="image-list">