Как проверить прибытие файла в javascript и объект HttpResponse django

Привет всем и счастливого Рождества На самом деле мой код работает нормально, но я не могу понять, как поймать сообщение о прибытии файла в javascript

Я работаю с django 2.1

Шаблон:

...

<form method="POST" enctype="multipart/form-data">
    {% csrf_token %}
        <div class="form-group">
            ...
            <input type="file" id="prd" name="prd" required>
        </div>
            ...
        <input id="btn_ini" type="submit" name="submit" value="Init process">
</form>
...
   <script type="text/javascript">

       document.addEventListener('???', function(){
            // I wish indicate to the user that the process is runnning and don't close the page.

            // at the moment the logic is working as spected but I can't achieve how to check in javascript  when file arrives. 

       })

   </script>
</body>
</html>

#views

def add_destination(request):
   ...
   if request.method == 'POST':
      ...
      return handle_uploaded_file(prd)
   return render(request, 'add-destination.html')


def handle_uploaded_file(f)
   ...
   file = # processing file
   ...
   with open(file, 'rb') as f:
      file_data = f.read()
      response = HttpResponse(
      file_data, content_type='application/force-dowload')
      response['Content-Disposition'] = 'attachment; filename="proc_{}"'.format(incoming_file_name)
      return response
return None

После прочтения нескольких книг и многих тестов, я нашел решение

Весь код бэкенда без изменений и только я улучшил код javascript

<script type="text/javascript">

    const form = document.querySelector('form');
    const url = '{% url "app:index" %}';
    const loading = document.querySelector('.loading');
    let objUrl = null;

    form.submit = async e => {
       e.preventDefault()

       // ...

       const formData = new FormData(e.target);

      // fetch file from server
      const result = await fetch(url,{
          method:'POST',
          data:formData
      })

     // convert it to blob
     const blob = await result.blob()

     // Create obj locally
     objUrl = URL.createObjectURL(blob)

     //revoke url
     URL.revokeObjectURL(blob)

     // ....
}

Когда клиент отправляет форму, все работает так, как ожидалось.

Браузер открывает диалог автоматически, когда файл прибывает после моих процессов, выполненных на стороне сервера.

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