How to convert HTML input type="file" to a octet-stream

Question

I am making a web application where a user selects an image using

<input id="file" type="file" accept="image/*" capture>

I need to upload the selected image to Azure so that I can further process it. The Azure docs state that I must use a POST call with the Content-Type set as "application/octet-stream" and the body is to contain the image file.

I have the following:

const fileEl = document.getElementById('file');
fileEl.addEventListener( 'change', async (e) => {
  const file = e.target.files[0];

  const response = await fetch( "https://eastus.api.cognitive.microsoft.com/customvision/v3.0/Prediction/abc/detect/iterations/Iteration0/url", {
     method: "POST",
     headers: {
        "Prediction-Key": "123",
        "Content-Type": "application/octet-stream"
     },
     body: file
  } );

  console.log( response.ok );
} );

The problem is that this is failing ... I'm guessing that body: file is incorrect. How do I convert the file object to something that I'm supposed to send in the POST request?

Marek Krzeminski Marek Krzeminski · Accepted Answer · 2020-07-15T22:56:43

I have the wrong url in the fetch command, that is why nothing is working! I fixed that and body: file works just fine

How to convert HTML input type="file" to a octet-stream

1 Answers