How do I send an image taken with the webcam to an api?

Question

I am trying to send an image to an API to be processed, the problem is that I need to send the image captured by the pc webcam,

imageCapture.takePhoto().then(function (blob) {                                      
  var imagen = new File([blob], "name",{type:"image/jpeg"}); 
  fileUpload[0] = imagen;
});

That's how I keep the image in a variable, and so I send it to the API:

var formData = new FormData();
formData.append('files', fileUpload[0]);
    var obj = {};
    var res = "";
    var oControl = this.getView().byId("txtArea");
    $.ajax("/service/models/personas/versions/2", {
        type: "POST",
        data: formData,
        cache: false,
        headers: {
            "Authorization": "Bearer " + token
        },

But I get the following error:

Error when uploading files:: Invalid file type

I have already used it before sending an image with the same "jpeg" format with Postman and it works, so what am I doing wrong?

Hope you can help me, thanks.

My guess would be that you need a "Content-Type": "image/jpeg" in your headers. — K. Rhoda, Apr 24 '19 at 22:58
I tried and now i have another error: "Invalid request: This service requires at least 1 file. Please put your file(s) into the `files` field of the POST request" — Maveric Ramos, Apr 25 '19 at 19:30
My wrong was i was creating the file without an extension, thanks to everyone. — Maveric Ramos, Apr 25 '19 at 23:01

score 0 · Answer 1 · edited Apr 25 '19 at 05:32

0

There is no such header called type. Instead of {type:"image/jpeg"} you need {Content-Type:"image/jpeg"} which is the appropriate HTTP header. Since postman doesn't process your data, you couldn't find the error.

edited Apr 25 '19 at 05:32

Inizio

2,226
15
18

answered Apr 24 '19 at 23:47

Raymond

396
4
21

score 0 · Answer 2 · answered Apr 25 '19 at 07:19

            $("#btnUploadDoc").click(function (e) {
                e.preventDefault(); 
                var formData = new FormData(); 
                var opmlFile = $('#file1').get(0).files;
                formData.append(Name, opmlFile[0]); 
                $.ajax({
                    url: "/service/models/personas/versions/2",
                    type: 'POST',
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function (data) {                       
                        alert(data.msg);
                    }
                });
            });

How do I send an image taken with the webcam to an api?

2 Answers2