title: Django Image Cropping in inlineFormsetFactory using cropper
body: <p>I'm trying to make inline formset which one field gets chopped image as one of parameters. I have already done cropping with help of some tutorials but it works only with single model, when I tried to transform it to inline formset, new image is being saved in raw form - cropping isn't getting applied.</p>
  <p>tut I used:
  <a href="https://blog.pyplane.com/blog/how-to-crop-images-in-django-with-javascript/" rel="nofollow noreferrer">https://blog.pyplane.com/blog/how-to-crop-images-in-django-with-javascript/</a></p>
  <p>models look like that:</p>
  <pre><code>
  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)
  
  class Photo(models.Model):
      file = models.ImageField(upload_to=getImageURL2, default=&quot;static/default.png&quot;)
      uploaded = models.DateTimeField(auto_now_add=True)
      product = models.ForeignKey(Product, on_delete=models.CASCADE, null=True, blank=True)
  
  </code></pre>
  <p>forms.py</p>
  <pre><code>
  class ProductForm(forms.ModelForm):
      class Meta:
          model = Product
          fields='__all__'
  
  class PhotoForm(forms.ModelForm):
      class Meta:
          model = Photo
          fields = ('file',)
  
  ProductPhotoInlineFormset = inlineformset_factory(
      Product,
      Photo,
      fields=('file',),
      form=PhotoForm,
      extra=1,
      can_delete=False,
  
      )
  </code></pre>
  <p>view</p>
  <pre><code>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(&quot;Successfully created new product: {}&quot;.format(created_product))
          else:
              print(&quot;form is not valid&quot;)
              print(form.errors)
              print(form.non_field_errors())
      context['form'] = form
  
      
      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:
                  imageset_obj = f.save()
                  print(&quot;Successfully created new imagest: {}&quot;.format(imageset_obj))
                  return JsonResponse({'message': 'works'})
          else:
              print(formset.errors)
              print(formset.non_form_errors())
      context['formset'] = formset
  
      return render(request, &quot;Ecommerce/create_product_test.html&quot;, context)
  </code></pre>
  <p>rendered template:</p>
  <pre><code>{% extends 'base.html' %}
  {% block content %}
      &lt;div id=&quot;alert-box&quot;&gt;
          
      &lt;/div&gt;
  
      &lt;div id=&quot;image-box&quot; class=&quot;mb-3&quot;&gt;
          
      &lt;/div&gt;
  
      &lt;div id=&quot;image-box&quot;&gt;&lt;/div&gt;  
          &lt;form method=&quot;POST&quot; enctype=&quot;multipart/form-data&quot; action=&quot;&quot; id=&quot;image-form&quot;&gt;
          
              
              {{formset.management_form}}
              {% csrf_token %}
              {{form}}
              
              
              
              {% for form in formset %}
                  {{form.as_p}}
              {% endfor %}
                  
              
          
              &lt;button class=&quot;btn btn-primary mt-3 not-visible&quot; id=&quot;confirm-btn&quot;&gt;confirm&lt;/button&gt;
              
          &lt;/form&gt;
  {% endblock content %}
  </code></pre>
  <p>js -- &gt; linked by using  in base.html</p>
  <pre><code>const alertBox = document.getElementById('alert-box')
  const imageBox = document.getElementById('image-box')
  const imageForm = document.getElementById('image-form')
  
  const nameField = document.getElementById('id_name')
  const categoryField = document.getElementById('id_category')
  const availabilityField = document.getElementById('id_availability')
  const priceField = document.getElementById('id_price')
  
  const confirmBtn = document.getElementById('confirm-btn')
  //const input = document.getElementById('id_file')
  const input = document.getElementById('id_photo_set-0-file')
  
  const csrf = document.getElementsByName('csrfmiddlewaretoken')
  
  input.addEventListener('change', ()=&gt;{
      console.log(&quot;changed&quot;)
      confirmBtn.classList.remove('not-visible')
  
      const img_data = input.files[0]
      const url = URL.createObjectURL(img_data)
      imageBox.innerHTML = `&lt;img src=&quot;${url}&quot; id=&quot;image&quot; width=&quot;700px&quot;&gt;`
  
      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', ()=&gt;{
          
          cropper.getCroppedCanvas().toBlob((blob)=&gt;{
              console.log('confirmed')
              console.log(blob)
              const fd = new FormData()
  
              fd.append('csrfmiddlewaretoken', csrf[0].value)
              fd.append('file', blob, 'my-image.png') /// some issue here
              //fd.append('name', nameField.value)
              //fd.append('category', categoryField.value)
              //fd.append('availability', availabilityField.value)
              //fd.append('price', priceField.value)
              //fd.append('photo_set-TOTAL_FORMS', '1')
              //fd.append('photo_set-INITIAL_FORMS', '0')
  
              $.ajax({
                  type:'POST',
                  url: imageForm.action,
                  enctype: 'multipart/form-data',
                  data: fd,
  
                  success: function(response){
                      console.log(response)
                      alertBox.innerHTML = fd.get('file')
  
                  },
                  error: function(error){
                      console.log(error)
                      
                  },
                  cache: false,
                  contentType: false,
                  processData: false,
              })
          })
      })
  })
  
  </code></pre>
  <p>new product and image objects are being made  correctly, but saved image is not cropped. It's in raw form as if there were no js used.
  What should I change ? I guess there is some issue with passing file to FormData in js but I do not really know how to fix it</p>