Django Form Instance not showing the Uploaded Image - django

Question

I am making a CMS platform in Django. I want to create the EDIT Post method so that anyone can edit their post. The main problem is the ImageField. As ImageField is required in Django's Models.py.So, while creating edit Post method for the user the ImageField, the image which was uploaded at the time of post creation, is empty.
The image is available in the Post models (Database) But not showing on EDIT Post Page. Except for Image, every other field are editable and visible.
Here is Edit Post View
def updatePost(request,pk):
getEditPost= get_object_or_404(Post,pk=pk)
if request.method=="POST":
form = CkEditorForm(request.POST,request.FILES,instance=getEditPost)
try:
if form.is_valid():
form.save()
except Exception as e:
print(e)
else:
form = CkEditorForm(instance=getEditPost)
context= {
'myForm':form,
'post':getEditPost,
}
return render(request,"post/editPost.html",context)
Here is my forms.py
class CkEditorForm(ModelForm):
.....
.....
featuredImage = forms.ImageField(required=True)
My models.py
class Post(models.Model):
.....
.....
featuredImage = models.ImageField(upload_to="featured_image/")

Answer 1

Have you added MEDIA_URL and MEDIA_ROOT in settings.py file

Answer 2

I'm not sure if there is any way to load an image in the image field from the backend. But you can simply view the image on the edit page so that users can understand which image was uploaded previously. (Leaving the image field blank on the edit page won't affect the image field in the database.)
Do these changes to load an image on edit page:
views.py
# Create your views here.
def updatePost(request,pk):
getEditPost= get_object_or_404(Post,pk=pk)
if request.method=="POST":
form = CkEditorForm(request.POST,request.FILES,instance=getEditPost)
try:
if form.is_valid():
form.save()
except Exception as e:
print(e)
else:
form = CkEditorForm(instance=getEditPost)
context= {
'myForm':form,
'post':getEditPost,
# add this line
'feature_image': getEditPost.featuredImage,
}
return render(request,"post/editPost.html",context)
editPost.html
...
<!-- Before closing the blody tag -->
<script>
let image_field = document.getElementById('id_featuredImage') // form > image field
let load_image = document.createElement('img')
// Add media root before image link, in this case I'm adding /media/
load_image.setAttribute('src', "/media/{{feature_image}}")
load_image.setAttribute('alt', "Feature image")
image_field.parentNode.insertBefore(load_image, image_field.nextSibling)
</script>

Answer 3

i had a similar issue and the solution for me was this.
If you had the model form with a "forms.FileInput" widget, delete this widget.
So from this:
class UserInfoForm(ModelForm):
tags = forms.ModelMultipleChoiceField(queryset = Tag.objects.all(),widget = forms.CheckboxSelectMultiple())
class Meta:
model = UserInfo
widgets = {
'bio' : forms.Textarea(attrs={'class':'form-control mb-3', 'rows':'4', 'cols':'50'}),
'profilePhoto' : forms.FileInput(attrs={'class':'form-control mb-3'})
}
To this:
class UserInfoForm(ModelForm):
tags = forms.ModelMultipleChoiceField(queryset = Tag.objects.all(),widget = forms.CheckboxSelectMultiple())
class Meta:
model = UserInfo
widgets = {
'bio' : forms.Textarea(attrs={'class':'form-control mb-3', 'rows':'4', 'cols':'50'}),
}
With the widget you won't get the "Profilephoto:currently:" part
Now I have to figure out how to custom the classes of the file input, but for now I'm good like this