Django и Javascript Загрузка изображений с прогресс-баром

Добрый день, я пытаюсь загрузить несколько изображений в django с индикатором выполнения. В настоящее время у меня есть рабочее решение только для одного изображения, но теперь я хочу добавить больше полей и мне нужно показать индикатор выполнения для всех изображений, которые я загружаю. Ниже приведен мой рабочий код, а закомментированный код в forms.py - это новые поля, которые я хочу добавить.

models.py

class ProductImage(models.Model):
    product = models.OneToOneField(Product, on_delete=models.CASCADE, null=True, blank=True)
    main_image = models.ImageField(max_length=255, upload_to=get_product_image_additional_filepath, null=True, blank=True)
    img_one = models.ImageField(max_length=255, upload_to=get_product_image_additional_filepath, null=True, blank=True)
    img_two = models.ImageField(max_length=255, upload_to=get_product_image_additional_filepath, null=True, blank=True)
    img_three = models.ImageField(max_length=255, upload_to=get_product_image_additional_filepath, null=True, blank=True)
    img_four = models.ImageField(max_length=255, upload_to=get_product_image_additional_filepath, null=True, blank=True)
    img_five = models.ImageField(max_length=255, upload_to=get_product_image_additional_filepath, null=True, blank=True)

forms.py

class StoreDashboardProductUpdateForm(forms.ModelForm):
    class Meta:
        model = ProductImage
        fields = [                    
                    "main_image",
                    # "img_one",
                    # "img_two",
                    # "img_three",
                    # "img_four",
                    # "img_five"
                ]

views.py

def store_dashboard_product_update_view(request, slug, product_slug, pk):
    product = get_object_or_404(Product, pk=pk)

    form = StoreDashboardProductUpdateForm(request.POST or None, request.FILES or None)
    
    if request.is_ajax():
        if form.is_valid():
            form.instance.product = product
            form.save()
            return JsonResponse({'message': 'hell yeah'})


    context = {
        'form': form,
        "object": product
    }
    return render(request, 'store/dashboard/product_update.html', context)

product_update.html

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