Django form submit button validation

Using Django
1

I have an issue of validating submit button on a form in Django.
The code in 3 pages are shown here.
In the html page I have a file upload submit form.
In the forms.py I have a form which consists of one file upload document and finally
in the models.py, I have one file upload field.
In general when a user click on the file upload button in this form it works very well but I want to make sure that the user first upload file and then click on the submit button.
How can I validate the file upload form in this case?
Looking for your suggestions

html page:

{% csrf_token %}

{{ form.docfile.label_tag }} {{ form.docfile.help_text }}

{{ form.docfile.errors }}{{ form.docfile }}

submit

forms.py
from django import forms
class DocumentForm(forms.Form):
docfile = forms.FileField(label=‘Select file to transcribe’)

models.py
from django.db import models
class Document(models.Model):
docfile = models.FileField(upload_to=‘dir-name’)

2

If I’m understanding you, you have a page with an “Upload” field, and a “Submit” button on the same page - and you want to ensure that the person identifies a file in the upload field before they click submit on that page. Am I correct?

If so, that’s something that needs to be done with JavaScript in the browser.

When you have a file upload field, the file is not actually uploaded until the form is POSTed back to the server - the server has no way to know whether or not a file has been selected until the form is submitted.

You could initially render that page with the Submit button disabled, and then have some JavaScript code enable that button when the file upload widget is used.

3

Thank you for your message.
Yes, you are right, I have to use code for html form submit button like:
submit

But my question is how can I retrieve the file uploaded field to verify whether file is uploaded or not.

e.g in Javascript the code should be like this:
#retreive submit button in javascript
document.getElementById(“myBtn”).disabled = false;
But how can I retrieve the value of form file upload field given the above code.
Looking forward for your answer.

4

The MDN web docs for the file API has all the information you need for working with that type of input field.