How to check file arrived in JavaScript and HttpResponse object in Django

Question

My code is working fine, but I can't figure out how to catch a file arrives message in JavaScript.

I'm working with Django 2.1.

Template:

...

<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

Does this answer your question? [onchange file input change img src and change image color](https://stackoverflow.com/questions/24837646/onchange-file-input-change-img-src-and-change-image-color) — Sumithran, Dec 27 '21 at 14:21
I'm not sure if I understand exactly what problem you want to solve here. If you want to run some javascript after the form is submitted and you await a file response from the server, you should write a javascript submit handler instead of the default html form submit. Then you can display a spinner icon, or something like that while you await the response. This can be done using plain javascript. There's probably some jQuery plugin you could use too, if you don't want to use a full client-side javascript framework like React etc. — Håken Lid, Dec 27 '21 at 14:24
This question has some examples of how you can do this with plain javascript and the standard fetch api. https://stackoverflow.com/questions/36067767/how-do-i-upload-a-file-with-the-js-fetch-api — Håken Lid, Dec 27 '21 at 14:30
When the form is submitted , I hide some html controls, the problem is when django send back the file, the browser dialog just appear. — George Poliovei, Dec 27 '21 at 14:31
Then you need to use javascript to handle the form submit http request and response. You can do that with the standard Fetch api or using a js library such as Axios or jQuery. Fetch and Axios both use javascript Promise to execute some function when the file response returns from the server. You'll find lots of example code and tutorials for this kind of stuff if you search. — Håken Lid, Dec 27 '21 at 14:35
You mean that the only way to achieve it is by sending the form from javascripts? — George Poliovei, Dec 27 '21 at 14:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/240483/discussion-between-george-poliovei-and-haken-lid). — George Poliovei, Dec 27 '21 at 19:28

score 0 · Accepted Answer · answered Dec 30 '21 at 15:21

After read some books and many test, I found a solution

All backend code has no changes and only I improved the javascript code

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

     // ....
}

When client submit Form, everythings works as expected.

The browser open it dialog automatically when file arrive after my processes done at server side.

How to check file arrived in JavaScript and HttpResponse object in Django

1 Answers1

Linked