none
Post documents from webpart to SharePoint online library RRS feed

  • Question

  • Hi,

    How to Post documents from webpart to SharePoint library. I have get documents from sharepoint library using this:

    public fetchDatafromSharePointList()
    {
    var reactHandler = this;
    jquery.ajax({
    url: `${this.props.siteurl}/_api/web/GetFolderByServerRelativeUrl('ADMSO365')/Files`,
    type: "GET",
    headers:{'Accept': 'application/json; odata=verbose;'},
    success: function(resultData) {
    /*resultData.d.results;*/
    reactHandler.setState({
    items: resultData.d.results
    });
    },
    error : function(jqXHR, textStatus, errorThrown) {
    }
    });
    }

    But hoe to post back these documents to another library.




    • Edited by varshagupta Tuesday, September 10, 2019 5:34 AM
    Tuesday, September 10, 2019 5:34 AM

Answers

  • Hi varshagupta,

    Try to do this requirement with a more simple code with PnP Js like this:

    $pnp.sp.web.getFileByServerRelativeUrl('/sites/dev01/DocLib01/tttt/Development and Deployment Guidelines.pdf')
      .copyTo('/sites/dev01/DocLib03/Development and Deployment Guidelines.pdf', true)
      .then(function(res) { 
        console.log(res); 
      });

    Copy documents between libraries with js pnp

    Reference:

    Use (PnPJS) library with SharePoint Framework web parts

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by varshagupta Tuesday, September 10, 2019 1:58 PM
    Tuesday, September 10, 2019 10:42 AM
  • Hi varshagupta,

    Thanks for update and glad to hear it's working for you now.

    For passing as variable, you can get the file relative url from the ajax data.d.results, this array will contain the file relative url, you can loop it and use the relative url inside PnP Js.

    And if the post above is working in your side, I suggest you can Mark as answer so that it will also help others who stuck with the same question in the forum.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Tuesday, September 10, 2019 12:11 PM

