Internal Server Error when posting image via jquery, ajax and django

Question

I'm trying to post a cropped image via Jquery and ajax. I've been following the solution to this question crop image using coordinates, however I've had no luck in receiving the image on Django's end, despite the CSRF token and image being handled by the ajax request fine.

I haven't done anything in my views.py, just attempted to print request.FILES and request.POST to see if anything got returned but no luck. Not sure how or if I should be handling that a different way.

JS

  function readURL(input) {
if (input.files && input.files[0]) {
  var reader = new FileReader();
  reader.onload = function(e) {
    $('#image').attr('src', e.target.result)
  };
  reader.readAsDataURL(input.files[0]);
  setTimeout(initCropper,1000);
}

}

function initCropper() {
    console.log("initializing")
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: 16/9,
      viewMode: 1,
      autoCropArea: 0.8,
      cropBoxResizable: false,
      minCropBoxWidth: 640,
      minCropBoxHeight: 360,
      minContainerWidth: 720,
      minContainerHeight: 405,
      crop: function(e) {
        console.log(e.detail.x);
        console.log(e.detail.y);
      }
    });
document.getElementById('crop_button').addEventListener('click', function(){
  var imgurl = cropper.getCroppedCanvas().toDataURL();
  var img = document.createElement("img");
  img.src = imgurl;

  cropper.getCroppedCanvas().toBlob(function(blob){
    var formData = new FormData();
    formData.append('croppedImage', blob);
    formData.append('csrfmiddlewaretoken', '{{csrf_token}}')

    $.ajax({
      url: '/campaigns/create/',
      method:"POST",
      data: formData,
      processData: false,
      contentType: 'multipart/form-data',
      success: function () {
        console.log("Upload success");
      },
      error: function () {
        console.log('Upload error')
      }
    });
  });

})

};

HTML

<div class="col-xl-9 col-lg-9">
                                      <input type="file" name="inputImage" id="inputImage" onchange="readURL(this);"/>
                                      <div class="image_container">
                                        <img id="image" src="#" alt="your image"/>
                                      </div>
                                    </div>
                                    <button id="crop_button">Crop</button>

ERROR

....
[16/Dec/2018 14:08:26] "POST /campaigns/create/ HTTP/1.1" 500 59
[16/Dec/2018 14:08:26] code 400, message Bad request syntax ('------ 
WebKitFormBoundarycvWRqqCDKW5sPfBT')
[16/Dec/2018 14:08:26] "------WebKitFormBoundarycvWRqqCDKW5sPfBT" 400 -

score 0 · Answer 1 · answered Dec 16 '18 at 10:07

You're explicitly setting the contentType property to multipart/form-data but that's missing the boundary string which is required for multipart/form-data requests. Django would then not understand how to parse the request body.

Try setting contentType to false which will instruct JQuery not to set the Content-Type header.

$.ajax({
  ...
  contentType: false,

Internal Server Error when posting image via jquery, ajax and django

1 Answers1