angularazure-blob-storageform-data

Uploading image to Azure blob storage returns text


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);
  }

Solution

  • 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);
    }