Django form is not saving image file

Question

In this webapp I have a question model and a question diagram model. Whenever the user uploads an image, it is supposed to be saved in media/question_image folder. It is working fine if I upload from the admin panel, but when I upload the image from webpage it is not getting saved. Fact is, the post request is working and I don't get any kind of error. The image is not getting saved at its desired place. Here is all my codes: model.py

class QuestionDiagram(models.Model):
question = models.ForeignKey(Question, on_delete=models.CASCADE, related_name='questionDiagrams')
user = models.ForeignKey(User, on_delete=models.CASCADE, null=True, blank=True)
question_diagram = models.ImageField(upload_to='question_diagram/')
question_diagram_text = models.CharField(max_length = 48)
date = models.DateTimeField(auto_now_add=True, blank=True, null=True)

forms.py

class QuestionDiagramForm(forms.ModelForm):
question_diagram = forms.CharField(widget = forms.FileInput(attrs={'class':'questionDiagram-questionDiagram'}))
question_diagram_text = forms.CharField(widget = forms.Textarea(attrs={'class':'questionDiagram-questionDiagramText', 'placeholder':'Describe', 'maxlength':'48'}))

class Meta:
    model = QuestionDiagram
    fields = ['question_diagram', 'question_diagram_text']

settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

in project urls.py (added mediaroot and mediaurl) ......

if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

views.py

class QuestionDiagramView(View):
form_class = QuestionDiagramForm
template_name = 'mechinpy/question_diagram.html'

def get(self, request, slug):
    form = self.form_class(None)
    return render(request, self.template_name, {'form':form})

def post(self, request, slug):
    question = get_object_or_404(Question, slug=slug)
    form = self.form_class(request.POST, request.FILES)

    if form.is_valid():
        questiondiagram = form.save(commit=False)
        questiondiagram.user = self.request.user
        questiondiagram.question = question
        questiondiagram.save()
        return redirect('mechinpy:detail', question.slug)

    else:
        return render(request, self.template_name, {'form':form})

html

<form class="form-block" method="POST" action="" enctype="multipart/form-data">
{% csrf_token %}

<!-- Question Diagram Error -->     
<span class="show-error">{{form.non_field_errors}}</span>

{% for fields in form %}
<span class="show-error"> {{fields.errors}} </span>

<!-- Question Diagram Fields -->
<div class="show-field"> {{fields}} </div>
{% endfor %}

<!-- Question Diagram Submit Button -->
<div class="submit-content">
    <button class="submit-button" type="submit"> Submit </button>
</div>

urls.py

path('m/question/<slug:slug>/diagram/add/', views.QuestionDiagramView.as_view(), name='question_diagram'),

Answer 1

Here:

class QuestionDiagramForm(forms.ModelForm):
    question_diagram = forms.CharField(...)

You want an ImageField , not a CharField . FWIW, you should just leave the default fields alone, you don't need to override them just to add css classes .