I have a SPFx solution which have a input tag to upload a file. When I try to upload the file in the same context of the site collection it works fine, but I am not able to get uploaded to different site collection.

Example: <input type=file"/> is used to upload the file in https://sharepoint.com/sites/test1. When I try to upload using sp.web.getFolderByServerRelativeUrl it works fine within same site collection & file uploaded successfully. But I need to upload the file to https://sharepoint.com/sites/test2. Can anyone please help me with this cross site collection file upload issue?

1 Answer 1


Sample test demo(React framework):

Note: the user should have permission for target site/library.

<input type="file" id="uploadFile" />
<button className="button" onClick={() => this.UploadFile()} >Upload</button>

Below is the JS code.

protected UploadFile(){
    var files = (document.getElementById('uploadFile') as HTMLInputElement).files;
    var file = files[0];
    if (file != undefined || file != null) {
      let spOpts : ISPHttpClientOptions  = {
        headers: {
          "Accept": "application/json",
          "Content-Type": "application/json"
        body: file        

      var url = `https://xxx.sharepoint.com/sites/site/_api/Web/Lists/getByTitle('MyDoc')/RootFolder/Files/Add(url='${file.name}', overwrite=true)`

      this.props.context.spHttpClient.post(url, SPHttpClient.configurations.v1, spOpts).then((response: SPHttpClientResponse) => {

        console.log(`Status code: ${response.status}`);
        console.log(`Status text: ${response.statusText}`);

        response.json().then((responseJSON: JSON) => {

  • Thanks, its working fine but how we update the metadata along with file uploaded? Jun 19, 2020 at 5:42
  • Need upload the file first, and then update metadata, you could check the logic docs.microsoft.com/en-us/sharepoint/dev/sp-add-ins/… (the code might be different, but logic same)
    – Lee
    Jun 19, 2020 at 6:08
  • All works fine, able to upload file and update the metadata, but problem is i am updating this to dropoff library with content organizer rule. Adding the file first and update the metadata did not trigger the content organizer rule. But when i click on edit properties and just submit, content query rule hit and document will be redirected Jun 23, 2020 at 14:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.