Question

I’m using Django and am trying to implement, what I would assume, is a fairly common feature in image uploads. I want to generate a formset (maybe modelformset?) for adding a caption to each Image that a user has just uploaded (similar to a “review the images you just uploaded” page).

This is the basic idea:

I have a simple form for submitting one or more images at once:

class UploadImageForm(forms.Form):
    images = forms.FileField(widget=forms.ClearableFileInput(attrs={'multiple': 'multiple'}))

It produces this:

Then, in the view, I do some handling/processing for each image from the POST, and store a resized version of the image as an instance of a model, called ImageItem:

class ImageItem(models.Model):
    resized_img = models.ImageField(upload_to=img_get_file_path)
    user = models.ForeignKey(User)
    upload_date = models.DateTimeField(auto_now_add=True)
    last_modified = models.DateTimeField(auto_now=True)      
    caption = models.CharField(max_length=1000,
                               blank=True)

(Here is the UploadImage view, for reference…notice that as soon as the form is validated and the images have been saved in the handle_uploaded_image function, it redirects to a view for adding a caption to all the images.)

def UploadImageToLibrary(request):
    if request.method == 'POST':
        form = UploadImageForm(request.POST, request.FILES)
        if form.is_valid():
            handle_uploaded_image(form) # creates new sizes of images, saves resized version as ImageItem instances
            return AddInfoForImage(request) # SEND USER TO A PAGE FOR ADDING CAPTIONS TO EACH IMAGE...not sure what this next view should contain...?
    else:
        form = UploadImageForm()
    return render_to_response('upload_item.html', {'form': form}, context_instance=RequestContext(request))

---

Okay, now comes the part I need help with….

As soon as the images save, I want the next view to generate a form for each image that has been uploaded, so that users can add a caption to the image. When they’re done adding all the information to all the new images, they hit submit, and each caption is saved to the appropriate ImageItem instance. I don’t know how many forms should be created, that depends on how many images the user uploaded. Below is a visual representation of what I want the formset to do (ignore the other stuff, we can continue using a simple caption as an example):

---

Specifically, this is the stuff I need help with:

• I don’t know how to supply the appropriate amount of CaptionForms, based on how many images the user just uploaded.
• I don’t know how to place the appropriate ImageItem.resized_img to the left of the form that it’s referencing in the template.
• I don’t know how to make sure that once the CaptionForms are submitted, that I save the captions to the appropriate ImageItem instance.

I would imagine all three of these points can somehow be addressed in one formset or modelformset solution?

---

Like I said, this seems like a very common situation. If anyone knows of any existing code that does this, please let me know. Thanks!

Answer 1

I think you need to use model formsets and to access resized image in template {{ form.instance.resized_img }}