spfx provisioning

Deploy files like image,js,css,html and aspx files using Module in SPFX.

1.       Add elements.xml file Inside assets folder  under SharePoint and below xml inside elements.xml file

2.  <?xml version="1.0" encoding="utf-8"?>

3.  <Elements xmlns="http://schemas.microsoft.com/sharepoint/">

4.   

5.     <!-- Upload files to the SPFxDocumentLibrary -->

6.      <Module Name="Files" Url="Doc">

7.          <!-- ISSUE: For some reason `gulp package-solution` breaks the .jpg, .png images.

8.           Workaround is to open the .sppkg with winrar and add the images manually. -->

9.          <File Path="10.jpg" Url="NewFolder/10.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

10.         </File>

11.         <File Path="3.jpg" Url="NewFolder/3.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

12.         </File>

13.         <File Path="4.jpg" Url="NewFolder/4.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

14.         </File>

15.         <File Path="5.jpg" Url="NewFolder/5.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

16.         </File>

17.         <File Path="6.jpg" Url="NewFolder/6.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE" >

18.         </File>

19.         <File Path="11.jpg" Url="CustomFolder/11.jpg" Type="GhostableInLibrary" ReplaceContent="TRUE">

20.         </File>

21.     </Module>

22. </Elements>

23.  

2.  Add files or images inside Assetes folder

3. Open  package-solution.json file and add features inside json properties .

{

  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",

  "solution": {

    "name": "spfx-solution-client-side-solution",

    "id": "ac493257-69d8-4c9e-a712-063b9afeba56",

    "version": "1.0.0.4",

    "features": [{

      "title": "spfx-solution-client-side-solution",

      "description": "spfx-solution-client-side-solution",

      "id": "94017C10-F387-43A6-9736-F50CFE8663EF",

      "version": "1.0.0.4",

      "assets": {

        "elementManifests": [

          "elements.xml"

        ],

        "elementFiles":[

          "10.JPG",

          "11.JPG",

          "3.JPG",

          "4.JPG",

          "5.JPG",

          "6.JPG"

        ]

      }

    }],

    "includeClientSideAssets": true,

    "isDomainIsolated": false

  },

  "paths": {

    "zippedPackage": "solution/spfx-solution.sppkg"

  }

}

4. Run the command gulp bundle --ship

5. Run the command gulp package-solution --ship

6. Deploy solution in app catalog

7. add app on site

8. check the library where your assets has been added

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"]);  

      });

    }

}