XmlHttpRequest request element is None

Question

I am using Django and trying to send webcam data using XMLHttpRequest to the background (view.py) in order to process each frame. I follow this link and most people suggest a similar method for my problem.

$(document).ready(function(){
  $('#trigger_button').click(function(){
    navigator.mediaDevices.getUserMedia(constraints)
    .then(stream => {
      document.getElementById("myVideo").srcObject = stream;
    })
    .catch(err => {
      alert('navigator.getUserMedia error: ', err)
    });
    drawCanvas.width = v.videoWidth;
    drawCanvas.height = v.videoHeight;
    imageCanvas.width = uploadWidth;
    imageCanvas.height = uploadWidth * (v.videoHeight / v.videoWidth);
    drawCtx.lineWidth = 4;
    drawCtx.strokeStyle = "cyan";
    drawCtx.font = "20px Verdana";
    drawCtx.fillStyle = "cyan";
    imageCanvas.getContext("2d").drawImage(v, 0, 0, v.videoWidth, v.videoHeight, 0, 0, uploadWidth, uploadWidth * (v.videoHeight / v.videoWidth));

    imageCanvas.toBlob(postFile, 'image/jpeg');
  });
});
function postFile(file) {
  var formdata = new FormData();
  formdata.append("image", file);
  formdata.append("threshold", scoreThreshold);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', apiServer, true);

  xhr.onload = function () {
    if (this.status === 200) {
      var objects = JSON.parse(this.response);
      drawBoxes(objects);
      imageCtx.drawImage(v, 0, 0, v.videoWidth, v.videoHeight, 0, 0, uploadWidth, uploadWidth * (v.videoHeight / v.videoWidth));
      imageCanvas.toBlob(postFile, 'image/jpeg');
    }
    else {
      alert(this.status);
    }
  };
  xhr.send(formdata);
}

Then, I am trying to access data in the request in view.py as follow:

def control4(request):
    print(request.POST.get('image'))
    print(request.POST.get('threshold'))
    return render(request, 'local.html')

However, although request.Post.get('threshold') returns a value, request.POST.get('image') returns None. Besides, this method repeats three times and then it stops to send feedback. I mean, the control4 function prints 3 times (I think it should works until the camera is closed).

Could anyone have any idea about what the problem is?

Thank you and best.

Answer 1

You have to look in request.FILES for the image

def control4(request):
    print(request.FILES['image'])
    print(request.POST.get('threshold'))
    return render(request, 'local.html')