Develop Reference

Django media file page not found

So, I'm trying to follow Django documentation about the static files and media files
I have a clean Django installation and I want to add the media folder. What I've done? I've changed the urls.py inside the project (not the app) and the settings.py as below
settings.py
STATIC_URL = 'static/'
MEDIA_URL = 'media/'
MEDIA_ROOT = BASE_DIR / "media"
STATICFILES_DIRS = [
BASE_DIR / "static",
]
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
But I got the
Page not found (404) Request Method: GET Request
URL: http://127.0.0.1:8000/ Using the URLconf defined in
web_project.urls, Django tried these URL patterns, in this order:
admin/ ^media/(?P.*)$ The empty path didn’t match any of these.
I've also tried adding the 'django.template.context_processors.media' into TEMPLATES and using os as below
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATICFILES_DIRS = (os.path.join(BASE_DIR, 'static'),)
but nothing changes
What it could be?

Getting this error is the expected behavior because when you add a path to urlpatterns in urls.py in your example + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) you'll no more get access to http://127.0.0.1:8000/ (it just renders a “Congratulations!” page, with a rocket taking off. It worked! ) unless you specify a view to this empty path (which you didn't)
In your case, there is no URL leading to http://127.0.0.1:8000/ . the only paths you get access to are :
1- http://127.0.0.1:8000/admin/ for the admin page
2 - http://127.0.0.1:8000/media/(?P<path>.*)$ to access you media files
for example, if you have an image img.png in media folder you can access http://127.0.0.1:8000/media/img.png and view your image

The static function is only intended to serve static files during development and is not suitable for serving user-uploaded media files.
Try to make a condition check that whether DEBUG=True or not so:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Images(Media) not displaying on django-heroku server

I had uploaded my site Django app on Heroku server when I upload image file is successfully uploaded and image path as per settings also fetch properly but the image is not displaying it give error media file not found in a server
this is settings media setting
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
this is in url.py
urlpatterns = [
path('admin/', admin.site.urls),
path('',include('UserView.urls')),
path('caterer/',include('CaterView.urls')),
]
# if settings.MediaAllow:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
this is models.py
class TypeofFood(models.Model):
tyf_id = models.AutoField(primary_key=True,auto_created=True)
tyf_value = models.CharField(max_length=256)
tyf_image = models.ImageField(upload_to="typeoffood/", null=True, blank=True,default='default.jfif')
in template it fatch image like this
<center><img src="{{i.tyf_image.url}}" class="img-responsive" style="height: 200px; width: 200px; border-radius:50%" alt="Image of Caterers"></center>

heroku free storage is not allow media file store, that's why your media file will be deleted after upload
because it is like testing purpose, if you want to upload and store media file on heroku you can use third party like whitenoise
go to the link and learn how to use whitenoise to upload media file on heroku, you can check this link also.
happy codding

For heroku to serve static files you need to add whitenoise package too. Install it and add the necessary configurations.
MIDDLEWARE_CLASSES = (
# Simplified static file serving.
# https://warehouse.python.org/project/whitenoise/
'whitenoise.middleware.WhiteNoiseMiddleware',
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
STATIC_ROOT = os.path.join(BASE_DIR, "your_static_folder")
STATICFILES_STORAGE = 'whitenoise.django.GzipManifestStaticFilesStorage'
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "your_media_folder")

In your html, you will have to serve your image like so:
{% load static %}
<img src="{% static "images/hi.jpg" %}" alt="Hi!">
The "image.url" format in the html does not work on staticfiles/Heroku
I ran into a similar issue on Heroku, and solved my issue using these links below.
Here is a complete guide for serving images on Heroku:
https://github.com/codingforentrepreneurs/Guides/blob/master/all/Heroku_Django_Deployment_Guide.md
I would recommend going through the references also. These would be the references:
1) http://whitenoise.evans.io/en/stable/django.html
2) https://docs.djangoproject.com/en/3.0/howto/static-files/
3) https://docs.djangoproject.com/en/3.0/ref/templates/builtins/#std:templatetag-static

1-Make sure that django.contrib.staticfiles is included in your INSTALLED_APPS.
2-In your settings file, define STATIC_URL, for example:
STATIC_URL = '/static/'
3-In your templates, use the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE:
{% load static %}
<img src="{% static 'my_app/example.jpg' %}" alt="My image">
4-Store your static files in a folder called static in your app. For example: my_app/static/my_app/example.jpg.

From the Docs
The Heroku filesystem is ephemeral - that means that any changes to
the filesystem whilst the dyno is running only last until that dyno is
shut down or restarted. Each dyno boots with a clean copy of the
filesystem from the most recent deploy. This is similar to how many
container based systems, such as Docker, operate.
Hence you will need to use a third party static file storage service.

settings.py
DEBUG = True #I got the error beacuse i changed the DEBUG to False
MIDDLEWARE = [
...
'whitenoise.middleware.WhiteNoiseMiddleware',
...
]
import os
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "static")
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'
urls.py
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('app_name.urls'))
]
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

