Click here to Skip to main content
15,877,754 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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 }}

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

models code works perfectly


{% if post.file.url %}
    <video class="video-context" width="500px" height="500px" controls>
      <source src="{{ post.file.url }}" type="video/mp4">
  {% 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' %}
{% else %}

But that didnt work.
[no name] 25-Jul-22 20:53pm    
Both your "ifs" are the same; you're showing both classes at the same time: " ... video with image icon underneath ...". You need to hide one or the other.
Berk Ö. 26-Jul-22 4:29am    
Yeah thats my problem, but I have no idea how to hide one from another. Any Ideas?
Richard MacCutchan 26-Jul-22 4:34am    
You need to use a different name for the different file types. The HTML code cannot tell what you want since it uses exactly the same name for both.
Berk Ö. 26-Jul-22 4:35am    
Yeah i tried if statements with not the post.file.url, but the type, that looked like this: {% if type(video/mp4) %} but that didnt worked out.
Richard MacCutchan 26-Jul-22 6:45am    
No that will not work. You need a different reference in your model.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900