Загрузка файла и получение прогресс-бара celery с помощью ajax в django

Я хочу загрузить файл, обработать его в задаче Celery и показать индикатор выполнения с помощью AJAX. но я не получил решения. Можете ли вы помочь мне с этой задачей?

Views.py

def index(request):

    cntx = {}
    if request.method == 'POST':
        form = RawFileAddressForm(request.POST, request.FILES)
        if form.is_valid():
            file = request.FILES['file']
            fs = FileSystemStorage()
            file_name = fs.save(file.name, file)
           
            task = process_file.delay(file_name=file.name)
            cntx['task_id'] = task.id
           # return render(request, 'index.html', cntx)
            return HttpResponseRedirect(reverse('get_task_info') + '?task=' +task.id)
        else:
            return render(request, 'index.html', {'form':form})
    else:

            form = RawFileAddressForm()
            return render(request, 'index.html', {'form': form})

get_task_info file

def get_task_info(request):
    if 'task' in request.GET:
        task_id = request.GET['task']
    else:
        return HttpResponse('no job id given')

    task = AsyncResult(task_id)
    data = {
            'state': task.state,
            'result': task.result,
        }
    return HttpResponse(json.dumps(data), content_type='application/json')

forms.py

class RawFileAddressForm(forms.Form):
    file = forms.FileField()

Task.py

@shared_task(bind=True)
def process_file(path, file_name):

    print('Uploading image...')

    sleep(10)
    
    fs = FileSystemStorage()

    instance = Tooltype(image=file_name)

    instance.save()


    fs.delete(file_name)

    print('Uploaded!')

index.html

<body>
  <h1>select your file to process it!</h1>
    <progress id="progress-bar" value="0" max="100" style="display:none; margin-bottom: 1em;"></progress>

    <form id="process-raw-data" action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {{  form  }}
        <input type="submit" value="Submit" />
    </form>

{% if task_id %}
    <script type="text/javascript">
        var taskid = "{{task_id}}";
        var frm = $('#process-raw-data');
        var pgrbar = $('#progress-bar');

        get_task_info(taskid);

        function get_task_info(tid) {
            $.ajax({
                type: 'get',
                url: 'get_task_info/',
                data: {'task_id': tid},
                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(tid)
                        }, 500);
                    }
                },
                error: function (data) {
                    frm.html("error!");
                }
            });
        }
    </script>
{% endif %}

когда я нажимаю на кнопку submit buttin, ничего не происходит, но задание успешно выполнено, а изображение не загружается, и процесс не показывает индикатор выполнения. и я получил

"GET /get_task_info/?task_id=682365a5-1d96-4eed-a3f3-ececc12fdaa2 HTTP/1.1" 200 15

затем я завершаю работу сервера, после чего появляется сообщение

error1

спасибо и застрял на этом задании, пожалуйста, помогите мне.

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