title: Django ajax image upload and cropped image saving
body: <p>I want to upload image with ajax, crop the uploaded image and save the image.</p>
  
  <p>I uses pillow 5.1.0., django 2.0.5.</p>
  
  <p><strong>models.py:</strong></p>
  
  <pre><code>class TestPhoto(models.Model):
      file = models.ImageField()
  </code></pre>
  
  <p><strong>forms.py:</strong></p>
  
  <pre><code>class TestPhotoFrom(forms.ModelForm):
      # this is not necessary part, you can ignore it.
      x = forms.FloatField(widget=forms.HiddenInput())
      y = forms.FloatField(widget=forms.HiddenInput())
  
      class Meta:
          model = TestPhoto
          fields = ('file', 'x', 'y',)
  </code></pre>
  
  <p><strong>template.html:</strong></p>
  
  <pre><code>  &lt;form method="post" enctype="multipart/form-data" id="formUpload"&gt;
      {% csrf_token %}
      {{ form }}
    &lt;/form&gt;
  &lt;button class="js-crop-and-upload"&gt;button&lt;/button&gt;
  &lt;script&gt;
  $(function () {
  $(".js-crop-and-upload").click(function () {
          //Get file from form.
          var form_upload = $("#formUpload")[0];
          var form_data = new FormData(form_upload);
          //Send file with ajax.
          $.ajax({
              url:'/crop/',
              type:'post',
              dataType:'json',
              cache:false,
              processData: false,
              contentType: false,
              data:{
                  'file': form_data,
                  'value': 'test_value',
              },
              success:function (data) {
                  console.log(data)
              }
          });
        });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>views.py:</strong></p>
  
  <pre><code>def crop(request):
      if request.method == "GET":
  
          form = TestPhotoFrom()
          return render(request, 'authapp/crop.html', {'form': form})
      else:
          if request.is_ajax():
              # get file from request.
              file = request.FILES
              image = Image.open(file)
              # cropping image
              cropped_image = image.crop((0, 0, 200, 200))
              resized_image = cropped_image.resize((200, 200), Image.ANTIALIAS)
              # save cropped image
              resized_image.save()
              return JsonResponse({'success': 'file_uploaded'})
  </code></pre>
  
  <p>I read this: <a href="https://simpleisbetterthancomplex.com/tutorial/2017/03/02/how-to-crop-images-in-a-django-application.html" rel="nofollow noreferrer">https://simpleisbetterthancomplex.com/tutorial/2017/03/02/how-to-crop-images-in-a-django-application.html</a></p>
  
  <p>And now I need to do that with jquery-ajax.</p>
  
  <p>But when I click button to do ajax request, server console is printing this error:
  <code>'MultiValueDict' object has no attribute 'read'</code></p>
  
  <p>How can I do that? </p>
  
  <p>Sorry, I don't know also whether these part on <code>views.py</code> is correct or not:</p>
  
  <pre><code>image = Image.open(file)
  cropped_image = image.crop((0, 0, 200, 200))
  resized_image = cropped_image.resize((200, 200), Image.ANTIALIAS)
  resized_image.save()
  </code></pre>
  
  <p>But before checking it, I cannot solve this: <code>'MultiValueDict' object has no attribute 'read'</code></p>
  
  <p><strong>Question.1:</strong>
  How can I solve <code>'MultiValueDict' object has no attribute 'read'</code>?</p>
  
  <p><strong>Question.2:</strong>
  Is this part correct? Or will it be working well?  </p>
  
  <pre><code>image = Image.open(file)
  cropped_image = image.crop((0, 0, 200, 200))
  resized_image = cropped_image.resize((200, 200), Image.ANTIALIAS)
  resized_image.save()
  </code></pre>
  
  <p>Because I'm very newbie in uploading image with ajax on django very little, I want your explanation or modification.</p>
  
  <p>Thanks for reading poor question.</p>