python - Django Image Upload Javascript Preview in CreateView Form -

i using django createview upload user-submitted images. image upload works well. however, want user able preview image before submitting. javascript shows image preview not work.

the code looks me. , think should work. doesn't. hoping fresh set of eyes can see missing.

models.py

class image(models.model):     user = models.foreignkey(user,                                 related_name='images_created')     title = models.charfield(max_length=200)     slug = models.slugfield(max_length=200,                             blank=true)     url = models.urlfield()     image = models.imagefield(upload_to='images/%y/%m/%d')     description = models.charfield(max_length=255,                                     blank=true,                                     default='')     created = models.datefield(auto_now_add=true,                                 db_index=true)     users_like = models.manytomanyfield(user,                                         related_name='images_liked',                                         blank=true)      def save(self, *args, **kwargs):         if not self.slug:             self.slug = slugify(self.title)             super(image, self).save(*args, **kwargs)      def get_absolute_url(self):         return reverse('images:detail', kwargs={'slug': self.slug})      def __str__(self):         return self.title 

views.py

class createusersubmittedimageview(loginrequiredmixin, createview):     model = image     form_class = usersubmittedimageform     template_name = 'images/image_form.html'      def form_valid(self, form):         cd = form.cleaned_data         image = form.save(commit=false)         image.user = self.request.user         image = cd['image']          return super(createusersubmittedimageview, self).form_valid(form) 

forms.py

class usersubmittedimageform(forms.modelform):     class meta:         model = image         fields = ('image', 'title', 'description')         widgets = {             'title': forms.textinput(attrs={'placeholder':                                     'what want call image?'}),             'description': forms.textinput(attrs={'placeholder':                                     'enter description here'}),             'image': forms.fileinput(attrs={'id': 'uploadimage',                                             'name': 'myphoto',                                             'onchange': 'previewimage',                                             }),           } 

template.html

<div class="row">             <div class="medium-4 columns">               <form method="post" action="" enctype="multipart/form-data">                 {% csrf_token %}                  {{ form.as_p }}                 <input type="submit" class="submit" value="add image">                 <script type="text/javascript">                   function previewimage() {                     var ofreader = new filereader();                     ofreader.readasdataurl(document.getelementbyid("uploadimage").files[0]);                     ofreader.onload = function (ofrevent) {                       document.getelementbyid("uploadpreview").src = ofrevent.target.result;                     };                   };                  </script>               </form>             </div>             <div class="medium-8 columns">               <img id="uploadpreview" />             </div>