How can I show/hide bootstrap spinner after uploading a file using Dropzone?

Question

I'm trying to build an app that receives a xlsx file from the user using Dropzone and then takes a while to redirect to a results page. I'd like to render a loading spinner while that is processing but can't seem to figure it out.

The examples I've seen until now have used JQuery and always have buttons in which the user has submitted the file which then can cause the spinner to render. Can anybody help me figure this out? It's probably very simple and as a beginner I'm having more trouble that necessary.

HTML Code

{% extends "layout.html" %}
{% block content %}
<div class="header-parent" style="height: 150px; display: grid;">
  <br>
  <br>
  <br>
  <div class="header-content" style="align-self: end;">
    <h1 class="text-center" style="font-family: 'Palanquin', sans-serif; color:#f88c33; text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black; ">Upload your file</h1>
    <br>
    <h5 class="text-center" style="font-family: 'Palanquin', sans-serif;">Text</h5>
  </div>
</div>
<div class="mx-auto" style="border: 2px dashed #f1a20e; margin: 8%; width: fit-content">
  <form action="{{ url_for('upload_file') }}" class="dropzone" id="my-dropzone" method="POST" enctype="multipart/form-data"></form>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.1/min/dropzone.min.js"></script>
  <script src="{{ url_for('static', filename='js/dropzone.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.js') }}"></script>
  <script>
    Dropzone.autoDiscover = false;
    
    $(function() {
      var myDropzone = new Dropzone("#my-dropzone");
      myDropzone.on("queuecomplete", function(file) {
        // Called when all files in the queue finish uploading.
        window.location = "{{ url_for('results') }}";
      });
    })
    </script>
</div>
{% endblock %}

Axekan Axekan · Accepted Answer · 2022-07-28T20:18:22

You could try having a hidden spinner on the page and then showing it when the Dropzone starts processing the files.

<div class="spinner-border" id="upload-spinner" style="display: none;" role="status"></div>
...
myDropZone.on('processing', function() {
    $('#upload-spinner').show();
}

Although I'm not really familiar with Dropzone and how it works, but you can have a look at the available events here if this doesn't work.

How can I show/hide bootstrap spinner after uploading a file using Dropzone?

1 Answers