How to style image field in html form

Using Django
1

I created an account settings page where the user can update their profile. One of the things they can change is their profile picture. I am using the table tag to arrange the settings form as you can see below:

<form action="" method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <table class="user_settings_table">
                        <tbody>
                            {% for form in user_form %}
                                <tr>
                                    <td class="table_labels">{{form.label}}</td>
                                    <td>{{form}}</td>
                                </tr>
                            {% endfor %}
                            {% for form in profile_form %}
                                <tr>
                                    <td class="table_labels">{{form.label}}</td>
                                    <td>{{form}}</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <input type="submit" class="danger_btn" value="Update Profile">
                </form>

This is how the page currently looks like:

forumpic
forumpic1819×558 34.3 KB

I want to know how we can edit the imagefield in django. For example, I may want to remove the clear checkbox and handle that automatically when the user changes his/her profile picture or I may want to only show the name of the image file and not the path.

2

The widget being used is the ClearableFileInput widget in forms.widgets. The template is forms.widgets.clearable_file_input. You can use those as a pattern for building your own template.

I’ll point out that the “Clear” option allows the person to delete the current image without replacing it - you might want to keep that feature available.