var isCompact = false; $('input[name=image]').wrap($('
')); $('body').on('change', 'input[name=image]', function(event) { var file = event.target.files[0]; if(file.type.match('image.*')) { var fileReader = new FileReader(); fileReader.addEventListener("load", function(event) { var wrapper = $('.file_wrap'); wrapper.find('.file-thumb').remove(); wrapper.append( $('
') ); }); fileReader.readAsDataURL(file); } }); var fullForm = $('.swappable-form-full'); function swapForm() { if (isCompact) { // TODO Use IDs (change the django form code) instead of absolute numbers fullForm.find('textarea').appendTo(fullForm.find('.form-row')[4]); fullForm.find('.file_wrap').appendTo(fullForm.find('.form-row')[7]); fullForm.find('.form-row').show(); } else { fullForm.find('textarea').appendTo($('.compact-form-text')); fullForm.find('.file_wrap').insertBefore($('.compact-form-text')); fullForm.find('.form-row').hide(); fullForm.find('input[type=text]').val(''); } isCompact = !isCompact; scrollToBottom(); } $(document).ready(function() { swapForm(); })