Pnpjs: System.UnauthorizedAccessException While uplaoding file using webpart

Created on 31 Mar 2020 · 11Comments · Source: pnp/pnpjs

Category

[x] Bug
[x] Question

I have created a webpart to upload file in my document library with meta, after uploading the file using metadata created by React component Please let me know It it requires more information.

Error

hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1 POST https://domainname.sharepoint.com/sites/_api/contextinfo 403
e.fetch @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
o @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
t.fetchRaw @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
h @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
h @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
t.fetch @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
t.send @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
r.value @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
Q @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
Promise.then (async)
r.value @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
Q @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
Promise.then (async)
r.value @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
Q @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
$ @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
s @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
Promise.then (async)
u @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
h @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
h @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
e.add @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
(anonymous) @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
h @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
r.value @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
e.filesave @ hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
u @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
m @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
(anonymous) @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
S @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
O @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
P @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
D @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
En @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
_o @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
Le @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
On @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
(anonymous) @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
Ay1f.t.unstable_runWithPriority @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
So @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
Nn @ sp-pages-assembly_en-us_fdf3776f111bbeeb7dd400ba4dd8a086.js:21
Show 32 more frames
hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1 Uncaught (in promise) Error: Error making HttpClient request in queryable [403]  ::> {"error":{"code":"-2147024891, System.UnauthorizedAccessException","message":{"lang":"en-US","value":"Access denied. You do not have permission to perform this action or access this resource."}}}
    at new e (hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1)
    at Function.<anonymous> (hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1)
    at hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1
    at Object.next (hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1)
    at s (hello-world-web-part_4dcaa7f90143172cefcb8afa2070c44f.js:1)

Code

import * as React from 'react';
import styles from './HelloWorld.module.scss';
import { IHelloWorldProps } from './IHelloWorldProps';
import { escape } from '@microsoft/sp-lodash-subset';
import "@pnp/polyfill-ie11";
import { sp } from "@pnp/sp/presets/all";  

export default class HelloWorld extends React.Component<IHelloWorldProps, {}> {
  constructor(props) {  
    super(props);  
    this.filesave = this.filesave.bind(this);  
  }  

  public render(): React.ReactElement<IHelloWorldProps> {

      return (  
        <div>  
          <div>  
          <input type="file" name="myFile" id="newfile"></input></div>  
          <div>  
          <button onClick={this.filesave}>  
          UploadFile  
        </button></div>    
  </div>  
  );

  }

  private filesave(){  
    let myfile = (document.querySelector("#newfile") as HTMLInputElement).files[0];  
    if (myfile.size <= 10485760) {  
      sp.web.getFolderByServerRelativeUrl("/sites/file/documents").files.add(myfile.name, myfile, true).then(f => {  
        console.log("File Uploaded");  
        f.file.getItem().then(item => {  
            item.update({  
                Test: "Metadata Updated"  
            }).then((myupdate) => {  
              console.log(myupdate);  
              console.log("Metadata Updated");  
            });  
        });  
    });    
    }  
    else{  
      sp.web.getFolderByServerRelativeUrl("/sites/file/documents")  
      .files.addChunked(myfile.name, myfile)  
      .then(({ file }) => file.getItem()).then((item:any) => {  
        console.log("File Uploaded");  
          return item.update({  
              Test: 'Metadata Updated'  
          }).then((myupdate) => {  
            console.log(myupdate);  
            console.log("Metadata Updated");  
          });  
      }).catch(console.log);  
}}
}

non-library details needed someting isn't working

Source

piraga

All 11 comments

Could you check what’s in browser dev tools network tab? I hope your run the code in SharePoint hosted workbench or a debug mode but not in locally served workbench.

koltyakov on 31 Mar 2020

Access denied is access denied, this is a permissions issue with either the user or app only auth you are attempting to use.

patrick-rodgers on 31 Mar 2020

As it's a secondary call to API (to update props for the uploaded doc) I only assume that the URL might end up to something wrong. Also, I'm not excluding that the web part is started in the local workbench. ;)

koltyakov on 31 Mar 2020

👍1

Sure, always possible there is a bug in the library.

patrick-rodgers on 31 Mar 2020

👍1

Looking at this again - I think you are not calling setup. Please give that a try and hopefully you should be good to go.

patrick-rodgers on 3 Apr 2020

@patrick-rodgers @koltyakov Thanks for you replies. I'm novice in these code. If you don't mind Could you assist me how we need to call the setup using above code that will be really beneficial to figure out this issue.

piraga on 3 Apr 2020

@piraga setup file is
protected onInit(): Promise {

return super.onInit().then(_ => {

// other init code may be present

sp.setup({

// set ie 11 mode

ie11: true,

// only needed when working within SharePoint Framework

spfxContext: this.context

});

}

ncmadhan1989 on 3 Apr 2020

👍1

@ncmadhan1989 Thanks for your contibution. Could you please tell me, where I have to add this code in my code

piraga on 3 Apr 2020

You can see it in this sample as well as the docs I linked.

patrick-rodgers on 3 Apr 2020

@piraga in your ts file if context doesn't get refer it to tsx file also inside class function

ncmadhan1989 on 4 Apr 2020

@patrick-rodgers @ncmadhan1989 Really wonderful it worked. Thank you so much for you contribution.

piraga on 6 Apr 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings

Related issues

pnp/sp ensure works on workbench, fails when deployed to tenant

Holden15 · 3Comments

Implement caching for permissions APIs

SpliceVW · 3Comments

Unable to perform multiple operations with the same file in one batch.

AJIXuMuK · 3Comments

Documentation: sp\webs.html

AJIXuMuK · 3Comments

Implement usingCaching for search fluent API

SpliceVW · 3Comments