Django : Как мы можем отобразить имена файлов нескольких выбранных файлов перед их загрузкой

Я сделал приложение для загрузки файлов в хранилище blob и отображения их имен в таблице после загрузки. Однако я хотел бы изменить часть, в которой пользователь выбирает файлы. Я бы хотел, чтобы имена файлов, которые выбрал пользователь, отображались в шаблоне до того, как он нажмет на кнопку обновления. Например, чтобы пользователь мог убедиться, что именно эти файлы он хочет загрузить.

Лучше всего было бы, чтобы пользователь мог отменить выбор нескольких файлов, если он сделал ошибку. Возможно ли это сделать на Django ? Можно ли это сделать на Javascript? Кто-нибудь может показать мне, что я должен изменить или добавить ?

Спасибо

Вот мой Form.py

class FilesForm(forms.ModelForm):
    class Meta:
        model = UploadFiles
        fields = ['Filename']
        widgets = {'Filename': ClearableFileInput(attrs={'multiple': True}),}

Модели.py

class UploadFiles(models.Model):
    Id = models.IntegerField(db_column='ID')  # Field name made lowercase.
    Filename = models.CharField(db_column='FileName', max_length=255, blank=True, null=True)  # Field name made lowercase.
    PreviousFilename = models.CharField(db_column='FileNameBeforeIndex', max_length=255, blank=True, null=True)  # Field name made lowercase.
    User = models.CharField(db_column='User', max_length=255, blank=True, null=True)  # Field name made lowercase.
    SizeFile = models.IntegerField(db_column='Sizefile') 
    Uploaded_at = models.DateTimeField(db_column='Timestamp', auto_now_add=True)  # Field name made lowercase.
    ID_Customer = models.IntegerField(db_column='ID_Customer', blank=True, null=True)  # Field name made lowercase.

Виды.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')
        context['files_selected'] = files_selected
        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 %}

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