SPFx Command Set: Post a document library file from SharePoint online to an external API

Question

Dears,

I'm developing a SharePoint Online extension (spfx) using react framework with a command set behind which two actions are linked.

• Action1 Retrieve a file (doc, Excel, Pdf or ppt) from a Document Library on SharePoint online via SharePoint REST API
• Action2 Send the file to an external API via an Http POST request (using axios)

For the Action2 I’m able to send file generated using jsPDF in blob format, but when I try to send the file retrieved from Document library this failed. I get no file attached to the request. Can someone please tell me in which format I have to put the file,so that it can be recognized and sent by the POST request ?

//File generated by jsPDF

generatePDF = ():Blob => {
var doc = new jsPDF();
doc.text('This is the first title.',20, 20, )
doc.text('This is the second title.', 20, 60, )
doc.text('This is the thrid title.', 20, 100, )  
return doc.output('blob')    
}


// Request for retrieving the file from document library 

private _getFileData(libraryrelativurl: string, filename: string): Promise<Blob> {
      return this.context.spHttpClient.get(this.context.pageContext.web.absoluteUrl + "/_api/web/GetFileByServerRelativeUrl('" + libraryrelativurl + "/" + filename + "')/$value", SPHttpClient.configurations.v1)
    .then((response: SPHttpClientResponse) => {
      return response.blob();
    });
}


// The request used to POST file to an External API **this failed** 

private AxiospostRequest(libraryrelativurl: string, filename: string):void{  

var mybolb: Blob 
this._getFileData(libraryrelativurl,filename)
          .then((response) => {              
           mybolb = response
          });           
const Data = new FormData();   
    Data.append('data', metadata);
    Data.append('filename',filename);
    Data.append('file' ,mybolb,);
    var date = this.DateHelper();
    var token = this.AutorisationGen("POST");
    var Authorization = apiKey + ":" +token;
          const Config= {
      
              "headers": {
        content-type": 'multipart/form-data; Boundary=--WebKitFormBoundaryqTqJIxvkWFYqvP5s;charset=UTF-8',
        "Transfer-Encoding": "chunked",    
        "Authorization":Authorization,  
        "X-AB-Date":date,                    
              },   
          }
          axios.post(endPointUrl, Data, Config)      
    .then((res)=> {               
        token= this.AutorisationGen("GETUI");         
        window.location.href=redirectUrl;
    })
    .catch((err) => {
      console.log(err);
          })          

}  




//The same POST request used by sending the generated file with jpdF succeed 

private AxiospostRequest(libraryrelativurl: string, filename: string):void
         
    const Data = new FormData();   
    Data.append('data', metadata);
    Data.append('filename',filename);
    Data.append('file', this.generatePDF());
    var date = this.DateHelper();
    var token = this.AutorisationGen("POST");
    var Authorization = apiKey + ":" +token;
          const Config= {
      
              "headers": {
        content-type": 'multipart/form-data; Boundary=--WebKitFormBoundaryqTqJIxvkWFYqvP5s;charset=UTF-8',
        "Transfer-Encoding": "chunked",    
        "Authorization":Authorization,  
        "X-AB-Date":date,                    
              },   
          }
          axios.post(endPointUrl, Data, Config)      
    .then((res)=> {               
        token= this.AutorisationGen("GETUI");         
        window.location.href=redirectUrl;
    })
    .catch((err) => {
      console.log(err);
          })          

}