React组件访问sharepoint

Question

I am trying to build a component that user can browse files from share point online.

I did search but they are mainly about creating share point web parts. Found something called GraphFileBrowser but did not had luck with it.

I can browse this url https://domain.sharepoint.com/folder1/folder2/Documents/Forms/AllItems.aspx in my browser. Trying to point the file browser to same place

---

import React from 'react';
import { GraphFileBrowser } from '@microsoft/file-browser'; 

class FileBrowser extends React.Component {
  getAuthenticationToken() {
    return new Promise<string>(resolve => {
      resolve(
        "token"
      );
    });
  }

  render() {
    return (
      <GraphFileBrowser
        getAuthenticationToken={this.getAuthenticationToken}
        endpoint='https://domain.sharepoint.com/folder1/folder2/Documents/Forms/AllItems.aspx'
      />
    );
  }
}

export default FileBrowser;

In network tab I can see it trying to connect

https://domain.sharepoint.com/folder1/folder2/Documents/Forms/AllItems.aspx/drive/items/

Seems to be appending /drive/items/ at the end somehow

Give me below error as well

file-browser_en-us.js:47237 Uncaught SyntaxError: Unexpected token < in JSON at position 2
    at Object.parse (<anonymous>)
    at file-browser_en-us.js:47237
    at Object.m [as _notify] (file-browser_en-us.js:4981)
    at Object.enter (file-browser_en-us.js:5192)
    at e._run (file-browser_en-us.js:5487)
    at e._completed (file-browser_en-us.js:5469)
    at e._callSuccessCallback (file-browser_en-us.js:47440)
    at e._requestEndCallback (file-browser_en-us.js:47465)
    at XMLHttpRequest.d.onreadystatechange (file-browser_en-us.js:47399)

Not sure is this the right way to implement such a thing. Any direction on this please

Answer 1

Sample demo to use this library.

Get graph token follow this thread .

Use this library in SPFx(React component code).

    import * as React from 'react';
    import styles from './ReactSpFx.module.scss';
    import { IReactSpFxProps } from './IReactSpFxProps';
    import { escape } from '@microsoft/sp-lodash-subset';

    import { SPHttpClient, SPHttpClientResponse} from '@microsoft/sp-http';

    import Slider from "react-slick";
    import "../../../../node_modules/slick-carousel/slick/slick.css"; 
    import "../../../../node_modules/slick-carousel/slick/slick-theme.css";
    import { any } from 'prop-types';

    import { GraphFileBrowser } from '@microsoft/file-browser';

    export interface IReactItem{ 
      ID:string,
      Title:string,
      Address:string
    }

    export interface IReactGetItemsState{ 
      items:IReactItem[],
      selectValue:string
    }

    declare global {
      interface Window { _graphToken: any; }
    }

    export default class ReactSpFx extends React.Component<IReactSpFxProps,IReactGetItemsState> {

      public constructor(props: IReactSpFxProps) {
        super(props);
        window._graphToken =props.userToken;
        this.state = {
          items:[],
          selectValue:"Radish"
        };
        this.next = this.next.bind(this);
        this.previous = this.previous.bind(this);    
      }

      public getAuthenticationToken():Promise<string> {    
        return new Promise(resolve => {
          resolve(
            window._graphToken
          );     
        });

      }

      public componentDidMount() {
        var reactHandler = this;
        this.props.context.spHttpClient.get(`${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestList')/items?select=ID,Title,Address`,
        SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => {  
          response.json().then((responseJSON: any) => {            
            reactHandler.setState({
              items: responseJSON.value
            });
          });  
        });   
      }

      protected slider;
      next() {
        this.slider.slickNext();
      }
      previous() {
        this.slider.slickPrev();
      }

      handleChange = (event) => {
        this.setState({selectValue:event.target.value});
      };

      public render(): React.ReactElement<IReactSpFxProps> {
        const settings = {
          dots: true,
          infinite: true,
          speed: 500,
          slidesToShow: 1,
          slidesToScroll: 1
        };

        alert(this.state.selectValue);

        return (
          <div className={styles.reactSpFx}>

            <div className={styles.container}>  
            {/* {(this.state.items || []).map(item => (
                <div key={item.ID} className={styles.row}>{item.Title}
                <div dangerouslySetInnerHTML={{ __html: item.Address.replace(/[\n\r]/g,"<br/>")}}></div> 
              </div> 
              ))}                           */}
            </div>
{/* site id */}
            <GraphFileBrowser
            getAuthenticationToken={this.getAuthenticationToken}
            endpoint='https://graph.microsoft.com/v1.0/sites/tenant.sharepoint.com,xxxx-b669-x-x-x,xxxx-x-x-x-x'
            onSuccess={(selectedKeys: any[]) => console.log(selectedKeys)}
            onCancel={(err: Error) => console.log(err.message)}
          />

            <select 
            value={this.state.selectValue} 
            onChange={this.handleChange}>
              <option value="Orange">Orange</option>
                <option value="Radish">Radish</option>
                <option value="Cherry">Cherry</option>
              </select>
            <div>
              <h2> Single Item</h2>
              <Slider ref={c => (this.slider = c)} {...settings}>
                <div>
                  <h3>1</h3>
                </div>
                <div>
                  <h3>2</h3>
                </div>
                <div>
                  <h3>3</h3>
                </div>
                <div>
                  <h3>4</h3>
                </div>
                <div>
                  <h3>5</h3>
                </div>
                <div>
                  <h3>6</h3>
                </div>
              </Slider>
              <br/>
              <br/>
              <div style={{ textAlign: "center" }}>
              <button className="button" onClick={this.previous}>
                Previous
              </button>
              <button className="button" onClick={this.next}>
                Next
              </button>
            </div>
            </div>
          </div>      
        );    
      }
    }