Added image preview in the forms

boards/static/js/form.js

@@ -0,0 +1,22 b''
+$('#id_image').parent().append(
+    $('<div/>', {
+        id: 'file_wrap'
+    }).append($('#id_image'))
+);
+
+$('body').on('change', '#id_image', function(event) {
+    var file = event.target.files[0];
+
+    if(file.type.match('image.*')) {
+        var fileReader = new FileReader();
+
+        fileReader.addEventListener("load", function(event) {
+            $('#file_wrap').find('#file-thumb').remove();
+            $('#file_wrap').append(
+                $('<div id="file-thumb" style="background-image: url('+event.target.result+')"></div>')
+            );
+        });
+
+        fileReader.readAsDataURL(file);
+    }
+});

boards/static/css/base.css

@@ -36,3 +36,26 b''
         display: none;
     }
 }
+
+#id_image {
+     display: block;
+     width: 100px;
+     height: 100px;
+     cursor: pointer;
+     position: absolute;
+     opacity: 0;
+     z-index: 1;
+}
+
+#file_wrap {
+     width: 100px;
+     height: 100px;
+     border: solid 1px white;
+}
+
+#file-thumb {
+    width: 100px;
+    height: 100px;
+    background-size: cover;
+    background-position: center;
+}

boards/static/js/thread_update.js

@@ -217,6 +217,7 b' function resetForm(form) {'
     form.find('input:text, input:password, input:file, select, textarea').val('');
     form.find('input:radio, input:checkbox')
              .removeAttr('checked').removeAttr('selected');
+    $('#file_wrap').find('#file-thumb').remove();
 }
 
 

boards/templates/boards/posting_general.html

@@ -144,6 +144,8 b''
         </div>
     </div>
 
+    <script src="{% static 'js/form.js' %}"></script>
+
 {% endblock %}
 
 {% block metapanel %}

boards/templates/boards/thread.html

@@ -67,6 +67,7 b''
     <script src="{% static 'js/thread_update.js' %}"></script>
     {% endif %}
 
+    <script src="{% static 'js/form.js' %}"></script>
     <script src="{% static 'js/thread.js' %}"></script>
 
     {% endcache %}