Insérer un attribut onchange dans un input de formulaire django

Bonjour à tous,
je cherche actuellement à ajouter un attribut à une input se trouvant dans un FileForm django.

Voici mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
{% extends "base.html" %}
{% load static %}
{% block style %}
<link rel="stylesheet" href="{% static "quizz/upload_file.css"%}">
{% endblock %}
{% block title %}Envoi de fichier{% endblock %}
{% block content %}
<div class="file-upload">
        <div class="image-upload-wrap">
            <form action="fichier" method="post">
            <!--  <input id="id_file" type='file' onchange="readURL(this);" />   JE VOUDRAIS QUE L'INPUT DU FILEFORM SOIT COMME CELUI-LÀ-->
            {% if form %}
            {% csrf_token %}
            {{ form }} <!-- CETTE FORME LÀ -->
            <div class="drag-text">
                <h3>Déposez ou sélectionnez un fichier</h3>
            </div>
            </form>
            {% endif %}
        </div>
        <div class="file-upload-content">
            <img class="file-upload-image" src="#" alt="logo" />
            <div class="image-title-wrap">
                <button type="button" onclick="removeUpload()" class="remove-image">Enlever <span class="image-title">Uploaded Image</span></button>
                <input type="submit" class="save-file" value="Valider et corriger">
 
            </div>
        </div>
</div>
{% endblock %}
{% block javascript %}
<script class="jsbin" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="{% static "js/upload_file.js" %}"></script>
{% endblock %}

Mon code js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var fichier = undefined;
var path = "/static/img/";
 
function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
 
        reader.onload = function(e) {
            $('.image-upload-wrap').hide();
            if (returnExtension(input.files[0].name) === "pdf") {
                $('.file-upload-image').attr('src', path + "pdf.png");
                $('.file-upload-image').show();
            } else if (returnExtension(input.files[0].name) === "gz") {
                $('.file-upload-image').attr('src', path + "tar.png");
                $('.file-upload-image').show();
            } else if (returnExtension(input.files[0].name) === "zip") {
                $('.file-upload-image').attr('src', path + "zip.png");
                $('.file-upload-image').show();
            } else {
                $('.file-upload-image').hide();
                removeUpload();
                alert("Veuillez sélectionner un format de fichier compatible (.zip, .tar.gz, .pdf)");
                return;
            }
            fichier = e.target.result
            $('.file-upload-content').show();
            $('.image-title').html(input.files[0].name);
        };
 
        reader.readAsDataURL(input.files[0]);
 
    } else {
        removeUpload();
    }
}
 
function removeUpload() {
    $('#id_file').replaceWith($('#id_file').clone());
    $('.file-upload-content').hide();
    $('.image-upload-wrap').show();
}
 
// $('.image-upload-wrap').bind('dragover', function() {
//     $('.image-upload-wrap').addClass('image-dropping');
// });
 
// $('.image-upload-wrap').bind('dragleave', function() {
//     $('.image-upload-wrap').removeClass('image-dropping');
// });
 
function returnExtension(filename) {
    return filename.split('.').pop();
}

Et ma forme :

Code:

1
2
class UploadFileForm(forms.Form):
    file = forms.FileField(label="")