[SOLVED] How to use Azure custom vision prediction API by URL method in javascript?

How to use Azure custom vision prediction API by URL method in javascript?

I have used this code! Reference: https://southcentralus.dev.cognitive.microsoft.com/docs/services/eb68250e4e954d9bae0c2650db79c653/operations/58acd3c1ef062f0344a42813

 <!DOCTYPE html>
<html>
<head>
    <title>JSSample</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>

<script type="text/javascript">
    $(function() {
        var params = {
            // Request parameters
            "iterationId": "{string}",
            "application": "{string}",
        };
      
        $.ajax({
            url: "https://southcentralus.api.cognitive.microsoft.com/customvision/v1.0/Prediction/{projectId}/url?" + $.param(params),
            beforeSend: function(xhrObj){
                // Request headers
                xhrObj.setRequestHeader("Content-Type","application/json");
                xhrObj.setRequestHeader("Prediction-key","{subscription key}");
            },
            type: "POST",
            // Request body
            data: "{body}",
        })
        .done(function(data) {
            alert("success");
        })
        .fail(function() {
            alert("error");
        });
    });
</script>
</body>
</html>

Solution

One of the workaround is you can try with the sample code that i have :

function readImage(element) {
  var file = element.files[0];
  var reader = new FileReader();
  reader.onloadend = function() {
    $.ajax({
      url: "https://southcentralus.api.cognitive.microsoft.com/customvision/v1.1/Prediction/KEY/image?iterationId=ITERATIONID",
      data: reader.result,
      processData: false,
      contentType: "application/octet-streama",
      headers: {
        'Prediction-key': 'YOUR-KEY'
      },
      type: 'POST',
      success: function(response) {
        var result = response["Predictions"];

        alert(result);
      },
      error: function(error) {
        alert('error: ' + error);
      }
    });
  }
  reader.readAsArrayBuffer(file);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="file" onchange="readImage(this)" />
</form>