Ajax image upload in Django using Django-imagekit

Question

I've been trying to get my head around uploading image files in Django. There are several tutorials that I have followed and they do help a bit, for example this one and the one here.

While they do give a basic idea of what is happening/how to think about it, I am not yet able transfer that to ImageKit implementation of ProcessedImageField.

My problem is the following: I have several ProcessedImageFields. To upload new pictures, I use a form with a slightly modified ClearableFileIput widget, which displays a thumbnail above the standard 'Choose file' button. This works absolutely fine, the user is able to select a couple of files(one for each field), upload them all at once when the form is saved. I use S3 for storing data using django-storages.

I would like to be able to add an ajax upload functionality on those so that image processing could be delegated away from the form saving. When the user chooses the image, it should be uploaded and its updated once the file is processed. Then changes to the model should only be preserved if the user actually saves the form, otherwise new files should be discarded.

Any ideas where to start looking? Perhaps there are projects that use Django-Imagekit that use one of the existing django ajax libraries?

Answer 1

ProcessedImageFields are really just normal Django ImageFields that perform the image processing (synchronously) before saving the image, and Django ImageFields are really just specialized FileFields. So, if you're using ProcessedImageFields, there's nothing different than normal form file handling; any non-Django specific tutorial about AJAX uploads should apply equally.

As far as processing the image asynchronously, there are two approaches you could take.

The first is to do one form submission with the image and return an id for that image which could be sent with a second submission for the rest of the form. In this case, the processing of the image is done synchronously on the server side, but the user can do other thing with your app while it happens. This makes the final submission shorter because the file has already been sent, but the image processing still needs to complete before the form is successfully saved. You might try looking at jQuery-File-Upload's Django examples, though I'm not sure how good or relevant they are.

If, on the other hand, you want to actually do the image processing asynchronously on the server, it's a little more complicated. One approach would be to have two image separate fields on your model—one for the raw image and one for the current, processed image. In the view that handles the form submission, you'd save the raw image in the model and kick off an asynchronous task (using Celery or something similar) that processes the raw image and then saves it to the other field.

As for the discarding of new files, you'll probably have to do that in a cleanup script that runs periodically. (What you're asking is that the image be preserved on the server, but then discarded when it's not saved, but the server can never be reliably notified of the form not being saved.)