Getting file uploads to work with Django & Cloudinary - django

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?

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.

Related

WebKitGtk doesn't load local files

I've tried loading a local html file using webkit_web_view_load_uri() with a file:// URL. However, the webview would display a blank page. To circumvent this, I tried using webkit_web_view_load_html() and it worked correctly.
Now that I'm trying to load some images in the html using the <img> tag, the images aren't loaded (It displays a blank page).
I'm puzzled because I tried before (~ 2 months ago) a similar method and it worked.
Note: I copied the contents of the generated HTML into a file and loaded it with Firefox and it worked as it should (The images are visible), but with another WebKitGtk application I had lying around the images didn't load.
Note: I'm using C++ as the main programming language (I'd prefer having C++ types in the solutions only if possible)
Note: I have set webkit_settings_set_allow_file_access_from_file_urls() and webkit_settings_set_allow_universal_access_from_file_urls() to TRUE
Ok, I've managed to solve this. The solution had NOTHING to do with webkitgtk, which is strange. It seems that the application was trying to download the page instead of loading it. This traces to a faulty MIME type database.
Tl;Dr:
Execute this:
rm ~/.local/share/mime/packages/user-extension-html.xml
update-mime-database ~/.local/share/mime
and use webkit_web_view_load_uri() instead of webkit_web_view_load_html() with a file:// URI
I had the same problem in C. You have to explicitly set file:// as base_uri when you call webkit_web_view_load_html().
See also answer here

How to use filepond with Django

As the title suggest.
I have searched Google and stackoverflow, so far I don't find any tutorial that doesn't involve (https://github.com/ImperialCollegeLondon/django-drf-filepond).
While this library seems maintain, at 68 stars, too much risk and I prefer to do without it.
What I tried
When you use filepond input tag with class file-uploader file-uploader-grid, in browser, it will compile and generate a div tag.
The issue is that the id in input will be generated under the div instead of input tag.
Without that id, when the form is submitted, self.request.FILES will be empty dictionary.
So I tried writing a JavaScript to add id to input tag, which don't work unfortunately.
Anyone successfully do it in Django without additional library? Thanks
The input generated is only there to catch files, the actual data is either stored in hidden input fields (if you use server property) or encoded in those fields (if you use file encode plugin).
You can set storeAsFile to true to have FilePond update the fileList property of a file field. But that doesn't work on older versions of iOS, see link in property description:
https://pqina.nl/filepond/docs/api/instance/properties/

django - ckeditor bug renders text/string in raw html format

am using django ckeditor. Any text/content entered into its editor renders raw html output on the webpage.
for ex: this is rendered output of ckeditor field (RichTextField) on a webpage;
<p><span style="color:rgb(0, 0, 0)">this is a test file ’s forces durin</span><span style="color:rgb(0, 0, 0)">galla’s good test is one that fails Thereafter, never to fail in real environment. </span></p>
I have been looking for a solution for a long time now but unable to find one :( There are some questions which are similar but none of those have been able to help. It will be helpful if any changes suggested are provided with the exact location where it needs to be changed. Needless to say I am a newbie.
Thanks
You need to mark the relevant variable that contains the html snippet in your template as safe
Obviously you should be sure, that the text comes from trusted users and is safe, because with the safe filter you are disabling a security feature (autoescaping) that Django applies per default.
If your ckeditor is part of a comment form and your mark the entered text as safe, anybody with access to the form could inject Javascipt and other (potentially nasty) stuff in your page.
The whole story is explained pretty well in the official docs: https://docs.djangoproject.com/en/dev/topics/templates/#automatic-html-escaping

linking to cfml code ala jsfiddle

ok so i'm working on a new version of cflive.net and one of the features is to link to code.
I am using jsfiddle.net as my inspiration for the new site.
Now with jsfiddle all the code runs in the client, so it is not a problem for other people to edit it.
But with CFML obviously the files need to be saved on the server first, which means the original file would get overwritten if anyone makes any changes, which is obviously going to be problematic as the original author may not want his files to get edited, so I am looking for some feedback/suggestions on what would be the best way to handle this.
My best idea so far is.
All files are stored in a unique folder using a JsessionID
e.g. anonymous files
/jsessionid/filename.cfm
or user files
/user/jsessionid/filename.cfm
the original author marks the files as editable or not. You must register and be logged in to have this control.
Files created anonymously (not logged in) can be edited as default.
If the file is editable then it can be edited, otherwise it gets duplicated for each new session.
Anonymous sessions get deleted if they have not been access for 90 days.
thoughts?

Django and tinymcs: getting list of image files using external_image_list_url

I am trying to get external_image_list_url to work with tinymcs and Django. My understanding is that the user will be able to see a list of his or her images when clicking on the image icon (the one with the tree). From here an image can be selected and inserted.
Am I right that it is the icon with the tree? It's the one called "image". The one called "insertimage" doesn't work at all - the icon is not displayed. It and insertfile are the only ones that aren't displayed. I'm Ok with that unless I need it for this list functionality.
First I am trying just to get any image to appear in a list. I have done the following:
Created myexternallist.js and placed it where I keep my other JS files. I can access these other files via src = "/media/js/filename.js" because of my django settings. But is this also what I should put for:
tinyMCE.init({
external_image_list_url : "/media/js/myexternallist.js",
... })
In this file it says:
var tinyMCEImageList = new Array(["Logo 1", "/media/js/photo.jpg"],);
photo.jpg is in the same folder as myexternallist.js
I have also tried just "photo.jpg" and various other combinations. Not sure if my issue has to do with my relative paths or something else altogether. I'm not sure what an absolute path should be. Right now I'm working on localhost, but won't always be.
Solved it, argh. The issue was the comma near the end of the line "var tinyMCEImageList =..."
Now it works fine with the relative urls starting with /media
The clue was given by Firebug Console, which showed me the js error. I just happened to click there, but will be using that a lot from now on!