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.

score 3 · Accepted Answer · answered Oct 09 '20 at 19:51

3

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')

answered Oct 09 '20 at 19:51

Musa

96,336
17
118
137

Thank you for your answer. Actually, I did it before. However, although I used "image" keyword in .html file, I got an error "MultiValueDictKeyError image" when I used the code like you suggested. Because in the first POST, it cannot add image, the keys seem empty. However, in the second time, it sends image. Ithink the problem is in the foreground part. Thank you so much. Do you also have any idea about why it sends three times and why it is empty at the first time? – Can Oct 09 '20 at 21:40
Not from the code you posted, it doesn't show anything to trigger the upload besides a button click – Musa Oct 09 '20 at 21:52

XmlHttpRequest request element is None

1 Answers1