I'm trying to upload an image on Azure blob storage using RestAPI with passing a token. It works on postman. I am able to fetch the uploaded image correctly. Uploading from Angular also works but when I try fetching what I uploaded I get some text instead of the image. Below is an example if the text. Below text is part of the entire text which I receive.
------WebKitFormBoundaryCCltz7yE7w2qTIUX Content-Disposition: form-data; name="file"; filename="img3 - Copy - Copy.jpg" Content-Type: image/jpeg ����JFIF���ICC_PROFILE�0mntrRGB XYZ acsp���- desc�$rXYZgXYZ(bXYZ<�wtptPrTRCd(gTRCd(bTRCd(cprt�No᧟Js=٠+3Y��n���:�^�H @O����:�^�HJ�������vh %Y�����o|�@'7��ό�I��w�o��x���R��gx���}`)��f�n����R��vh*��w���No᧟f�hRr������:�p�U'+]��No᧟���y�)Y�������h�9��� /��/���)��o|�@*����)Y��� �r��@�����_?O���o|�@2S����g/_�%9^�� ?���i��R��gx��Y����Vf�4��{�@,���gx�9z� I��w�XJs=٠���y�:�^�H @O���y�U'+]�J�����+��Js=٠+3Y��Nf�4����K����Vf�4��k�� Vf�4|���O>0��W���u|�>�� )3w���Y��� /���Y^������)9Z�� �����S���%Y^�� �r��@'7��ό)YZ�������?
Code I used to upload image
uploadFile(file: any, securedUrl: string){
this.securedUrl = securedUrl;
let reader = new FileReader();
reader.onload = (e: any) => {
const formData: FormData = new FormData();
formData.append('file', file);
formData.append('fileName', "file123");
var requestData = new Uint8Array(e.target.result);
const httpOptions = {
headers: new HttpHeaders({
'x-ms-blob-type': 'BlockBlob',
})
};
this.http.put(securedUrl, formData, httpOptions).subscribe(response => {
console.log(response);
});
};
reader.readAsArrayBuffer(file);
}
Below is updated code after Gaurav's suggestion. Second paramerter (formData) is replaced with the binary file which is selected to upload.
uploadFile(file: any, securedUrl: string){
this.securedUrl = securedUrl;
let reader = new FileReader();
reader.onload = (e: any) => {
const httpOptions = {
headers: new HttpHeaders({
'x-ms-blob-type': 'BlockBlob',
})
};
this.http.put(securedUrl, file, httpOptions).subscribe(response => {
console.log(response);
});
};
reader.readAsArrayBuffer(file);
}