Frontend image upload using photologue

Dec. 5, 2010, 5:59 p.m.

Lately I've been searching for a way to allow user image upload via frontend on a django - driven website using photologue. If you're running a Website using Django you might know Photologue and all it's great capabilities for managing images and galleries. But when it comes to image upload for users via frontend I didn't find some kind of easy How-to (only a few forum posts), so i decided to post what i've found out:

I wanted the user to be able to upload zipped image galleries, so I needed to provide a way to make Photologue's GalleryUpload model accessible via frontend. This can easily be achieved using Django's generic views, especially the django.views.generic.create_update module contains a set of functions for creating, editing and deleting objects. Mainly django.views.generic.create_update.create_object does all the work for you, so you don't need to write your own forms.

Sadly the documentation here lacks simple examples, so you have to do your own researches. Starting with urls.py you can do the following, to use this view:

from photologue.models import GalleryUpload
upload_args = dict(model=GalleryUpload, \
    post_save_redirect="/photologue/gallery", \
    login_required=True)

urlpatterns += patterns('django.views.generic.create_update', \
    url(r'^photo-upload/$', 'create_object', upload_args ),)

The first line tells urls.py about photologue's GalleryUpload model and after that we define a dictionary that will be used by django.views.generic.create_update create_object function. By setting login_required=True we make this url only usable for logged in users and the post_save_redirect tells Django where to go after the upload has finished (in this case photologue's gallery view, to show the user, what he has done). The third line finally creates a url named /photo-upload under which the create_object view will be found.

Now you're nearly done, the only thing left is to define a template (by assuming django's default naming scheme, this has to be located under templates/photologue and must be named galleryupload_form.html):

{% extends "photologue/root.html" %}

{% block content %}
    <form action="" method="post" enctype="multipart/form-data">
        {{ form.as_p }}
    <input type="submit" value="Submit" />
    </form>
{% endblock  %}

form.as_p will output the form with each form field and accompanying label wrapped in a paragraph and display all model fields. The enctype="multipart/form-data" is important, if you're missing it, the validation mechanism of the create_object view will fail.

Basically that's it, start your development server, log in to your website, visit /photo-upload and you should see a GalleryUpload form without visiting the backend.

tags: django frontend photologue upload

read more