Photo not displaying in django html - django

I spent a few hours trying to find out what is going on but I can`t see why the photo is not displayed in my html file.
Goal: Display the profile photo of each user
Issue: Photo not displaying in django html
detail.html
<div class="col-sx-1 col-sm-5 text-right">
<a href="{% url 'contacts:detail' contact.id %}">
{% if contact.photo %}
<img src="/{{ contact.photo.url }}" class="img-responsive">
{% else %}
<h3>No image to display</h3>
{% endif %}
</a>
</div>
views.py
def create_contact(request):
form = ContactForm(request.POST or None, request.FILES or None)
if form.is_valid():
contact = form.save(commit=False)
contact.user = request.user
contact.photo = request.FILES['photo']
file_type = contact.photo.url.split('.')[-1]
file_type = file_type.lower()
if file_type not in IMAGE_FILE_TYPES:
context = {
'contact': contact,
'form': form,
'error_message': 'Image file must be PNG, JPG, or JPEG',
}
return render(request, 'contacts/create_contact.html', context)
contact.save()
return render(request, 'contacts/detail.html', {'contact': contact})
context = {
'form': form,
}
return render(request, 'contacts/create_contact.html', context)
urls.py
urlpatterns = [...]
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
models.py
class Contact(models.Model):
photo = models.ImageField(upload_to='profileimage', blank = True)
settings.py
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Many Thanks,

I have resolved this issue by adding static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) to the main urls.py file. I hope this help.

Related

django image uploaded section doesnot shows up in production

I tried to upload image from the admin side in production but it doesn't shows up or stores in static/images but it used to work while working in local.
However my static images are loaded and also those I've saved in development are also showing up but while adding new images it doesn't get added to static files.
My model:
class Gallery(models.Model):
title = models.CharField(max_length=150)
image = models.ImageField(upload_to='images/',null=True,default="avatar.svg")
updated = models.DateTimeField(auto_now=True)
created = models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.title
Urls.py
from django.contrib import admin
from django.urls import path,include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('base.urls'))
]
urlpatterns +=static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
Gallery .html
{% for gallery in gallerys %}
<!-- ITEM 1 -->
<div class="col-xs-6 col-md-3">
<div class="box-gallery">
<a href="{{gallery.image.url}}" title="Gallery #1">
<img src="{{gallery.image.url}}" alt="" class="img-fluid" />
<div class="project-info">
<div class="project-icon">
<span class="fa fa-search"></span>
</div>
</div>
</a>
</div>
</div>
{% endfor %}
Settings.py
here i've uploaded only the required ones
BASE_DIR = Path(__file__).resolve().parent.parent
STATIC_URL = '/static/'
AUTH_USER_MODEL = 'base.NewUser'
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static/")
MEDIA_URL = '/images/'
MEDIA_ROOT = os.path.join(os.path.dirname(BASE_DIR), "/static/images")
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
views.py
def gallery(request):
gallerys = Gallery.objects.all()
context = {'gallerys':gallerys}
return render(request, 'base/gallery.html',context)
am i missing something here?
Thanks in advance
The way to store images in static folder.
Do this:
views.py:
def gallery(request):
if request.method == 'POST':
form = YourForm(request.POST, request.FILES)
if form.is_valid():
handle_uploaded_file(request.FILES['image'])
model_instance = form.save()
model_instance.save()
else:
form = YourForm()
gallerys = Gallery.objects.all()
context = {'gallerys':gallerys}
return render(request, 'base/gallery.html',context)
def handle_uploaded_file(f):
with open('static/images/'+f.name, 'wb+') as destination:
for chunk in f.chunks():
destination.write(chunk)
settings.py:
STATIC_URL = 'static/'
STATIC_ROOT=os.path.join(BASE_DIR,'static')
urls.py:
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('base.urls'))
]+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)+static(settings.MEDIA_URL,document_root=settings.MEDIA_ROOT)
This is the way that you can store static files.
I hope this may be get you

Default profile photo not being displayed

I am working on a twitter clone app and i want users to have a default profile photo when they sign up and login. I have set up the model to upload the default image but for some reason its not displaying.
models.py
from django.db import models
from django.contrib.auth.models import User
#import pylibjpeg_libjpeg
from PIL import Image
# Create your models here.
class Profile(models.Model):
user = models.OneToOneField(User, on_delete=models.CASCADE)
image = models.ImageField(upload_to='profile_pics', default='default.png')
def __str__(self):
return f'{self.user.username} Profile'
#property
def followers(self):
return Follow.objects.filter(follow_user=self.user).count()
#property
def following(self):
return Follow.objects.filter(user=self.user).count()
def save(self, force_insert=False, force_update=False, using=None, update_fields=None):
super().save()
img = Image.open(self.image.path)
if img.height > 300 or img.width > 300:
output_size = (300, 300)
img.thumbnail(output_size)
img.save(self.image.path)
views.py
#login_required
def profile(request):
if request.method == 'POST':
uform = UserUpdateForm(request.POST, instance=request.user)
pform = ProfileUpdateForm(request.POST, request.FILES, instance=request.user.profile)
if uform.is_valid() and pform.is_valid():
uform.save()
pform.save()
messages.success(request, f'Account updated.')
return redirect('profile')
else:
uform = UserUpdateForm(instance=request.user)
pform = ProfileUpdateForm(instance=request.user.profile)
return render(request, 'Users/profile.html', {'uform': uform, 'pform': pform})
settings file
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, "staticfiles")
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'
html file
<article class="media content-section" style="height:140px; width:100%">
{% if user_profile != None %}
<div class="mt-2 d-flex full-width align-items-center">
<img class="rounded-circle mr-3 img-fluid" style="width:90px; height:90px" src="{{ user_profile.profile.image.url }}">
<div>
<h4 style="text-align: left" class="white-important">
{{ user_profile.username}}
</h4>
<h6 style="text-align:left" class="email-profile">
{{ user.email }}
</h6>
</div>
</div>
{% else %}
<div class="mt-2 d-flex full-width align-items-center">
<img class="rounded-circle mr-3" style="width:90px; height:90px;" src="{{ user.profile.image.url }}" alt="profile picture">
<div>
<h4 style="text-align: left" class="white-important">
{{ user.username }}
</h4>
<h6 style="text-align:left" class="email-profile">
{{ user.email }}
</h6>
</div>
</div>
{% endif %}
my project's urls.py file
from django.contrib import admin
from django.urls import path, include
from django.contrib.auth import views as auth_views
from django.conf import settings
from django.conf.urls.static import static
from Users import views as users_views
urlpatterns = [
path('admin/', admin.site.urls),
path('login/', auth_views.LoginView.as_view(template_name='Users/login.html'), name='login'),
path('logout/', auth_views.LogoutView.as_view(template_name='Users/logout.html'), name='logout'),
path('password-reset/', auth_views.PasswordResetView.as_view(template_name='Users/password_reset.html'),name='password-reset'),
path('password-reset/done', auth_views.PasswordResetDoneView.as_view(template_name='Users/password_reset_done.html'), name='password-reset-done'),
path('password-reset/confirm/<uid64>/<token>/', auth_views.PasswordResetConfirmView.as_view(template_name='Users/password_reset_confirm.html'), name='password-reset-done'),
path('register/', users_views.register, name='register-users'),
path('profile/', users_views.profile, name='profile'),
path('search/', users_views.SearchView, name='search'),
path('', include("Blog.urls")),
]
if settings.DEBUG is True:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
here's the screenshot of the output after the user logs in
It seems like you are not serving the media files locally. Check the documentation here
inspect the image on your browser and see what is being rendered. also, try adding a trailing slash to the media_root such that it is MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
In views.py check the indentation of pform.save() ...
if still not working follow/check these steps :
settings.py:
STATIC_DIR = os.path.join(BASE_DIR,"static")
MEDIA_DIR = os.path.join(BASE_DIR, 'media')
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/3.1/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
STATIC_DIR,
]
#MEDIA
MEDIA_ROOT = MEDIA_DIR
MEDIA_URL = '/media/'
LOGIN_URL = 'user_login'
create a folder named media with a subfolder profile_pics in your base directory (the folder where you have your manage.py file)
also check this similar code :
models.py :
from django.db import models
from django.contrib.auth.models import User
# Create your models here.
class user_profile(models.Model):
#using default User model by linking
user = models.OneToOneField(User, on_delete=models.CASCADE)
#additional fields
website = models.URLField(blank=True)
profile_picture = models.ImageField(upload_to='profile_pictures' , blank = True )
bio = models.CharField(blank=True, max_length=300)
def __str__(self):
return self.user.username
forms.py:
from django import forms
from django.contrib.auth.models import User
from .models import user_profile
class User_form(forms.ModelForm):
password = forms.CharField(widget=forms.PasswordInput())
class Meta:
model = User
fields = ("username", "email" , "password")
class user_profile_form(forms.ModelForm):
class Meta:
model = user_profile
fields = ("profile_picture", "website" , "bio")
views.py :
def signup(request):
registered = False
if request.method == "POST":
user_form = User_form(data=request.POST)
user_profileform = user_profile_form(data=request.POST)
if(user_form.is_valid() and user_profileform.is_valid()):
user = user_form.save()
user.set_password(user.password)
user.save()
profile = user_profileform.save(commit=False)
profile.user = user
if 'profile_picture' in request.FILES:
profile.profile_picture = request.FILES['profile_picture']
profile.save()
registered = True
else:
print(user_form.errors, user_profileform.errors)
else:
user_form = User_form()
user_profileform = user_profile_form()
return render(request, "registration/signup.html", {'user_form': user_form , 'user_profileform' : user_profileform, 'registered' : registered } )
Also make sure your template form has the "multipart/form-data":
signup.html :
<form enctype="multipart/form-data" method="POST">
<div class="container sign-form">
{% csrf_token %}
{{ user_form |as_bootstrap }}
{{ user_profileform |as_bootstrap }}
<!-- {{ user_profileform.as_p }} -->
<input type="submit" class = “btn btn-default” name="submit" value="submit">
also check if you are rendering the image in the template properly . something like this ,
<div class="container">
<img src="media/{{[context_object_name].image}}" class="imgbar" id="img">
</div>
even now not solved, open the browser console and let know what is the error displayed
edit :
add this[+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)] to your urls.py,
urls.py:
from django.urls import path,include
from . import views
from django.conf import settings
from django.conf.urls.static import static
app_name = 'homepage'
urlpatterns = [
path('', views.home , name = "home"),
path('contact', views.contact , name = "contact"),
path('about', views.about , name = "about"),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Problem is that image is not saving . when i am select image and upload all code working properly but image does not save django

Problem is that image is not saving. when I am select an image and upload all the code working properly but the image does not save. I checked all the code line by line I do not understand what's the problem. I also see the media file any image is saved or not, but the image wasn't saved.
this is models.py in this file I use the image field
models.py
class Answer (models.Model):
question=models.ForeignKey(Question,on_delete=models.CASCADE)
user=models.ForeignKey(User,on_delete=models.CASCADE, null=True)
img=models.ImageField(null=True,blank=True,upload_to='Answer_Img')
detail=RichTextUploadingField()
add_time=models.DateTimeField(auto_now_add=True)
def __str__(self):
return self.detail
forms.py
class AnswerForm(ModelForm):
class Meta:
model=Answer
fields=('detail','img')
labels={'img':'Upload Image'}
views.py
def answer(request,pk,slug):
try:
trend=Question.objects.get(pk=pk,slug=slug)
except:
raise Http404("Post Does Not Exist")
tags=trend.tags.split(',')
ans=Answer.objects.filter(question=trend)
answerform=AnswerForm
if request.method=='POST':
answerData=AnswerForm(request.POST)
if answerData.is_valid():
answer=answerData.save(commit=False)
answer.question=trend
answer.user=request.user
answer.save()
p=messages.success(request,'Answer has been submitted.')
return HttpResponseRedirect(trend.slug)
return render(request,"ask/answer.html" ,{
'trends':trend,
'tags':tags,
'answer':ans,
'form':answerform,
})
answer.html
{% if user.is_authenticated %}
<div class="container">
<div class="py-5 text-center bg-secondary text-white">
<h1 class="mb-3">Upload Image</h1>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{form}}
<input type="submit" class="btn btn-danger" value="Upload">
</form>
</div>
{% else %}
<h3><P>Sign In/Sign Up before posting answers</P></h3>
<h4><li>Sign In</li><h4>
<h4> <li>Sign Up</li><h4>
{% endif %}
settings.py
STATIC_URL = '/static/'
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')
urls.py
urlpatterns = [
# my url patterns here
]
if settings.DEBUG:
urlpatterns += static(settings.STATIC_URL, document_root = settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL, document_root = settings.MEDIA_ROOT)
Use request.files to get the img. please check if the media folder is in your base directory and the subfolder is named correctly.
if request.method == "POST":
answer_form = Answer_form(data=request.POST)
if(answer_form.is_valid()):
ans = answer_form.save(commit=False)
#ans.user = user
if 'img' in request.FILES:
ans.img = request.FILES['img']
ans.save()
else:
print(answer_form.errors)
Here is the documentation page :
File Uploads

django file upload doesn't work

Im working on web app project for study. I have a problem with file upload.
It works for an admin, but for regular user files don't save. It must be a problem with mu views.py or template html
forms.py
class DocumentUpload(forms.ModelForm):
class Meta:
model = Form
fields = ('file',)
models.py
class Form(TimeStampedModel, TitleSlugDescriptionModel):
author = models.ForeignKey(User, on_delete=models.CASCADE)
title = models.CharField(max_length=512)
is_final = models.BooleanField(default=False)
is_public = models.BooleanField(default=False)
is_result_public = models.BooleanField(default=False)
file = models.FileField(null=True, blank=True)
def __str__(self):
return self.title
def get_absolute_url(self):
return reverse('form-detail', kwargs={'slug': self.slug})
views.py
def create_form(request):
if request.method == 'POST':
user = request.user
data = ParseRequest(request.POST)
print(data.questions())
print(data.form())
parsed_form = data.form()
parsed_questions = data.questions()
# tworzy formularz o podanych parametrach
formfile = DocumentUpload(request.POST, request.FILES or None)
if formfile.is_valid():
form = formfile.save(commit=False)
print(form)
form.author = user
form.title = parsed_form['title']
form.is_final = parsed_form['is_final']
form.is_result_public = parsed_form['is_result_public']
form.description = parsed_form['description']
form.save()
# zapisuje pytania z ankiety wraz z odpowienimi pytaniami
for d in parsed_questions:
question = Question(form=form, question=d['question'])
question.save()
# dla kazdego pytania zapisz wszystkie opcje odpowiadania
for opt in d['options']:
option = Option(question=question, option=opt)
option.save()
return render(request, 'forms/form_form.html', {})
else:
form = DocumentUpload()
return render(request, 'forms/form_form.html', {'form': form})
create_form.html
{% block content %}
<form method="post" id="form" enctype='multipart/form-data'>
{%csrf_token %}
<div class="form-group">
{% csrf_token %}
<label for="form-title">Tytuł formularza</label>
<input id="form-title" class="form-control" type="text"
placeholder="Tytuł" required/>
</div>
{{ form.as_p }}
<input class="btn btn-default" type="submit" value="zapisz"/>
</form>
{% endblock %}
5.settings.py
....
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.sqlite3',
'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
}
}
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
...
5.urls.py
if settings.DEBUG:
urlpatterns +=
static(settings.STATIC_URL,document_root=settings.STATIC_ROOT)
urlpatterns += static(settings.MEDIA_URL,
document_root=settings.MEDIA_ROOT)
You forgot to add action on your form just like so :
<form action="{% url 'name_of_your_function' %}" method="post" id="form" enctype='multipart/form-data'>
...
</form>
action must contain your url name, example :
url(url_regex, views.function, name="name_of_your_function"),
You haven't specified an upload_to attribute for your FileField in models.py.
Add a directory for your field, like,
file = models.FileField(upload_to='uploads/', null=True, blank=True)
Your form is all fine and the file has been sent through request, but Django does not know where to save the file, until you define it in your models.
Read more about it in the docs here

File upload in Django

I'm trying to get Django to upload a file (keeping it simple, for now), but am having difficulties. Here's all of the relevant code (that I know of). Perhaps something is wrong with my settings.py? My code is pieces of various answers on Stack Overflow. I've checked here already.
When I select a file (~8.5mb file because I saw Django does something funny if it is under 2.5mb) and press Submit, I am brought to the Upload Success page, but can't seem to find my file anywhere in my project directory.
I am using the development runserver with apache running just for serving images.
settings.py
MEDIA_ROOT = '/Users/adam/Documents/workspace/sitename/media'
MEDIA_URL = 'http://127.0.0.1:8000/media/'
STATIC_ROOT = '/Library/WebServer/Documents/static/'
STATIC_URL = 'http://10.0.1.15/static/'
ADMIN_MEDIA_PREFIX = '/media/admin/'
STATICFILES_DIRS = (
)
*the static URL is the address of my local apache webserver.
urls.py
urlpatterns = patterns('',
('^$', index),
('^uploadfile/$', uploadfile),
('^uploadsuccess/$', uploadsuccess),
)
if settings.DEBUG:
from django.views.static import serve
_media_url = settings.MEDIA_URL
if _media_url.startswith('/'):
_media_url = _media_url[1:]
urlpatterns += patterns('',
(r'^%s(?P<path>.*)$' % _media_url,
serve,
{'document_root': settings.MEDIA_ROOT}))
del(_media_url, serve)
views.py
def uploadsuccess(request):
return render_to_response('uploadsuccess.html', {})
class UploadFileForm(forms.Form):
file = forms.FileField()
def uploadfile(request):
if request.method == 'POST':
form = UploadFileForm(request.POST, request.FILES)
if form.is_valid():
handle_uploads(request.FILES['file'])
form.save()
return HttpResponseRedirect('/')
else:
form = UploadFileForm()
return render_to_response('fileupload.html', {'form': form}, context_instance=RequestContext(request))
def handle_uploads(file):
logging.debug("upload_here")
if file:
destination = open('/tmp/'+file.name, 'wb+')
for chunk in file.chunks():
destination.write(chunk)
destination.close()
fileupload.html
<html>
<body>
<h1>Upload a file</h1>
<form enctype="multipart/form-data" method="post" action="/uploadsuccess/">
{% csrf_token %}
<table>
{% for field in form %}
{{ field.label_tag }}
{{ field }}
{% endfor %}
</table>
<input type="submit" value="Submit" id="Save"/>
</form>
<body>
</html>
uploadsuccess.html
<html>
<body>
<h1>Upload Successful!</h1>
<body>
</html>
You are posting data to the wrong URL, change action="/uploadsuccess/" to /uploadfile/.