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( + $('
', { + 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( + $('
') + ); + }); + + 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 @@
+ + {% 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 @@ {% endif %} + {% endcache %}