Getting file uploads to work with Django & Cloudinary

Question

I am trying to use Cloudinary as a CDN and am having some trouble getting file uploads to work properly. I have followed their blog posts and website, but am running into a consistent and very annoying error.

I have a model associated with both an image (a cover photo) and a media object (a PDF or ebook, like a .mobi or .epub). I have a model form set up to create an object:

class NewMediaObjectForm(forms.ModelForm):

    class Meta:
        model = MediaObject
        fields = ('cover_photo', ...)
        cover_photo = CloudinaryJsFileField(options={'tags': 'cover_photo'})

Now, I've read this tutorial from Cloudinary and I know that their form looks like this:

class NewMediaObjectForm(forms.ModelForm):

    class Meta:
        model = MediaObject
        fields = ('cover_photo', ...)
    cover_photo = CloudinaryJsFileField(options={'tags': 'cover_photo'})

Here's my problem: if I match their level of indention, the generated HTML shows that the input field is getting all of the right Cloudinary stuff attached to it - but the upload itself doesn't work. The page simply refreshes with an error message stating that no image was selected. Importantly, I can see from the generated HTML that the tags I've specified are coming through.

If I use method #1, with my indention, the file uploads to Cloudinary but none of my tags are applied. It also treats everything as an image, giving me a "invalid image file" error when trying to upload anything other than images (such as the ebook files I mentioned earlier).

I want both - how can I get this upload field to work AND get it to respect the options I'm trying to define?

(I do have cloudinary.config called in the appropriate views; I do have cloudinary_includes and cloudinary_js_config in the appropriate templates; I've imported everything and am calling cl_init_js_callbacks on the form in the view.)

One more addition - I am running this on a local machine using manage.py's runserver rather than deploying, if that has any impact on the configuration.

UPDATE: I found something I was doing wrong. I've fixed it and made things worse.

The necessary jQuery was not being loaded. Now I am loading it, but the upload button simply doesn't function. I press the button, I select the file, the select dialog disappears, and it shows that no file has been selected. However, I can see that the tags are being passed to the generated HTML, so it's a step in the right direction. Any ideas?

Note that the first method is effectively the same as not declaring a field - Django will automatically generate the field it is not present in the form itself. Fields in the Meta class are fully ignored. Something is different between your declared field and the auto-generated field that breaks the upload. — knbk
The cover_photo field is declared on the model as CloudinaryField('cover_photo') - I've also tried it as a plain CloudinaryField with the same result. — souldeux

souldeux souldeux · Accepted Answer · 2014-07-24T02:16:04

Please forgive me. This was a PEBCAK issue; I will leave this visible for anyone else who may make the same mistakes I've made in the future.

Make sure the proper jQuery scripts are being loaded - open the Chrome developer console, Firebug, whatever and double check. Then, make sure they're being loaded after the DOM so that there are elements for the script to attach to.
Cloudinary will expect html/cloudinary_cors.htmlto be accessible in your static directory.
Either I have broken something, or the default behavior for this particular type of ModelField is to simply IMMEDIATELY upload the selected file and continue displaying "No File Chosen." I thought that nothing was happening and was very surprised when I saw 50+ images successfully uploaded.

Getting file uploads to work with Django & Cloudinary

1 Answers