How do I display just the file thats being uploaded, either image or video

See more:

CSS

Python

HTML5

Django

ive been working on a social media website where you can upload images and videos and follow other users.

I managed to upload and display uploaded files to the website.

I used FileField to load the image and video files, but when I implement it in my Template it shows both spaces, because there both using the same source url {{ source.file.url }}

models.py

class Post(models.Model):
    title = models.CharField(max_length=150)
    file =  models.FileField(upload_to='uploads/%Y-%m-%d')

models code works perfectly

feeds.html

{% if post.file.url %}
    <video class="video-context" width="500px" height="500px" controls>
      <source src="{{ post.file.url }}" type="video/mp4">
  </video>
  {% endif %}
 
  {% if post.file.url %}
  <img class="image-context" src="{{ post.file.url }}" type="image/jpg" type="image/jpeg">
  {% endif %}

So if I upload a Image, the Image is shown, but with an Empty Video Player over the Image.

When I upload a Video, the Video is shown, but with a Image Icon underneath it.


How can I just display the file thats uploaded?


How is it possible to difference the upload types, but still using FileField?

What I have tried:

I tried to do different IF Statements like:

{% if type='image/jpg' %}
<video>
{% else %}
<img>

But that didnt work.