title: How to upload a file and show progress bar in Django?
body: <p>I have written code to upload a file in Django as follows:</p>
  
  <pre><code>def upload(request):
  if request.method == 'POST':
      form = UploadFileForm(request.POST, request.FILES)
      if form.is_valid():
          handle_uploaded_file(request.FILES['file'])
          return render_to_response('uploadsuccess.html')
  else:
      form = UploadFileForm()  
  return render_to_response('upload.html', {'form': form})
  
  
  def handle_uploaded_file(f):
      filename = "/media/Data/static/Data/" + f.name
      destination = open(filename, 'wb+')
      for chunk in f.chunks():
          destination.write(chunk)
      destination.close()
  </code></pre>
  
  <p>The code works fine for me. However, I don't know how should I modify this code to show a progress bar on the client side.</p>
  
  <p>My html page looks like:</p>
  
  <pre><code>{% extends "index_base.html" %}
  
  {% block content %}
  &lt;script src="/media/js/functions.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script  src="/media/js/jquery.js" type="text/javascript"&gt;
      &lt;/script&gt;
  &lt;div id="main_container"&gt;
  
  {% include "includes/nav.html"  %}
  
  &lt;!------- Main Contents  ----------&gt;
      &lt;div id="contents_holder"&gt;
          &lt;div id="contents"&gt;
              &lt;div id="c_banner"&gt;
                      &lt;span class="main_title"&gt;Upload File&lt;/span&gt;
                  &lt;/div&gt;
              &lt;div id="setting"&gt;
              &lt;form name="post" action="/upload.psp/" method="post" enctype="multipart/form-data"&gt;
                  &lt;h2&gt;Upload File&lt;/h2&gt;&lt;/br&gt;
                  &lt;p&gt;{{ form.file.label_tag }}&amp;nbsp;&amp;nbsp;{{ form.file }}&lt;/p&gt;&lt;/br&gt;
                  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                  &lt;input type="submit" value="Upload" name="uploadButton" /&gt;
                  &amp;nbsp;&amp;nbsp;&lt;input type="button" value="Cancel" name="cancelUploadButton" onclick ="cancelUploadClicked()"/&gt;
                  &lt;input type="hidden" value="title" name="title" id="title" /&gt;
              &lt;/form&gt; 
                  &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!------- Main Contents  Finished ----------&gt;
  {% endblock %}
  </code></pre>
  
  <p>Can anybody help me integrate Upload progress bar with this code?</p>
  
  <p>Thanks in advance.</p>