Skip to content

Latest commit

 

History

History

spfx-file-picker

README.md

SPFx OneDrive File Picker

Summary

Sample SharePoint Framework web part that allows the selection of images from OneDrive and display them.

The SPFX File Picker in action

Used SharePoint Framework Version

SPFx v1.7.0

Applies to

Solution

Solution Author(s)
spfx-file-picker Paolo Pialorsi (MCM, MVP, PiaSys.com, @PaoloPia)
spfx-file-picker Guido Zambarda (PiaSys.com)

Version history

Version Date Comments
1.0.0 November 12, 2018 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Prerequisites

  • Office 365 Developer tenant with a modern site collection

Minimal Path to Awesome

  • clone this repo
  • register the app in the App Registration Portal following these instructions
  • configure the ClientId of the newly registered app in the OneDrivePicker.ts file in line 46, replacing the "[YOUR APP CLIENTID HERE]" placeholder
  • in the command line run
    • npm i
    • gulp serve --nobrowser
  • open the workbench /_layouts/15/workbench.aspx on your SharePoint site
  • add the File Picker web part and play with it

Deployment

In order to deploy the sample solution in a real environment, or at least in order to skip using the debug mode, you need to execute the following steps:

  • publish the solution on any hosting environment or CDN and update the cdnBasePath property in the write-manifests.json file with the base URL of your hosting environment
  • bundle and package the solution by executing the following commands in the command line:
    • gulp bundle --ship
    • gulp package-solution --ship
  • upload the content of the ./temp/deploy subfolder of the sample root folder into the target hosting environment
  • add to the "Apps for SharePoint" library of the AppCatalog in your tenant the spfx-file-picker.spppkg file that you will find under the ./sharepoint/solution subfolder of the sample root folder
  • add the FilePicker web part on any target page where you want to use it

App Registration

In order to register the app in the App Registration Portal, follow these steps:

  • Browse to the App Registration Portal
  • Click the "Add an app" button
  • Provide a value like "spfx-file-picker" for the Application Name field and press "Create"
    • Copy the value of the Application Id field provided in the app page and use it to configure the OneDrivePicker.ts file
  • In the "Platforms" section click the button "Add Platform" and select "Web"
    • Keep the "Allow Implicit Flow" flag selected
    • Provide in the "Redirect URLs" section all the URLs of the pages that will use the web part. For example, if you are using the web part from the page https://<your-tenant>.sharepoint.com/_layouts/15/workbench.aspx, provide that URL as one of the values for the redirect URLs
  • In the "Microsoft Graph Permissions" section configure any of the "User.Read" or "Files.Read.All" permissions
  • Click the "Save" button

For further details, you can read the official documentation about OneDrive File Picker, and the OneDrive permission scopes.

Features

This project contains sample SharePoint Framework web part built using React and Office UI Fabric React. The web part allows to select and display images from your OneDrive, by default no image is selected.

This sample illustrates the following concepts on top of the SharePoint Framework:

  • using Office UI Fabric React to build SharePoint Framework web part that seamlessly integrate with SharePoint
  • using React to build SharePoint Framework web part
  • selecting and displaying the images using OneDrive