How to get the URL of a file in a document library using sp.web (SPFX)

Question

I need to get the URL of each individual files in a SharePoint library (Case Documents). At the moment I'm using:

sp.web.lists.getByTitle("Case Documents").items.get().then((items: any[]) => { 
      let returnedItems: IListCItem[] = items.map((item) => { return new ListCItem(item); });

      this.setState({ 

        ListCItems: returnedItems, 
      }, () => {
        console.log(this.state.ListCItems);
      });
    });


//     sp.web.lists.getByTitle("Case Documents").items.select("ID","Title","CaseID/Title","CaseID/ID").expand("CaseID").get().then((items: any[]) => { 
//       let returnedItems: IListCItem[] = items.map((item) => { return new ListCItem(item); });
//  console.log(returnedItems);
//       this.setState({ 

//         ListCItems: returnedItems, 
//       });
//     });

...to get the list of file names. I've struggled with getting lookup columns using the commented out code as you can see. I included that to show you how what I've used.

Can someone tell me how to get the URL of each file so I can then create clickable links for each document in the web part I'm creating.

I've looked at: https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Files but it's not clear to me. I'm guessing something like:

pnp.sp.web.getFolderByServerRelativeUrl("/sites/dev/documents").files.getByName("file.txt").getText().then((text: string) => {});

Lee_MSFT Lee_MSFT · Accepted Answer · 2020-03-09T04:53:04

Sample demo:

sp.web.lists.getByTitle('MyDoc2').items.select('Id,FileRef').get().then((items:any) => {      
      items.map((item)=>{       
        console.log(item.FileRef);       
      }) 
    })

How to get the URL of a file in a document library using sp.web (SPFX)

2 Answers