How do I attach image files in Django-summernote? - django

So I have this Django application with django-summernote, and I'm having trouble uploading image files via the editor. When I click the upload button and choose an image from my computer, I get an error saying "Failed to save attachment". And in the console, I see this error: "POST /summernote/upload_attachment/ 500". Let me show you my code. settings.py
INSTALLED_APPS = [
...
'django_summernote',
...
]
...
DEBUG = True
...
SUMMERNOTE_CONFIG = {
'iframe': True,
'lang' : 'ko-KR',
'summernote': {
'width': '100%',
'height': '450px',
'placeholder':'First sentence',
'toolbar': [
['style', ['style',]],
['font', ['fontsize', 'bold', 'italic', 'strikethrough']],
['color', ['forecolor', ]],
['para', ['ul', 'ol', 'height']],
['insert', ['link']],
['misc', ['picture', 'fullscreen', 'print', 'help', ]],
],
},
'js': (
'static/summernote-ext-print.js',
),
'js_for_inplace': (
'/static/summernote-ext-print.js',
),
'css': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
'/mvp/static/summernote.css',
),
'css_for_inplace': (
'//cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/theme/base16-dark.min.css',
'/summernote.css',
),
'codemirror': {
'theme': 'base16-dark',
'mode': 'htmlmixed',
'lineNumbers': 'true',
},
'lazy': False,
}
SUMMERNOTE_THEME = 'bs4'
X_FRAME_OPTIONS = 'SAMEORIGIN'
...
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
urls.py
urlpatterns = [
path('summernote/', include('django_summernote.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
I don't see what I've done wrong. Everything else except uploading image works fine. BTW, I'm using Django 3.x and Bootstrap 4.x.
+++ If it gives you any further info: I also keep getting these errors in the console as well. Might be related?
Refused to apply style from '<myURL>/summernote.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Failed to load resource: the server responded with a status of 404 () ... summernote-ext-print.js Failed to load resource: the server responded with a status of 500 () .../summernote/upload_attachment/
This has been making me so frustrated for days. I'd very much appreciate your help. :)

Related

Django localhost refusing connection from another django localhost

I have two django applications, currently running on localhost. I plan to have them on two separate servers, but for now, they are running on my machine.
App A is running on :8000
App B is running on :8010
When I try to make a request from A to B by using:
import requests
requests.post('http://0.0.0.0:8010/api/plan', data=post_data)
I get a connection error:
urllib3.exceptions.MaxRetryError: HTTPConnectionPool(host='0.0.0.0', port=8010): Max retries exceeded with url: /api/plan (Caused by NewConnectionError('<urllib3.connection.HTTPConnection object at 0x7f82fed36630>: Failed to establish a new connection: [Errno 111] Connection refused',))
In my B app I have ALLOWED_HOSTS = ['*']
Anyone has any idea what am I missing?
You should add cors-headers to your projects settings.py
For example:
INSTALLED_APPS = [
"corsheaders",
# ...
]
MIDDLEWARE = [
"corsheaders.middleware.CorsMiddleware",
# ...
]
CORS_ALLOW_ALL_ORIGINS = True
CORS_ALLOW_ALL_METHODS = [
"GET", "POST" # add allowed methods here
]
CORS_URLS_REGEX = r"^/api/.*$"
CORS_ALLOW_HEADERS = [
"accept",
"accept-encoding",
"authorization",
"content-type",
"dnt",
"origin",
"user-agent",
"x-csrftoken",
"x-requested-with",
]

React And Django Deployment on heroku

I am badly stuck in deployement, I am trying to deploy the react django together on heroku,the problem is react app is not loading when i hit url it shows blank page and I can't get what the problem is it might be of build directory,where I think the path is not correct when made initial build "npm run build".Here's my below try:
Settings.py
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'build')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'build/static'),
]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
urlpatterns = [
path('admin/', admin.site.urls),
path('automation/', include('performaApp.urls')),
re_path('.*',TemplateView.as_view(template_name='index.html'))
#url(r'^', FrontendAppView.as_view())
]
build/index.html
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/static/manifest.json"><link rel="shortcut icon" href="/static/favicon.ico"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css"><title>Cameria - Facial Recognition</title><link href="/static/css/main.1ec2ccf3.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.40de23a7.js"></script></body></html>
Package.json
{
"name": "react-redux-starter-template",
"version": "0.1.0",
"private": true,
"homepage": "https://adidas008.herokuapp.com",
"dependencies": {
"#material-ui/core": "^4.9.0",
"#material-ui/icons": "^4.5.1",
"axios": "^0.19.2",
"material-ui": "^0.20.0",
"react": "^16.2.0",
"react-bootstrap": "^0.32.0",
"react-dom": "^16.2.0",
"react-flexbox-grid": "^2.0.0",
"react-loader-spinner": "^3.1.5",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "1.0.17",
"react-webcam": "^0.2.0",
"redux": "^3.7.2",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "npm run build"
},
"engines": {
"node": "10.18.1",
"npm": "6.13.4"
}
}
I think the main issue is the path of css or manifest files, thats why it may not loading react app,when I go to url it shows blank page and when I open console it giving me below errors :
Refused to apply style from 'https://adidas008.herokuapp.com/static/css/main.1ec2ccf3.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
register:1 Refused to execute script from 'https://adidas008.herokuapp.com/static/js/main.40de23a7.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
static/manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
register:1 Refused to apply style from 'https://adidas008.herokuapp.com/static/css/main.1ec2ccf3.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
Blank screen:
Kindly someone suggest I am stuck in this for so long,In my opinion it may be build directory fault,is the paths in index.html is valid,it was automatically made when I ran "npm run build".How can I load my react app.What can I fix?
I think you are missing this from your configuration:
class Assets(View):
def get(self, _request, filename):
path = os.path.join(os.path.dirname(__file__), "static", filename)
if os.path.isfile(path):
with open(path, "rb") as file:
return HttpResponse(file.read(), content_type="application/javascript")
else:
return HttpResponseNotFound()
Without this, Heroku will be receiving all statics with the default content-type for Django http requests, which is text/html. They need to be application/javascript in this case.
The whole thing with some gotchas is quite detailed here:
https://dev.to/mdrhmn/deploying-react-django-app-using-heroku-2gfa

