django-summernote image upload - django

I recently implemented django-summernote with my forms, which works well for text. However, I struggle to get exactly how image upload works. Does anyone have some input on how it is done?
Problem
When choosing an image from file with Summernote, the Insert Image button is deactivated (works fine for image links). I did not write a custom 'upload_to' function, but as I get it, this is already done in django-summernote.
Details
Installed django-summernote according to documentation.
Added summernote to urls and in INSTALLED_APPS
Added summernote to my form field
directions = forms.CharField(
widget=SummernoteInplaceWidget(attrs={'maxlength':'4000'}),
required=False,
)
Also added some config in SUMMERNOTE_CONFIG (settings.py)
SUMMERNOTE_CONFIG = {
'iframe': True,
'airMode': True,
'width': '100%',
'height': '300',
'toolbar': [
# ['style', ['style']],
['font', ['bold', 'italic', 'underline', 'superscript', 'subscript', 'strikethrough', 'clear']],
# ['fontname', ['fontname']],
['fontsize', ['fontsize']],
# ['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr']],
['view', ['fullscreen', 'codeview']],
['help', ['help']],
], }
Do I also have to write my own backend for attachments (images)? STATIC_URL and MEDIA_URL is defined in my settings.py, if that matters for this issue.
Update November 29th 2014:
When choosing an image, the following error is given in the console: "undefined is not a function", which is related to
imageInput.fileupload();
The "Insert Image" button is disabled.
As my project is in developing mode, I have DEBUG=True in my settings.
My urls look like:
urlpatterns += patterns('',
url(r'^summernote/', include('django_summernote.urls')),
) + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
and Media_root and Media_url are set to:
MEDIA_ROOT = path.join(path.dirname(__file__), 'media',)
MEDIA_URL = '/media/'
I use picture uploads outside django-summernote with these settings.
Feels like I am missing something, but canĀ“t see what.
Thanks in advance.

django-summernote shipped with backend support for image uploading out of box. So you don't have to write your own backend for it. MEDIA_ROOT or MEDIA_URL settings may have wrong value for uploading - permission problem or not valid path.
Run django project with runserver and please check the browser console(inspect) and python console after trying to upload an image.
And also refer Need a minimal Django file upload example for handling files on django project.

Related

Django turns absolute filepaths into relative, forcing the server to be run from the project folder

I'm trying to create a website where you can add images to models, which will then be in turn loaded on the homepage. However, I've noticed that when I run my server, it tries to get images from my /home folder.
Here's my models.py:
image_directory = join(settings.STATICFILES_DIRS[0], "website/images")
class Item(models.Model):
image = models.FilePathField(path=image_directory, recursive=True)
Here's my home.html (I'm just abbreviating it, item is passed in OK:
<img src="{{ item.image }}">
I run the migrations and run the server, and I'm able to select the image in /admin. The images look like: "sub_img_folder/img.jpg"
Then I go to /home and I get the following errors:
Not Found: /home/...absolute-path-to-project.../static/website/images/sub_img_folder/img.jpg
Not Found: /home/static/website/images/sub_img_folder/img.jpg
Any help would really be appreciated.
EDIT: Here's some of my settings.py contents.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
...
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
...
MEDIA_ROOT = os.path.join(BASE_DIR + "/static/website/")
MEDIA_URL = "images/"
EDIT 2: Just to clarify, the images you add to models are already on the server. You just need to clarify which image in the admin page, hence FilePathField instead of FileField. It somehow doesn't find the image when trying to load it on the home page but it successfully shows and selects in the admin page.
EDIT:
Since you are using a FilePathField, it only stores the path on disk, not the URL. The solution would be to use the MEDIA_URL in your template to formulate the URI string, something like this:
<img src="{{ MEDIA_URL }}/{{ FILE_NAME}}">
Where MEDIA_URL is your Media URL from settings.py and FILE_NAME is the name of the file itself.
It may be better to use an actual ImageField or FileField which stores all the information you need, or just have a CharField with the file name and build the URL like above.
PREVIOUS ANSWER:
Try adding the MEDIA elements to your Django settings.py. MEDIA_ROOT and MEDIA_URL tell Django how to handle user uploaded files:
In your settings.py:
MEDIA_ROOT = "/path/to/media/folder"
MEDIA_URL = '/media/'
In your urls.py:
urlpatterns = [
.......
] += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Documentation:
https://docs.djangoproject.com/en/3.0/ref/settings/#media-root

Django CKEditor 404 image not found

On my Django admin panel, I can upload an image using CKEditor. However, the image doesn't apear and it return a 404 not found on the image file path.
Actually, my image files are available on a dedicated url : media.mysite.com
But, CKEditor is trying to GET the file from mywebsite.com/media/uploads/..., so this is normal that I get a 404 error.
What is the good parameter to do for telling to CKEditor to use media.mysite.com to get any images ?
Settings.py
MEDIA_ROOT = "/var/www/media/mysite/"
MEDIA_URL = "/media/"
CKEDITOR_BASEPATH = "/static/ckeditor/ckeditor/"
CKEDITOR_JQUERY_URL = 'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'
CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'full',
'height': 300,
'width': '100%',
},
}
I visited many topics, but I found no answer. Thank you.
I solved my issue by adding an alias in my apache vhost :
Alias /media/ /var/www/media/
So, when CKEDITOR is trying to access on mywebsite.com/media/upload, it's redirected on a specific folder "/var/www/media/".
This is a good workaround

