# HG changeset patch
# User neko259 <neko259@gmail.com>
# Date 2014-05-05 14:16:20
# Node ID 7eec232c95607808e20dea693d5a88689335d59a
# Parent  299bac5df7fb960b32f733d9a64b4ccda83846d2

Added image preview in the forms

diff --git a/boards/static/css/base.css b/boards/static/css/base.css
--- a/boards/static/css/base.css
+++ b/boards/static/css/base.css
@@ -36,3 +36,26 @@
         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;
+}
diff --git a/boards/static/js/form.js b/boards/static/js/form.js
new file mode 100644
--- /dev/null
+++ b/boards/static/js/form.js
@@ -0,0 +1,22 @@
+$('#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);
+    }
+});
diff --git a/boards/static/js/thread_update.js b/boards/static/js/thread_update.js
--- a/boards/static/js/thread_update.js
+++ b/boards/static/js/thread_update.js
@@ -217,6 +217,7 @@ 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();
 }
 
 
diff --git a/boards/templates/boards/posting_general.html b/boards/templates/boards/posting_general.html
--- a/boards/templates/boards/posting_general.html
+++ b/boards/templates/boards/posting_general.html
@@ -144,6 +144,8 @@
         </div>
     </div>
 
+    <script src="{% static 'js/form.js' %}"></script>
+
 {% endblock %}
 
 {% block metapanel %}
diff --git a/boards/templates/boards/thread.html b/boards/templates/boards/thread.html
--- a/boards/templates/boards/thread.html
+++ b/boards/templates/boards/thread.html
@@ -67,6 +67,7 @@
     <script src="{% static 'js/thread_update.js' %}"></script>
     {% endif %}
 
+    <script src="{% static 'js/form.js' %}"></script>
     <script src="{% static 'js/thread.js' %}"></script>
 
     {% endcache %}