How do I serve media files in a local Django environment?

I can upload an image through the admin page, but the image can not be found when I navigate to the url that is generated by django. (404 error)
The files are being uploaded to the folder:
project_root/media/eventbanner/1/
I have tried multiple solutions but none seem to work for my situation.
Django 1.10 is being run local on Ubuntu 16.04.
The url I get is:
http://localhost:8000/media/eventbanner/1/banner_image.jpg
Media root folder is located at:
/home/username/xxx/xxx/project_name/media
Code in HTML file:
<div class="banner-image">
<img src="{{ event.eventbanner.banner_image.url }}"/>
</div>
url.py code:
from django.conf.urls import url, include
from django.contrib import admin
from . import views
from django.conf import settings
from django.conf.urls.static import static
app_name = 'events'
urlpatterns = [
url(r'^$', views.index, name='index'),
url(r'^details/(?P<event_id>[0-9]+)/$', views.details, name='details'),
url(r'^details/(?P<event_id>[0-9]+)/addcomment/$', views.add_comment, name='add_comment'),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
settings.py
STATIC_URL = '/static/'
STATICFILES_DIRS =[os.path.join(BASE_DIR, 'static'),]
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
models.py
def validate_only_one_instance(obj):
model = obj.__class__
if (model.objects.count() > 0 and obj.id != model.objects.get().id):
raise ValidationError("Can only create 1 %s instance" % model.__name__)
class EventBanner(models.Model):
event = models.OneToOneField(Event, unique=True)
banner_image = models.ImageField(upload_to=get_image_path, blank=True, null=True)
def clean(self):
validate_only_one_instance(self)

The real problem here is that there is no relationship between this url http://localhost:8000/media/eventbanner/1/banner_image.jpg and this location on disk /home/username/xxx/xxx/project_name/media.
In a production application you'd have a web server where you'd store your Media content, the serving URL would be MEDIA_ROOT and you'd append ImageField.url to this value to get a valid image path.
What you need here is to set up a web server for your media images. At first that sounds like a lot of work, but Django provides a shortcut...
Serving Files in Development
You have some work you need to do to have the media files served locally. It requires some changes to your urls.py ...
from django.conf import settings
from django.views.static import serve
# ... the rest of your URLconf goes here ...
if settings.DEBUG:
urlpatterns += [
url(r'^media/(?P<path>.*)$', serve, {
'document_root': settings.MEDIA_ROOT,
}),
]
This uses the views.serve bit and should only be used in DEBUG mode. It overrides the path to media files(django's term for user uploaded content like ImageField). This will redirect those requests through the serve view. Best I can tell this is a mini web server that will map those request routes to locations on disk and allow those locations to be reachable via HTTP urls.

As of at least Django 1.8, there is a helper function static() that will set this up for you and ensure that it only functions in debug mode.
Your urls.py should look something like this:
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
...to simply quote the documentation.
Make sure that your MEDIA_URL is set to a relative path like /media/ and that your MEDIA_ROOT is an absolute filesystem path like /home/foo/project/media.

Django admin: image saved but error occured when click

I am ashamed to ask a question of that sort but I still can not solve my problem. I normally uploaded image in my media directory and can see image link in my admin but if I click on link I get:
Page not found (404)
Request Method: GET
Request URL: http://127.0.0.1:8000/photo/img/9.jpg
Using the URLconf defined in TeamStudy.urls, Django tried these URL patterns, in this order:
^admin/
The current URL, photo/img/9.jpg, didn't match any of these.
my project structure:
src
static/
photo/
img/
settings:
PROJECT_DIR = os.path.dirname(os.path.dirname(__file__))
BASE_DIR = os.path.dirname(PROJECT_DIR)
MEDIA_ROOT = os.path.join(BASE_DIR, 'static', 'photo')
MEDIA_URL = '/photo/'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static")
STATIC_URL = '/static/'
urls.py
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
]
I suspect it perhaps quite simple and I miss something. Please point me.

You need to add the media MEDIA_ROOT and MEDIA_URL in your urlpatterns
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
check following links for more details
Accessing "Media" files in Django
Django classifies user files in two types
Static files
Media files
this link helps you understand the difference between them
Your issues deals with Media files.
In future development, you may need to serve static files, to serve them you will need to add
STATIC_ROOT and STATIC_URL to the urlpatterns in a similar way that MEDIA_ROOT and MEDIA_URL are added

Change your URL's patterns:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
url(r'^admin/', include(admin.site.urls)),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
for more info Django Docs

First point: don't put uploaded medias in you static directory - static is for static files that are part of your project (css, js etc) -, you want to use MEDIA_ROOT and MEDIA_URL for this.
wrt/ serving the static and media contents, it depends on the environment. On your local dev environment you want to use the staticfile.views to serve both static and medias as mentionned in the other answers, but don't do this in production : on a production server, you want to use your front web server to serve static (and media) contents.

Django CKEditor Image Uploads not appearing

This is a duplicate of Django Ckeditor image browser not finding images, but I believe the answer there is wrong (there is an obvious bug in it with an undefined variable, not to mention the lack of Python indentation).
I'm using Django CKEditor 5.0.3 and Django 1.9.6. I am able to upload images in my admin, but they appear as a red X within the admin and do not appear on my site.
I'm still struggling a bit with MEDIA_ROOT and whatnot, but I think I have it right:
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
MEDIA_URL = "image_upload/"
MEDIA_ROOT = os.path.join(BASE_DIR, "image_upload")
CKEDITOR_UPLOAD_PATH = 'uploads/'
CKEDITOR_IMAGE_BACKEND = "pillow"
CKEDITOR_UPLOAD_SLUGIFY_FILENAME = False
My urls.py, including my attempt at cleaning up the linked answer:
from django.conf import settings
from django.conf.urls import url, include
from django.conf.urls.static import static
from django.contrib import admin
from mainsite.views import HomepageView, AboutView, ContactView
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
url(r'^admin/', admin.site.urls, name="admin"),
url(r'^$', HomepageView.as_view(), name="homepage"),
url(r'^about/', AboutView.as_view(), name="about"),
url(r'^contact/', ContactView.as_view(), name="contact"),
url(r'^blog/', include("blog.urls", namespace="blog")),
url(r'^ckeditor/', include('ckeditor_uploader.urls')),
]
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
if settings.DEBUG:
urlpatterns += [
url(r'^media/(?P<path>.*)$',
'django.views.static.serve', {
'document_root': settings.MEDIA_ROOT,
}
),
]
urlpatterns += staticfiles_urlpatterns()

