ClearableFileInput Django Form Fields

Listen as audio
ClearableFileInput Django Form Fields

Hello Techies,

In this blog, we will check different ClearableFileInput Django form fields (FileField, ImageField) with examples.

The fields of the form are classes themselves; They manage form data and perform validation when the form is submitted.

Syntax : FieldType(**kwargs) 

Different types of ClearableFileInput Django Form Fields

FileField

The default widget for this input is the ClearableFileInput. This normalizes the UploadedFile object by wrapping the file content and file name into one object. It can validate that a non-empty file is bound to the data form.

It has two optional arguments for validation, max_length and, allow_empty_file.

Syntax: FileField(**kwargs)

Example:

from django import forms

class ClearableFileInputForm(forms.Form):
    file_field = forms.FileField(label='File Upload', label_suffix = " : ",
                                  required = True,  disabled = False, allow_empty_file=True,
                                  max_length=500, widget=forms.ClearableFileInput(attrs={'class': 'form-control'}),
                                  error_messages = {'required':"This field is required."})

Let’s run the server and check the result.

Rendered HTML

Explanation:

Field OptionsDescription
labelLabel Argument allows you to specify a “field caption” label for this area.
label_suffixlabel_suffix argument allows you to insert some text after the field’s label.
max_lengthIf provided, this ensures that the file name is the maximum given length.
allow_empty_fileValidation will succeed even if the file content is empty.
requiredBy default, each field assumes a value as required, so you need to set required as a false to make it as not necessary.
widgetThe default widget for this field is ClearableFileInput. This argument lets specify widget classes to use when presenting this field. So you can use bootstrap class or any other CSS class for this field to decorate your field. Also, you can pass the choice list.
For eg. file_field = forms.FileField(widget=forms.ClearableFileInput(attrs={‘class’: ‘form-control’}))
error_messagesThis argument allows you to overwrite the default error message that the field will raise. Pass the error message you want to overwrite in the dictionary with the matching key.
disabledDisabled Boolean Argument, if set to true, disables the form field using the disabled HTML properties so that it cannot be edited by users.

ImageField

The default widget for this input is the ClearableFileInput. The empty value is None. This normalizes the UploadedFile object by wrapping the file content and file name into one object. It can validate that a non-empty file is bound to the data form. It also uses FileExtensionWaller to validate that file extension is supported by the pillow library.

The pillow must be installed with the support of the images you are using to use the ImageField. When you upload an image and if you encounter a corrupt image error, it means that Pillow doesn’t understand its format. To fix this issue, install the appropriate library and reinstall Pillow.

Syntax: ImageField(**kwargs)

Example:

from django import forms

class ClearableFileInputForm(forms.Form):
    image_field = forms.ImageField(label='Image Upload', label_suffix = " : ",
                                  required = True,  disabled = False,
                                  widget=forms.ClearableFileInput(attrs={'class': 'form-control'}),
                                  error_messages = {'required':"This field is required."})

Let’s run the server and check the result.

Rendered HTML

Explanation:

Field OptionsDescription
labelLabel Argument allows you to specify a “field caption” label for this area.
label_suffixlabel_suffix argument allows you to insert some text after the field’s label.
requiredBy default, each field assumes a value as required, so you need to set required as a false to make it not necessary.
widgetThe default widget for this field is ClearableFileInput. This Argument lets you specify widget classes to use when presenting this field. So you can use bootstrap class or any other CSS class for this field to decorate your field. Also, you can pass the choice list.
For eg. image_field= forms.ClearableFileInput(widget=forms.ClearableFileInput(attrs={‘class’: ‘form-control’}))
error_messagesThis argument allows you to overwrite the default error message that the field will raise. Pass the error message you want to overwrite in the dictionary with the matching key.
disabledDisabled Boolean Argument, if set to true, disables the form field using the disabled HTML properties so that it cannot be edited by users.

I hope you understand all the ClearableFileInput Django Form Fields. You can check the official site for more information.

Find the source code for ClearableFileInput Django Form Fields Github link at:

https://github.com/pranalikambli/django_form_fields

thank you

Leave a Comment