show image file after choosing it before uploading , django

Question

I have a table with ImageField and I want to show an image thumb line near the choose file button before the user submits in form,,

when the user picks the image the link is already provided like this :

and I want to catch the path to the file ( add_user_but.png) after use picks it .. how to do it !?

I know how to do it in normal plain HTML like it is in the question :

Show an image preview before upload

but in Django here is how my models.py forms.py and HTML files look like :

models.py

class Item(models.Model):
    # custom validators
    alphanumeric = RegexValidator(r'^[0-9a-zA-Z]*$', 'Only alphanumeric characters are allowed.')

    # fields
    dress_name = models.ForeignKey(Name, on_delete=models.DO_NOTHING, blank=False, verbose_name='نوع الفستان',)
    dress_rate = models.ForeignKey(Rate, on_delete=models.DO_NOTHING, blank=False, verbose_name='تصنيف الفستان',)
    dress_size = models.ForeignKey(Size, on_delete=models.DO_NOTHING, verbose_name='مقاس الفستان', blank=False)
    dress_color = models.CharField(max_length=50, verbose_name='لون الفستان', blank=False)
    dress_description = models.TextField(max_length=800, verbose_name=' وصف إضافى للفستان', blank=False)
    dress_image1 = models.ImageField(upload_to='documents/%Y/%m/%d', null=False, blank=False, verbose_name='الصورة الأساسية للفستان',
                                     help_text='لا يمكنك تركها فارغة', default="img/default_dress_image.png")
    dress_image2 = models.ImageField(upload_to='documents/%Y/%m/%d', null=False, blank=False, verbose_name='صورة إضافية ', default="img/default_dress_image.png")
    dress_image3 = models.ImageField(upload_to='documents/%Y/%m/%d', null=False, blank=False, verbose_name='صورة إضافة ', default="img/default_dress_image.png")
    dress_image4 = models.ImageField(upload_to='documents/%Y/%m/%d', null=False, blank=False, verbose_name='صورة إضافة ', default="img/default_dress_image.png")
    dress_image5 = models.ImageField(upload_to='documents/%Y/%m/%d', null=False, blank=False, verbose_name='صورة إضافة ', default="img/default_dress_image.png")
    dress_action = models.ForeignKey(Action, on_delete=models.DO_NOTHING, verbose_name='الفستان معروض لل ',
                                     help_text='للبيع او للإيجار ', blank=False)
    dress_price = models.IntegerField(default=1, verbose_name='السعر', blank=False)
    dress_mobile = models.CharField(max_length=20, validators=[alphanumeric], verbose_name='رقم الهاتف ', blank=False)
    created_by = models.CharField(max_length=250,)
    created_username = models.CharField(max_length=250, default='unknown')
    created_at = models.DateTimeField(auto_now=True)
    dress_active = models.BooleanField(default=False)
    dress_special = models.BooleanField(default=False)
    dress_town = models.ForeignKey(Town, on_delete=models.DO_NOTHING, verbose_name='المحافظة', blank=False)

forms.py

class AddDressForm(ModelForm):
    class Meta:
        model = Item
        exclude = ['created_by', 'created_at', 'dress_active', 'dress_special', 'created_username']

HTML

  <form action="" method="post" name="AddDressForm" align="right" enctype="multipart/form-data">
    {% csrf_token %}
    {{ add_dress_form.non_field_errors }}
    {% for field in add_dress_form %}
        <span style="color: red; ">{{ field.errors }}</span>
        <div class="row">
        <div class="col">
        {{ field.label_tag }}&nbsp;{% if field.field.required %}<span style="color: red; font-size: xx-small; ">مطلوب</span> {% endif %}
            </div>
            <div class="col" align="right">
            {{ field }}
            </div>
        </div>
        <br>
    {% endfor %}
     <input type="submit" class="btn btn-success" style="width: 100px;" value="إضافة" />
            </form>