title: Get celery progress using AJAX in Django
body: <p>I am new in web development.I want to upload a file and process it in a Celery task and show progress percent using AJAX. I used some samples like <a href="https://rakibul.net/django-celery-1" rel="nofollow noreferrer">this</a> and here is my code:</p>
  
  <p><strong>views.py:</strong></p>
  
  <pre><code>def importnewdata(request):
  
      if request.method == 'POST':
          form = RawFileAddressForm(request.POST, request.FILES)
          if form.is_valid():
              file = request.FILES['file']
              file_name = default_storage.save("sample.txt", file)
              task = process_file.delay(file_name)
              return HttpResponse(json.dumps({'task_id': task.id}), content_type='application/json')
          else:
              return HttpResponse("Error1!")
      else:
  
          form = RawFileAddressForm()
          return render(request, 'modelmanager/importnewdata.html', {'form': form})
  
  
  
  def get_task_info(request):
      task_id = request.GET.get('task_id', None)
      if task_id is not None:
          task = AsyncResult(task_id)
          data = {
              'state': task.state,
              'result': task.result,
          }
          return HttpResponse(json.dumps(data), content_type='application/json')
      else:
          return HttpResponse('No job id given.')
  </code></pre>
  
  <p><strong>forms.py:</strong></p>
  
  <pre><code>class RawFileAddressForm(forms.Form):
      file = forms.FileField()
  </code></pre>
  
  <p><strong>importnewdata.html:</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;import new raw data to db&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body style="text-align: center;"&gt;
  
      &lt;h1&gt;select your file to process it!&lt;/h1&gt;
      &lt;progress id="progress-bar" value="0" max="100" style="display:none; margin-bottom: 1em;"&gt;&lt;/progress&gt;
  
      &lt;form id="process-raw-data" action="/modelmanager/importnewdata/" method="post" enctype="multipart/form-data"&gt;
          {% csrf_token %}
          {{  form  }}
          &lt;input type="submit" value="Submit"/&gt;
      &lt;/form&gt;
  
  &lt;script type="text/javascript"&gt;
      var frm = $('#process-raw-data');
      var pgrbar = $('#progress-bar');
  
      frm.submit(function () {
          $.ajax({
              type: frm.attr('method'),
              url: frm.attr('action'),
              data: frm.serialize(),
              success: function (data) {
                  if (data.task_id != null) {
                      get_task_info(data.task_id);
                  }
              },
              error: function (data) {
                  frm.html("error!");
              }
          });
          return false;
      });
  
      function get_task_info(task_id) {
          $.ajax({
              type: 'get',
              url: '/modelmanager/get-task-info/',
              data: {'task_id': task_id},
              success: function (data) {
                  frm.html('');
                  if (data.state == 'PENDING') {
                      frm.html('Please wait...');
                  }
                  else if (data.state == 'PROGRESS') {
                      pgrbar.css('display', 'inline');
                      pgrbar.val(data.result.percent);
                      frm.html('lines processed ' + data.result.current + ' out of ' + data.result.total);
                  }
                  else if(data.state == 'SUCCESS'){
                      pgrbar.css('display', 'none');
                      frm.html('Successfully Completed!');
  
                  }
                  if (data.state != 'SUCCESS') {
                      setTimeout(function () {
                          get_task_info(task_id)
                      }, 500);
                  }
              },
              error: function (data) {
                  frm.html("error!");
              }
          });
      }
  &lt;/script&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The problem is after click on submit button nothing happens. I got:</p>
  
  <blockquote>
    <p>"POST /modelmanager/importnewdata/ HTTP/1.1" 200 10</p>
  </blockquote>
  
  <p>In Wireshark I saw </p>
  
  <blockquote>
    <p>error1!</p>
  </blockquote>
  
  <p>in response. It means form is not valid, but when I remove JS part from html file it returns a json object with successfully created celery task id. That means form is valid.
  any helps. thanks.</p>