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

}

Answer 1

Hi @victor dushi ,

According to my research and testing, please try to add headers in the section of your code request for retrieving the file from document library:

 headers: {  
      "Accept": "application/json;odata=verbose",  
      "Content-Type": "application/json;odata=verbose"  
    }  

And you can use the following code to get the file from document library. /_api/web/GetFileByServerRelativeUrl('/sites/zellatest/upload/aaa.txt')/$value

Hope it can help you. Thanks for your understanding.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

---