All replies

  • Hi vashagupta,

    You can use Rest API copyto method to copy the file into a new library location:

    /_api/web/getfilebyserverrelativeurl('/Library/acento.txt')/copyto(strnewurl='/Lybrary_2/acento.txt',boverwrite=true)
    function CopyFile(){
            var oUrl =  _spPageContextInfo.webAbsoluteUrl +"/_api/web/getfilebyserverrelativeurl('/Library/acento.txt')/copyto(strnewurl='/Lybrary_2/acento.txt',boverwrite=true)";
            $.ajax({
                url: oUrl,
                type: "POST",
                headers: {
                    "Accept": "application/json; odata=verbose",
                    "X-RequestDigest":  $("#__REQUESTDIGEST").val()
                },
                success: function(data){
                    console.log(data);
                },
                error: function(data){
                    console.log(data);
                }
            });
        }

    Here is a similiar question in StackOverflow for your reference:

    REST call to move a file/folder to another location

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, September 10, 2019 8:51 AM
  • Hi,

    I have done this way

    public test(){
    var reactHandler = this;
    jquery.ajax({
    // url: `https://xandritz.sharepoint.com/sites/O365-ADMS/_api/web/GetFolderByServerRelativeUrl('ADMSO365')/files/Add(url='1',overwrite=true)`,
    url:`https://xandritz.sharepoint.com/sites/O365-ADMS/_api/web/getfilebyserverrelativeurl('/ADMSO365/user.txt')/copyto(strnewurl='/O365ADMSdoc/user.txt',boverwrite=true)`,
    type: "POST",
    headers:{'Accept': 'application/json; odata=verbose;'},
    success: function(resultData) {
    console.log(resultData);
    /*resultData.d.results;*/
    reactHandler.setState({
    items: resultData.d.results
    });
    },
    error : function(jqXHR, textStatus, errorThrown) {
    }
    })
    }

    but in console getting error:403 forbidden




    • Edited by varshagupta Tuesday, September 10, 2019 9:09 AM
    Tuesday, September 10, 2019 9:08 AM
  • Hi varshagupta,

    I suppose the two libraries are hosted in the same site collection, then the server relative url should include with site relative url like this:

    https://xandritz.sharepoint.com/sites/O365-ADMS/_api/web/getfilebyserverrelativeurl('/sites/O365-ADMS/ADMSO365/user.txt')/copyto(strnewurl='/sites/O365-ADMS/O365ADMSdoc/user.txt',boverwrite=true)

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, September 10, 2019 9:13 AM
  • Hi,

    Still same 403.

    public test(){
    var reactHandler = this;
    jquery.ajax({
    // url: `https://xandritz.sharepoint.com/sites/O365-ADMS/_api/web/GetFolderByServerRelativeUrl('ADMSO365')/files/Add(url='1',overwrite=true)`,
    url:`https://xandritz.sharepoint.com/sites/O365-ADMS/_api/web/getfilebyserverrelativeurl('/sites/O365-ADMS/ADMSO365/user.txt')/copyto(strnewurl='/sites/O365-ADMS/O365ADMSdoc/user.txt',boverwrite=true)`,
    type: "POST",
    headers:{'Accept': 'application/json; odata=verbose;'},
    success: function(resultData) {
    console.log(resultData);
    /*resultData.d.results;*/
    reactHandler.setState({
    items: resultData.d.results
    });
    },
    error : function(jqXHR, textStatus, errorThrown) {
    }
    })
    }




    • Edited by varshagupta Tuesday, September 10, 2019 9:21 AM
    Tuesday, September 10, 2019 9:21 AM
  • Hi varshagupta,

    In headers, need to assign __REQUESTDIGEST value for authentication:

    Work with __REQUESTDIGEST

    Please read the article from the link above carefully for the 403 forbidden error.

    Thanks

    BesT Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Tuesday, September 10, 2019 9:33 AM
  • Hi,

    In above jquery.ajax method I am not able to add Digest in headers, its giving errors, and if $ is used then it gives $ is not defined.

    Tried this but still 403

    public test(){
    var reactHandler = this;
    var digest = jquery('#__REQUESTDIGEST').val();
    jquery.ajax({
    // url: `https://xandritz.sharepoint.com/sites/O365-ADMS/_api/web/GetFolderByServerRelativeUrl('ADMSO365')/files/Add(url='1',overwrite=true)`,
    url:`https://xandritz.sharepoint.com/sites/O365-ADMS/_api/web/getfilebyserverrelativeurl('/sites/O365-ADMS/ADMSO365/user.txt')/copyto(strnewurl='/sites/O365-ADMS/O365ADMSdoc/user.txt',boverwrite=true)`,
    type: "POST",
    headers:{
    'Accept': 'application/json','odata':'verbose','X-RequestDigest':"('#__REQUESTDIGEST').val()"
    },
    success: function(resultData) {
    console.log(resultData);
    /*resultData.d.results;*/
    reactHandler.setState({
    items: resultData.d.results
    });
    },
    error : function(jqXHR, textStatus, errorThrown) {
    }
    })
    }





    • Edited by varshagupta Tuesday, September 10, 2019 10:20 AM
    Tuesday, September 10, 2019 10:12 AM
  • Hi varshagupta,

    jquery('#__REQUESTDIGEST').val() is used in classic page, for SPFX solution, you should use like this, please read the article completely:

    And the suggested way to make a Post Request is to use "spHttpClient" rather than normal Jquery ajax, this way won't need RequestDigest value:

    Making a POST request to SharePoint from an SPFx webpart

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Tuesday, September 10, 2019 10:33 AM
  • Hi varshagupta,

    Try to do this requirement with a more simple code with PnP Js like this:

    $pnp.sp.web.getFileByServerRelativeUrl('/sites/dev01/DocLib01/tttt/Development and Deployment Guidelines.pdf')
      .copyTo('/sites/dev01/DocLib03/Development and Deployment Guidelines.pdf', true)
      .then(function(res) { 
        console.log(res); 
      });

    Copy documents between libraries with js pnp

    Reference:

    Use (PnPJS) library with SharePoint Framework web parts

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    • Marked as answer by varshagupta Tuesday, September 10, 2019 1:58 PM
    Tuesday, September 10, 2019 10:42 AM
  • Hi,

    It worked..but for now url is hardcoded, internal name of column which stores these files is Name, so how to pass these files dynamically without hardcoding it.




    • Edited by varshagupta Tuesday, September 10, 2019 11:45 AM
    Tuesday, September 10, 2019 11:45 AM
  • Hi varshagupta,

    Thanks for update and glad to hear it's working for you now.

    For passing as variable, you can get the file relative url from the ajax data.d.results, this array will contain the file relative url, you can loop it and use the relative url inside PnP Js.

    And if the post above is working in your side, I suggest you can Mark as answer so that it will also help others who stuck with the same question in the forum.

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.


    Tuesday, September 10, 2019 12:11 PM
  • Hi,

    Before every document I have a checkbox, when user clicks on checkbox that particular document should get save to SP library on button click, how can we work on this click event.




    • Edited by varshagupta Wednesday, September 11, 2019 9:36 AM
    Wednesday, September 11, 2019 9:36 AM
  • Hi,

    You can have a onChange event in Checkbox to check if the checkbox control is checked firstly and then call the PnP js copyto the another library, here is a code demo to build onchange event for checkbox in React:

    React checkbox onClick

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, September 11, 2019 9:51 AM