Search code examples
jqueryajaxdjangodjango-formsdjango-imagekit

django - any image upload and display method using Ajax?


On my django application I'm using ImageKit to resize a image loaded to the server.

models.py

class Pictures(ImageModel):
    user = models.ForeignKey(User)
    original_image = models.ImageField(upload_to='userpx')

    class IKOptions:
        # This inner class is where we define the ImageKit options for the model
        spec_module = 'userprofile.specs'
        cache_dir = 'modpics'
        image_field = 'original_image'
        save_count_as = 'num_views'
    def __unicode__(self):
        return u'%s' % (self.original_image)

forms.py

class PicturesForm(forms.Form): 
   image = forms.ImageField()

template.html

<img src="{{ p.thumbnail_image.url }}" >

<form action="" method="POST" class="cmxform" enctype="multipart/form-data">
{% csrf_token %}
{{aform.as_p}}
<input type="submit" value="submit" name="picture_button" />        
</form>

views.py

   if 'picture_button' in request.POST:
        aform = PicturesForm(request.POST, request.FILES)
        if aform.is_valid():
            # an UploadedFile object
            a_user = User.objects.get(id=request.user.id)

            #Check if image entry exists 
            try:
                p = Pictures.objects.get(user=request.user.id)

            except Pictures.DoesNotExist: 
                picture = Pictures.objects.create(user = a_user)
                image_file = request.FILES['image']
                picture.original_image.save(image_file.name, image_file)

                #show picture and form
                p = Pictures.objects.get(user=request.user.id)
                aform = PicturesForm()

            else:
                p.delete()
                picture = Pictures.objects.create(user = a_user)
                image_file = request.FILES['image']
                picture.original_image.save(image_file.name, image_file)

                #show image and form
                p = Pictures.objects.get(user=request.user.id)
                aform = PicturesForm()


    else:
        p = Pictures.objects.get(user=request.user.id)
        aform = PicturesForm()

Using some Ajax method how can I eliminate the submit button in the template.html so when the user selects the image from his/her machine, the image automatically gets uploaded to the server and then displayed back to the server?

I appreciate your help!


Solution

  • I would probably use:

    http://jquery.malsup.com/form/

    submit the form with ajax and then load the image into the dom with the success callback.