ERR_CONNECTION_REFUSED with Django and Vue.js bundle files

I've built a simple SPA CRUD web app with Django, Vue and Docker(-compose).
Since I've finished developing the app, I'm now preparing for the production environment, that is, using bundle.js and bundle.css files.
When I try to load the main page, http://localhost:8000, no CSS or JS
are being loaded because I'm getting this error in the browser's console:
GET http://0.0.0.0:8080/bundle.css net::ERR_CONNECTION_REFUSED
GET http://0.0.0.0:8080/bundle.js net::ERR_CONNECTION_REFUSED
I really don't know why it is giving that error or how to fix it.
This is my vue.config.js file:
const webpack = require("webpack");
const BundleTracker = require("webpack-bundle-tracker");
module.exports = {
publicPath: "http://0.0.0.0:8080/",
outputDir: "./dist/",
filenameHashing: false,
configureWebpack: {
plugins: [
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 1
})
]
},
chainWebpack: config => {
config
.plugin("BundleTracker")
.use(BundleTracker, [{ filename: "./webpack-stats.json" }]);
config.output.filename("bundle.js");
config.optimization.splitChunks(false);
config.optimization.delete("splitChunks");
config.resolve.alias.set("__STATIC__", "static");
config.devServer
.hotOnly(true)
.watchOptions({ poll: 1000 })
.https(false)
.disableHostCheck(true)
.headers({ "Access-Control-Allow-Origin": ["*"] });
},
// uncomment before executing 'npm run build'
css: {
extract: {
filename: "bundle.css",
chunkFilename: "bundle.css"
}
}
};
This is part of my settings.py file:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "assets"),
os.path.join(BASE_DIR, "frontend/dist"),
]
# STATIC_ROOT = "" # The absolute path to the dir for collectstatic
WEBPACK_LOADER = {
'DEFAULT': {
'BUNDLE_DIR_NAME': 'dist/',
'STATS_FILE': os.path.join(BASE_DIR, 'frontend', 'webpack-stats.json'),
}
}
When I run the npm run build command I get notified that both the bundle.css and the bundle.js files have been generated:
File Size Gzipped
dist/bundle.js 150.73 KiB 51.05 KiB
dist/bundle.css 192.06 KiB 26.89 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
I really don't know why it is giving that ERR_CONNECTION_REFUSEDerror or how to fix it.
For production remove publicPath from your vue config file, I suppose you used that for development purposes, but in production you should only create the bundle and serve it to the user.
What's probably happening is that in your Docker setup you don't have the webpack dev server running (and you don't need it), thus you hit a connection refused error.

django-ckeditor, failed to load mathjax

I failed to load mathjax within django-ckeditor
This post contains my virtualenv config, CKEDITOR_CONFIGS, printscreen, and an element from the Source page.
virtualenv
>pip freeze
Django==1.10.2
django-appconf==1.0.2
django-ckeditor==5.1.1
django-compressor==2.1
django-debug-toolbar==1.6
Pillow==3.4.2
psycopg2==2.6.2
rcssmin==1.0.6
rjsmin==1.0.12
sqlparse==0.2.1
CKEDITOR_CONFIGS
CKEDITOR_CONFIGS = {
'default': {
'skin': 'moono',
# 'skin': 'office2013',
'toolbar_Custom': [
{'name': 'document', 'items': [
'Subscript', 'Superscript', ]},
{'name': 'source', 'items': [
'Source', ]},
],
'toolbar': 'Custom',
'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
'height': 200,
'width': 600,
'extraPlugins': ','.join(['mathjax', ]),
},
}
According to problems with mathjax #256, I've changed ckeditor-init.js. I also tried various combinations, including {'name': 'math', 'items': ['mathjax', ]}, and {'name': 'math', 'items': ['Matjax', ]} in 'toolbar_Custom' list.
Printscreen
Source
As you can see the panel contains all config I setup in config but mathjax. However, the page source contains the "toolbar_Basic", "toolbar_Full" & "toolbar_Custom". I'm not sure if Basic and Full should be present, according to my config.
< div class = "django-ckeditor-widget"
data - field - id = "id_false_answer_text"
style = "display: inline-block;" >
< textarea cols = "40"
id = "id_false_answer_text"
name = "false_answer_text"
rows = "10"
required data - processed = "0"
data - config = '{"toolbar_Basic": [["Source", "-", "Bold", "Italic"]], "toolbar_Full": [["Styles", "Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker", "Undo", "Redo"], ["Link", "Unlink", "Anchor"], ["Image", "Flash", "Table", "HorizontalRule"], ["TextColor", "BGColor"], ["Smiley", "SpecialChar"], ["Source"]], "filebrowserUploadUrl": "/ckeditor/upload/", "skin": "moono", "filebrowserWindowWidth": 940, "filebrowserWindowHeight": 725, "width": 600, "height": 200, "filebrowserBrowseUrl": "/ckeditor/browse/", "language": "en-us", "toolbar": "Custom", "toolbar_Custom": [{"items": ["Subscript", "Superscript"], "name": "document"}, {"items": ["Source"], "name": "source"}, {"items": ["mathjax"], "name": "mathjax"}]}'
data - external - plugin - resources = '[]'
data - id = "id_false_answer_text"
data - type = "ckeditortype" > & lt;
p & gt;
fa4 q1 & lt;
/p></textarea >
</div>
Another config
All-plugin config (according to a post from web) also shows no mathjax icon. Both with and without change of 'ckeditor-init.js
CKEDITOR_CONFIGS = {
'default': {
'toolbar': 'none',
'height': 200,
'width': 600,
},
}
So as example config from the README.rst
Static files
CKEDITOR_JQUERY_URL = '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'
The quesiton is:
If it is an issue, how can I quickfix it?
If it is related to configuration inexperience, could you please direct me to the config examples/the right config for mathjax?
The printscreens come from Django admin, I use RichTextUploadingField in these models.
This was a misconfiguration issue, no problems with Django-CKEditor. The key part of config for mathjax as follows.
CKEDITOR_CONFIGS = {
'default': {
'skin': 'moono',
'toolbar_Custom': [
{'name': 'math', 'items': ['Mathjax', ]},
],
'toolbar': 'Custom',
'mathJaxLib': '//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML',
'extraPlugins': ','.join(['mathjax',]),
},
}
Both toolbar and extraPligins should be present in config for mathjax to appear and work.

Django CKEditor toolbar settings

I have a website on django and everything was excellent before i've installed ckeditor. It works properly, but I can't change the toolbar configuration to "Full". If i write it in settings.py file like this:
CKEDITOR_CONFIGS = {
'Awesome': {
'toolbar': 'Full',
'width': 900,
}}
I have an editor block with width of 900px, but toolbar in only 1 row and 13 buttons instead of 3 rows and huge number of buttons. If i change "Full" to "Basic", then my toolbar grows down to 3 buttons.
I know, that I should change settings in config.js file in the ckeditor folder, but no toolbar settings are working. I tried to make a mini-toolbar:
config.toolbar =
[
[ 'Source', '-', 'Bold', 'Italic' ]
];
Tried to make a full-toolbar:
config.toolbar_Full =
[
{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },
{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] },
'/',
{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },
{ name: 'colors', items : [ 'TextColor','BGColor' ] },
{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];
I tried to delete or change ckeditor's settings in settings.py file of my project, after every change I have restarted the server, but nothing happened =(
The config.js file is working, a can add a button that hides the toolbar
config.toolbarCanCollapse = true;
And it works great =)
What shall I do to make a really full toolbar like this?
My brain is blowing up, so i'll be really happy if someone help me!
And sorry for my awful english...
I just found full toolbar settings on CKEditor docs here: Full toolbar configuration
To create editor instance with full toolbar you don't have to set anything. Just leave toolbar and toolbarGroups with the default, null values.
So django-ckeditor config will be,
CKEDITOR_CONFIGS = {
'default': {
'toolbar': None,
},
}
And it works :)
heres a snippet from my django ckeditor toolbar settings. Its not full but you should be able to add to it to get what you want.
'toolbar': [["Format", "Bold", "Italic", "Underline", "Strike", "SpellChecker"],
['NumberedList', 'BulletedList', "Indent", "Outdent", 'JustifyLeft', 'JustifyCenter',
'JustifyRight', 'JustifyBlock'],
["Image", "Table", "Link", "Unlink", "Anchor", "SectionLink", "Subscript", "Superscript"], ['Undo', 'Redo'], ["Source"],
["Maximize"]],
On a separate note, id recommend using the native javascript ckeditor if possible in your django propject. Ive been using the django version for a while now and its proving top be a serious headache for your reason mentioned above among other reasons.
You can config the toolbar by yourself just by adding, moving or removing the elements.
Just Check Here.