Using CKEDITOR_UPLOAD_PATH = 'uploads/' makes django-ckeditor to upload an image to /media/uploads/, like:
settings.py:
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static/'),
]
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/'
CKEDITOR_UPLOAD_PATH = 'uploads/'
When using the Django's dev server, static files are served by default but not media files, so you can force the server to consider them, the url configuration below should work.
urls.py:
from django.conf.urls import url, include
from django.contrib import admin
from django.conf import settings
from django.views.static import serve
from .views import HomeView
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^$', HomeView.as_view(), name='home'),
url(r'^ckeditor/', include('ckeditor_uploader.urls')),
# serving media files only on debug mode
if settings.DEBUG:
urlpatterns += [
url(r'^media/(?P<path>.*)$', serve, {
'document_root': settings.MEDIA_ROOT
}),
]
The missing function patterns from the old example was an old function I believe used on Django 1.6 or 1.7.

After installing ckeditor, perform the following :
In Settings.py:
add 'ckeditor' and 'ckeditor_uploader' into INSTALLED_APPS.
Add CKEDITOR_UPLOAD_PATH = 'uploads_directory/'
(Do not join MEDIA_ROOT with the upload_directory, ckeditor will take the MEDIA_ROOT as its root upload directory)
In your models files:
USE : from ckeditor_uploader import RichTextUploadingField and modify your required model field to type RichTextUploadingField
In urls.py:
add re_path(r'^ckeditor/', include('ckeditor_uploader.urls')) into urlpatterns

Using Django 1.8 with django-ckeditor 5.3.0, I was getting the exact same symptoms as those above (uploading files worked, but the src attribute of the <img> tag was set incorrectly, causing a red "X" in the preview and broken image links upon publication).
In my case, however, I didn't have to change anything in urls.py. My problem was that I had:
CKEDITOR_UPLOAD_PATH = os.path.join(MEDIA_ROOT, "ckeditor")
So my mistake was giving CKEDITOR_UPLOAD_PATH the path where I wanted ckeditor to upload to (logical, no?).
The fix was to change the above line to
CKEDITOR_UPLOAD_PATH = "ckeditor"
In hindsight I can see how this allows django-ckeditor the ability to use the MEDIA_ROOT for uploading and the MEDIA_URL for serving. Still I thought someone should say it: "Don't use the full path when setting CKEDITOR_UPLOAD_PATH!"
I hope this saves others some time.

For Django 4 the steps to enable image or file upload in django-ckeditor is:
1. Install django-ckeditor
pip install django-ckeditor
2. Update settings.py
Add file upload path:
CKEDITOR_UPLOAD_PATH = "uploads/"
Add ckeditor,ckeditor_uploader in INSTALLED_APPS:
INSTALLED_APPS = [
...
# plugins
'ckeditor',
'ckeditor_uploader'
]
3. Update urls.py
Add path('ckeditor/', include('ckeditor_uploader.urls')) in urlpatterns:
urlpatterns = [
...
path('ckeditor/', include('ckeditor_uploader.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
4. Use RichTextUploadingField in models
from ckeditor_uploader.fields import RichTextUploadingField
class ResearchTopic(models.Model):
title = models.CharField(max_length=200)
description = RichTextUploadingField()
Tested with:
Django==4.0.4
django-ckeditor==6.4.0
References:
django-ckeditor documentation

The #Mohammed-tayab's solution worked for me with a little modification:
from ckeditor_uploader.fields import RichTextUploadingField