Обрезка изображений на Django в ilineformset

Я пытаюсь сделать inline formset, в котором одно поле получает обрезанное изображение как один из параметров. Я уже делал обрезку с помощью некоторых руководств, но это работает только с одной моделью, когда я попытался преобразовать ее в inline formset, новое изображение сохраняется в необработанном виде - обрезка не применяется.

модели выглядят следующим образом:

class Product(models.Model):
    name = models.CharField(max_length=200)
    category = models.ForeignKey(Category, on_delete=models.CASCADE)
    availability = models.IntegerField()
    price = models.DecimalField(max_digits=5, decimal_places=2)

    def __str__(self):
        return self.name

    def get_image_url(self):
        return Image.objects.get(product=self).file.url

class Photo(models.Model):
    file = models.ImageField(upload_to=getImageURL2, default="static/default.png")
    uploaded = models.DateTimeField(auto_now_add=True)
    product = models.ForeignKey(Product, on_delete=models.CASCADE, null=True, blank=True)

    def __str__(self):
        return str(self.pk) 

Формы:

class PhotoForm(forms.ModelForm):
    class Meta:
        model = Photo
        fields = ('file',)

ProductPhotoInlineFormset = inlineformset_factory(
    Product,
    Photo,
    fields=('file',),
    form=PhotoForm,
    extra=1,
    can_delete=False,

    )

просмотров:

def ProductCreateView(request):

    context = {}
    created_product = None
    form = ProductForm()

    if request.method == 'POST':
        print(request.POST)
        form = ProductForm(request.POST)
        if form.is_valid():
            created_product = form.save()
            print("Successfully created new product: {}".format(created_product))
        else:
            print("form is not valid")
            print(form.errors)
            print(form.non_field_errors())
            
    context['form'] = form

    created_images = []
    formset = ProductPhotoInlineFormset()
    if request.method=='POST':
        formset = ProductPhotoInlineFormset(request.POST or None, request.FILES or None, instance=created_product)
        if formset.is_valid():
            for f in formset:
                image = f.save()
                created_images.append(image)
            
                print("Successfully created new imagest: {}".format(image))
            return JsonResponse({'message': 'works'})
        else:
            print(formset.errors)
            print(formset.non_form_errors())
    context['formset'] = formset

    return render(request, "Ecommerce/create_product_test.html", context)

create_propduct_test.html

{% extends 'base.html' %}
{% block content %}
    <div id="alert-box">
        
    </div>

    <div id="image-box" class="mb-3">
        
    </div>

    <div id="image-box"></div>  
        <form method="POST" enctype="multipart/form-data" action="" id="image-form">
        
            
            {{formset.management_form}}
            {% csrf_token %}
            {{form}}
            
            
            
            {% for form in formset %}
                {{form.as_p}}
            {% endfor %}
                
            
        
            <button class="btn btn-primary mt-3 not-visible" id="confirm-btn">confirm</button>
            
        </form>
{% endblock content %}

шаблон base.html содержит этот js файл

const alertBox = document.getElementById('alert-box')
const imageBox = document.getElementById('image-box')
const imageForm = document.getElementById('image-form')


const confirmBtn = document.getElementById('confirm-btn')
//const input = document.getElementById('id_file') <--- I used it in form of single model
const input = document.getElementById('id_photo_set-0-file')

const csrf = document.getElementsByName('csrfmiddlewaretoken')

input.addEventListener('change', ()=>{
    console.log("changed")
    confirmBtn.classList.remove('not-visible')

    const img_data = input.files[0]
    const url = URL.createObjectURL(img_data)
    imageBox.innerHTML = `<img src="${url}" id="image" width="500px">`

    var $image = $('#image');



    $image.cropper({
        aspectRatio: 1 / 1,
        crop: function(event){
            console.log(event.detail.x);
            console.log(event.detail.y);
            console.log(event.detail.width);
            console.log(event.detail.height);
            console.log(event.detail.rotate);
            console.log(event.detail.scaleX);
            console.log(event.detail.scaleY);
        }
    });

    var cropper = $image.data('cropper');

    confirmBtn.addEventListener('click', ()=>{
        
        cropper.getCroppedCanvas().toBlob((blob)=>{
            
            const data = new FormData(this)
            
            $.ajax({
                type:'POST',
                
                url: imageForm.action,
                enctype: 'multipart/form-data',
                data: data,
                success: function(response){
                    console.log(response)
                },
                error: function(error){
                    console.log(error)
                },
                cache: false,
                contentType: false,
                processData: false,
            })
        })
    })
})

После отправки формы я вижу "Successfully created new product:" и "Successfully created new imagest:" в консоли, но сохраненное изображение находится в сыром виде, как я уже говорил. Где проблема?

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