upload file in document library using pnp and spfx

How to upload file in document library using pnp in SharePoint framework

private UploadFile():void

{

    // to find file uploader control by element id

    let input = <HTMLInputElement>document.getElementById("thefileinput");

    let file = input.files[0];

   if (file.size <= 10485760)

   {

    //upload small file in document library

    pnp.sp.web.getFolderByServerRelativeUrl("/sites/apps/TestDoc").files.add(file.name,file,true).then(f=>

    {

      // use below to update the properties of document

        f.file.getItem().then(item =>{

          item.update({

            FirstName:'test001',

            LastName:'test',

            Age:50

          }).then(f=>{

            alert("File uploaded successfully"+f.data["odata.etag"]);

          });

        });

    });

  }

  else

  {

    //upload large file in document library

      pnp.sp.web.getFolderByServerRelativeUrl("/sites/apps/TestDoc").files.addChunked(file.name,file,data =>

      {

         console.log({ data: data, message: "progress" });

      }, true).then(f=>

      {

              alert("File uploaded successfully"+f.data["odata.etag"]);  

      });

    }

}