Django : Отображение содержимого файла на той же странице по щелчку на файле, указанном в таблице

У меня есть страница, на которой я загружаю файлы в хранилище blob, а затем они отображаются в таблице. Я хочу, чтобы пользователь мог визуализировать файлы, которые он загрузил. Поэтому я хотел бы добавить рядом с этим два вертикальных контейнера, один из которых будет отображать содержимое файла, когда пользователь нажмет на один из перечисленных файлов. Я не представляю, как мне включить это в представление "upload", см. ниже. Может быть, проще отобразить это в новом представлении? Кто-нибудь может показать мне, как я могу включить это в мое представление и шаблон?

Спасибо

views.py

@authenticated_user
@check_user_rights()
def upload(request, id_contrat):

    # INITIALIZE THE CONTEXT TO FIX THE AUTHENTICATION
    context = initialize_context(request)
    username = request.session.get('user').get('name')
        
    ############################################################
    # WE SET THE BLOB STORAGE PARAMETER
    ############################################################
    
    credential = ""
    account_url = ""
    container = ""

    blob_service_client = BlobServiceClient(account_url= account_url, credential= credential)

    ############################################################
    # UPLOAD FILES
    ############################################################

    if request.method == 'POST':
        form = FilesForm(request.POST, request.FILES)
        files_selected = request.FILES.getlist('Filename')
        if form.is_valid():
            
            for f in files_selected :
                
                #  THE PREVOUS FILENAME IS STORED
                previous_name = f.name
                content = f.read()
                
                # WE RENAME THE FILE
                ext = f.name.split('.')[-1]
                name = f.name.split('.')[0]
                f.name = "%s_%s.%s" % (name, datetime.now().strftime("%Y%m%d_%H%M%S"),ext)
                file_io =  BytesIO(content)


                blob_client = blob_service_client.get_blob_client(container=container, blob=f.name)
                blob_client.upload_blob(data=file_io)

                newfile = UploadFiles(User=username, Filename=f.name, PreviousFilename=previous_name, SizeFile=f.size, ID_Customer=id_contrat)
                newfile.save()
    else:
        form = FilesForm()

    # Load files for the list page
    files_list = UploadFiles.objects.filter(User=username).order_by('-Uploaded_at')

    ############################################################
    # PAGINATION
    ############################################################
    page = request.GET.get('page', 1)
    paginator = Paginator(files_list, 10)

    try:
        files = paginator.page(page)
    except PageNotAnInteger:
        files = paginator.page(1)
    except EmptyPage:
        files = paginator.page(paginator.num_pages)


    ############################################################
    # LOAD THE CONTEXT
    ############################################################
    context['files'] = files
    context['form'] = form
    context['page'] = page
    context['id_contrat'] = id_contrat


    return render(request, 'base/upload.html', context)

html

{% extends 'home.html' %}

{% load static %}

{% block content %}
<link rel="stylesheet" href="{% static 'test12.css' %}">
<div class="upload-app">
     
    <div class="upload-in">
        <h2>Upload</h2>

        <form method="post" enctype="multipart/form-data">
            
            {% csrf_token %}
            {{ form.as_p }}
            <button type="submit">Upload</button>
        </form>

        
        {% if url %}
            <p>Uploaded files : <a href="{{url}}">{{url}}</a></p>
        {% endif %}
    </div> 

    <div class="listfiles">
        <h2>Files Uploaded</h2>

        <table id="customers">
            <tr>
                <th>Filename</th>
                <th>Date</th>
                <th>Size</th>
            </tr>

            {% for file in files %}
            <tr>
                <td>{{ file.Filename }}</td>
                <td>{{ file.Uploaded_at | date:'d.m.Y H:i'}}</td>
                <td>{{ file.SizeFile | filesizeformat}}</td>

            </tr>
            {% endfor %}

        </table>

        <div class="pagination">
            {% if files.has_previous %}
            <a class="pagination-action" href="?page=1">
                <i class='bx bx-chevrons-left' aria-hidden="true"></i> </a>
            <a class="pagination-action" href="?page={{ files.previous_page_number }}">
                <i class='bx bx-chevron-left' aria-hidden="true"></i>
            </a>
            {% endif %}
            {% for num in files.paginator.page_range %}
                {% if files.number == num %}
                    <span class="pagination-number pagination-current">{{ num }}</span>
                {% elif num > files.number|add:'-3' and num < files.number|add:'3' %}
                    <a class="pagination-number" href="?page={{ num }}">{{ num }}</a>
                {% endif %}
            {% endfor %}
            {% if files.has_next %}
                <a class="pagination-action" href="?page={{ files.next_page_number }}">
                    <i class='bx bx-chevron-right' aria-hidden="true"></i>
                </a>
                <a class="pagination-action" href="?page={{ files.paginator.num_pages }}">
                    <i class='bx bx-chevrons-right' aria-hidden="true"></i>
                </a>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}

Вернуться на верх