Как изменить кнопку просмотра, чтобы она выглядела как современный drag&drop?

Я создал django сайт, django сайт работает следующим образом. Вы заходите на сайт, загружаете документ с данными и получаете некоторые результаты. Вы загружаете файл excel, и вы загружаете файл excel. В фоновом режиме я использовал pandas для вычислений. В конце вы можете увидеть код.

Осталось доделать одну вещь. Я хочу создать drag&drop для загрузки документа. Посмотрите картинку 1, как я понимаю это уже drag&drop, просто выглядит не так как мне хотелось бы. Я хочу выглядеть как на картинке 2.

Рисунок 1: Текущий

enter image description here

Рисунок 2: Я бы хотел выглядеть вот так.

enter image description here

Могу ли я изменить вид, который вы видите на первом изображении, не используя js?

Это html, который у меня есть и вывод показан на рисунке 1...

{% extends "base.html" %}
{% load static %}
{% block content %}
      <form action="{% url "cal" %}" method="post" enctype="multipart/form-data" class="dropzone">
      {% csrf_token %}
      {{ message }}
      <p>{{ form.non_field_errors }}</p>
      <p>{{ form.docfile.label_tag }} {{ form.docfile.help_text }}</p>
      <p>
            {{ form.docfile.errors }}
            {{ form.docfile }}
      </p>
      <p><input type="submit" value="Upload and Download!"/></p>
      </form>
{% endblock content %}

Это функция в представлениях

def OnlyCAL(request):
    if request.method == "POST":
        form = DocumentForm(request.POST, request.FILES)
        if form.is_valid():
            output = io.BytesIO()
            newdoc = request.FILES['docfile']
                #pandas calculations

            response = HttpResponse(
                output, content_type='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')
            response['Content-Disposition'] = 'attachment; filename=%s' % filename
            return response
    else:
        form = DocumentForm()
    return render(request, 'cal.html', { 'form': form, 'page_title':page_title })

Я думаю, что лучшим вариантом для вас будет использование dropzone.js. Вы можете найти документацию здесь.

Вы должны включить .js и .css. Также вы можете настроить dropzone view самостоятельно, как описано здесь ( пример настройки dropzone в сочетании с Django, возможно, будет вам полезен)

Вы можете попробовать следующее (файлы .js и .css включены непосредственно в ваш шаблон просто для примера, вы можете легко включить их другим способом):

{% extends "base.html" %}
{% load static %}
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"</script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />
{% block content %}
  <form id="dropZoneForm" action="{% url "cal" %}" method="post" enctype="multipart/form-data" class="dropzone needsclick dz-clickable">
  {% csrf_token %}
  <input type="hidden" name="abc" value="i am hidden value">
    <div class="fallback">
        <input name="file" type="file"/>
    </div>
  <input type="submit" id="submit-all" value="Upload and Download" class="custom-button" style="float: right">
  </form>
{% endblock content %}
Вернуться на верх