How to change browse button to look like modern drag&drop?

Question

I have created a django site, django site is working in this way. You go to the site, upload document with data and you get some results. You upload excel file, and you download excel file. In background I used pandas for calculations. In the end you can see code.

I have left one thing to finish. I want to create drag&drop for upload document. Chech picture 1, as I understand this is already drag&drop, just doesn't look as I would like to. I want to look like in picture 2.

Picture 1: Current

Picture 2: I would like to look like this.

Can I change the look that you seen on first image without using js?

This is html that I have and output is shown in picture 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 %}

This is function in views

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 })

Answer 1

I think the best option for you is to use dropzone.js. You can find documentation here.

You should include .js and .css. Also you can customize dropzone view on your own as described here (example of customizing dropzone in combination with Django, maybe will be useful for you)

You can try this (.js and .css files included directly in your template just for example, you can include easily include it in other way):

{% 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 %}