DRF: Uploading images in Django

I have a profile database for users in which I save their profile image.
I am using DRF to create API's for this.
Now when I save the profile data, it return JSON as:
{
"branch": "CSE",
"year": 2014,
"image": "static/profile_images/abhishek.jpg"
}
this data gets saved in database and even the image get uploaded to the desired folder. Now I want to access this image in the frontend(I am creating an android app in Ionic), so that the profile pic is viewed in the app's dashboard. How do I do it?
At present simply going to the saved path is not working.
I found the answer what I was looking. Actually in Django files can be partitioned into two:
Static files: those files used in the development, creation and rendering of the website or app. Things like
stylesheets, scripts, fonts etc.
Media files: those files that are uploaded during the normal usage of the website or application such as images, pdfs,
videos etc.
So to have upload functionality one needs to add the following in the settings.py
ENV_PATH = os.path.abspath(os.path.dirname(__file__))
MEDIA_ROOT = os.path.join(ENV_PATH, '<folder-name>')
MEDIA_URL = '/media/'
and in urls.py add:
urlpatterns = [
.......
your urls
.......
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

django-ckeditor formatting not in html post

I have an issue similar to this previous question : Django-ckeditor not displaying correctly in html
except that my settings seem to be ok but still not displaying in the html page. What am I missing?
settings.py
INSTALLED_APPS = [
'ckeditor',
'ckeditor_uploader',
]
CKEDITOR_CONFIGS = {
'awesome_ckeditor': {
'toolbar': 'full',
},
}
CKEDITOR_IMAGE_BACKEND = "pillow"
and in the html page rendering the edited post I have:
post_detail.html
<div class="post-content">{{post.text|safe|linebreaksbr}}</div>
Everything works fine on the admin side:
yet it is not displayed on the page:
It seems that the html was rendered properly and only missing css formatting to add for the html tags. I am leaving this post in case it could be useful for someone to check for such issue.

Django Admin: Path to file uploaded is wrong. Missing "static"?

I have a simple model and the default admin in django. Everything works as expected and I can upload files.
I've read the django docs regarding upload paths.
My MEDIA URL and MEDIA ROOT are set and the uploading works.
Lets say I login into the default admin, place an order with an uploaded jpg, the I go to edit the order and I see the current upload file.
If I hover the current file link, the complete url is some.url.com/uploads/myfile.jpg, when it should be some.url.com/static/uploads/myfile.jpg ???
My MEDIA URL is set at some.url.com/static/ and MEDIA ROOT at the absolute path to "static".
Since the upload works fine and goes where it should, maybe something is missing...
I'd like to be able to, inside default django admin, go to order edit, hover the current uploaded file, click it and it would open in a new window, Obviously, currently it goes 404...
The relevant part from the model:
ficheiro = models.FileField(upload_to='uploads')
Heres a screenshot:
screenshot http://anibalcascais.com/exemplo.jpg
Thank You
# Django settings for ensanis project.
import os.path
DEBUG = False
TEMPLATE_DEBUG = DEBUG
ADMINS = (
# ('Anibal Santos', 'anibalcascais#gmail.com'),
)
MANAGERS = ADMINS
# Local time zone for this installation. Choices can be found here:
# http://en.wikipedia.org/wiki/List_of_tz_zones_by_name
# although not all choices may be available on all operating systems.
# If running in a Windows environment this must be set to the same as your
# system time zone.
TIME_ZONE = 'Europe/Lisbon'
# Language code for this installation. All choices can be found here:
# http://www.i18nguy.com/unicode/language-identifiers.html
LANGUAGE_CODE = 'pt_PT'
SITE_ID = 1
# If you set this to False, Django will make some optimizations so as not
# to load the internationalization machinery.
USE_I18N = True
# Absolute path to the directory that holds media.
# Example: "/home/media/media.lawrence.com/"
MEDIA_ROOT = '/home/anibal/sites/ensanis/static/'
# URL that handles the media served from MEDIA_ROOT. Make sure to use a
# trailing slash if there is a path component (optional in other cases).
# Examples: "http://media.lawrence.com", "http://example.com/media/"
MEDIA_URL = 'http://cl10.anibalcascais.com/static/'
# URL prefix for admin media -- CSS, JavaScript and images. Make sure to use a
# trailing slash.
# Examples: "http://foo.com/media/", "/media/".
ADMIN_MEDIA_PREFIX = 'http://cl10.anibalcascais.com/media/'
# List of callables that know how to import templates from various sources.
TEMPLATE_LOADERS = (
'django.template.loaders.filesystem.load_template_source',
'django.template.loaders.app_directories.load_template_source',
# 'django.template.loaders.eggs.load_template_source',
)
MIDDLEWARE_CLASSES = (
'django.middleware.common.CommonMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.contrib.auth.middleware.AuthenticationMiddleware',
)
ROOT_URLCONF = 'ensanis.urls'
TEMPLATE_DIRS = (
'templates',
)
INSTALLED_APPS = (
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.sites',
'ensanis.encomendas',
'django.contrib.admin',
'ensanis.django_evolution',
)
ok, I'm sorry to bother you all, but it turns out it was something obvious:
I've restarted fcgi and the paths are now correct. (duhhh!)
Sorry all for your trouble :)