Develop Reference

How to serve static files (like images) in a combined django-react application

This is the first web application I'm developing by combining django and reactjs, in fact react is new to me.
Please if my approach is wrong I'm open for correction.
When developing with purely django, I find no difficulty with static and media files.
It is clear that the elements involved are the media root and static root,
respectively. In that case, all I need to do is to specify the static/media root in the
settings.py in the django app as shown below:
settings.py
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/images/'
urls.py
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
However, when I combine django and react the configuration changes since django is configured
to look at index.html file in react, in which case an additional element called STATICFILES DIRS
is added to the seetings.py file to specify the path to react index.html. In fact, my django app
configuration looks like this when I combine django and react:
settings.py
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'build/static')]
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
MEDIA_URL = '/media/images/'
urls.py
urlpatterns = [
...
re_path(r'^.*', TemplateView.as_view(template_name='index.html'))
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) \
+ static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
TEMPLATES = [
{
...
'DIRS': [os.path.join(BASE_DIR, 'build')],
...
]
Everything works well as when I'm developing purely with django except that when I combine django and react in development the images I upload refuse to displayed
on the browser since any path that does not match with the specified paths in urlpattern are redirected
to react. re_path(r'^.*', TemplateView.as_view(template_name='index.html')) So the image path is being redirected. When I click the image link in the admin file, instead of
the image to get displayed, I'm redirected to react also. I have made research online but I can't find any resources
that explained properly how to configure the django static root and media root to be able to serve files (
like images uploaded to the database) content.
Please, do I display images and media on the browser? In production, I would like to serve static files of the
django-react app with aws s3 bucket

Check that you have added the build folder to installed apps
INSTALLED_APPS = [ build, ]
If DEBUG use STATICFILES_DIRS else use STATIC_ROOT. Add this code in the settings.py file.
if DEBUG: STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')] else: STATIC_ROOT = os.path.join(BASE_DIR, 'static')
In the urls.py file
urlpatterns += [re_path(r'^.*', TemplateView.as_view(template_name='index.html'))]
Then run python manage.py collectstatic
You should also install whitenoise pip install whitenoise

Cannot upload image to MEDIA_ROOT using Mongoengine ImageField

I'm trying to upload images using Mongoengine ImageField.
But after uploading a test image,I got page not found by visiting http://127.x.x.x:xxxx/media/testimage.png.
Raised by: django.views.static.serve
"/Users/xxx/Documents/basedir/media/testimage.png" does not exist
myproject/settings.py
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
myproject/myapp/models.py
from mongoengine import Document, ImageField
class Image(Document):
image = ImageField(upload_to="")
filename = fields.StringField()
myproject/urls.py
from django.conf import settings
urlpatterns = [
#bla
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
What did I do wrong?

You may want to have a look at this. It is fairly thorough and provides every step needed to configure static files. 404 Error for django serving static files. How to setup django to serve static files?. It appears you are definitely missing STATICFILES_DIRS and also have you ran python manage.py collectstatic command?
It would also be good to confirm you upload_to of the ImageField is also correct. You can verify this in the shell. python manage.py shell

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.

ImproperlyConfigured("Empty static prefix not permitted")

I am using Django Rest Framework to upload images.
The upload is working fine and is getting uploaded under media folder.
But I am unable to make the media links browsable. It says Error 404.
To make them browsable these are the changes that I made.
In settings.py I added the following lines.
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
STATIC_URL = '/static/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATIC_URL = '/media/'
In url.py I added the following lines
if settings.DEBUG is True:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
DEBUG is True in settings.py as it's not in production. It is on my local machine under development.
But when I am starting the server it is showing me the following error:-
ImproperlyConfigured :- Empty static prefix not permitted

Sorry guys! I found my own mistake. Instead of MEDIA_URL I was using STATIC_URL

Django static files not loading with default setup

So I installed Bitnami Django stack, and enabled the admin module, and followed the tutorial for creating an admin menu for "Polls".
However, when I go to /admin/ everything is white plaintext. All the css and images are 404 error.
All I did was:
enable in settings.py installed_apps:
'django.contrib.admin',
In urls.py UNcommented:
from django.contrib import admin
admin.autodiscover()
url(r'^admin/', include(admin.site.urls)),
uncommented.
In settings.py, I tried using default settings and also tried this:
MEDIA_ROOT = ''
MEDIA_URL = '/media/'
STATIC_ROOT = ''
STATIC_URL = '/static/'
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
import os
SITE_ROOT = os.path.dirname(os.path.realpath(__file__))
STATICFILES_DIRS = (
os.path.join(SITE_ROOT, 'static/'),
)
Nothing seems to work, it refuses to find static files in /admin/media/css/ etc.
I made sure my windows PATH has /bin of django. I even tried including /contrib, nothing helps.
I have installed Django to:
C:\DjangoStack\apps\django
I have installed my project to:
C:\Users\dexter\BitNami DjangoStack projects\Alpha
and I type: localhost/Alpha/admin to go to admin.

I almost missed the answer to this until I re-read your question and finally caught the bit in the last line: "and I type: localhost/Alpha/admin to go to admin". That means all your URL settings are wrong.
Currently, you have:
MEDIA_URL = '/media/'
STATIC_URL = '/static/'
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
Whereas, these should be:
MEDIA_URL = '/Alpha/media/'
STATIC_URL = '/Alpha/static/'
ADMIN_MEDIA_PREFIX = STATIC_URL + 'admin/'
Additionally, you don't need "static/" in STATICFILES_DIRS. So remove that setting.

I'm from the BitNami Team and I just saw this issue. I'm not sure if you are using and older version but at least in the newer version of the BitNami DjangoStack you just need to make sure that the ADMIN_MEDIA_PREFIX point to /static/admin/ if you are following the
instructions in https://docs.djangoproject.com/en/1.3/intro/tutorial02/ . You don't need to copy the static files in your project directory because django automatically will use the files in django/contrib directory.
However currently we are setting the ADMIN_MEDIA_PREFIX to /static/admin/media because the behavior is different when the application is served by Apache instead of the django server. We realize that this may be a bit confusing for users that are just starting with django and we are looking at this on our side to keep the default configuration for the new projects but also allow the demo project to be served by Apache.