Using file picker component in SharePoint Framework Web Part

%3CLINGO-SUB%20id%3D%22lingo-sub-68287%22%20slang%3D%22en-US%22%3EUsing%20file%20picker%20component%20in%20SharePoint%20Framework%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-68287%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20it%20somehow%20possible%20to%20use%20the%20file%20picker%20control%20which%20is%20being%20used%20by%20Microsofts%20Client-Side%20Web%20Parts%20(like%20the%20Document%20or%20Quick%20links%20Web%20Parts)%20in%20our%20own%20Web%20Parts%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F14320iD2F4F1EB06064B3B%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%222017-05-09%2011_51_04-Just%20Links%20and%208%20more%20pages%20%E2%80%8E-%20Microsoft%20Edge.jpg%22%20title%3D%222017-05-09%2011_51_04-Just%20Links%20and%208%20more%20pages%20%E2%80%8E-%20Microsoft%20Edge.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20the%20requirement%20to%20implement%20a%20file%20picker%20for%20a%20certain%20Web%20Part%20and%20it%20would%20be%20great%20to%20use%20the%20%22standard%22%20one%20which%20is%20already%20being%20used%20by%20Microsoft.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-68287%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAPIs%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-289075%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20file%20picker%20component%20in%20SharePoint%20Framework%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-289075%22%20slang%3D%22en-US%22%3E%3CP%3EAre%20all%20the%20standard%20web%20parts%20that%20ship%20on%20Modern%20Pages%2C%20%221st%20party%22%20components%20and%20therefore%20not%20open%20source%3F%20What%20is%20the%20standard%20and%20best%20practice%20approach%20for%20extending%20the%201st%20party%20components%20in%20this%20case%3F%20Understandably%20a%20use%20case%20for%20creating%20a%20uniform%20user%20experience%20would%20be%20to%20have%20the%20same%20file%20picker%20utility%20for%20various%20custom%20web%20parts%2C%20but%20as%20it%20stands%20that%20does%20not%20seem%20possible.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-217127%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20file%20picker%20component%20in%20SharePoint%20Framework%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-217127%22%20slang%3D%22en-US%22%3E%3CP%3ELooking%20for%20this%20control%20.%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-216798%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20file%20picker%20component%20in%20SharePoint%20Framework%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-216798%22%20slang%3D%22en-US%22%3E%3CP%3EI%20don't%20know%20of%20any%20plans%20to%20release%20a%20first%20party%20component%2C%20but%20if%20I%20had%20to%20make%20a%20bet%2C%20I'd%20say%20that%20it's%20a%20reasonable%20request%20for%20the%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-controls-react%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EReusable%20React%20controls%20for%20SPFx%20solutions%3C%2FA%3E%3CSPAN%3E%26nbsp%3Bor%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-property-controls%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EReusable%20SPFx%20property%20pane%20controls%3C%2FA%3E.%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-213237%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20file%20picker%20component%20in%20SharePoint%20Framework%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-213237%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F121%22%20target%3D%22_blank%22%3E%40Waldek%20Mastykarz%3C%2FA%3E%26nbsp%3Bare%20there%20any%20plans%20from%20Microsoft%20to%20release%20a%20file%20picker%20(%20Asset%20Picker%20)%20component%20anytime%20in%20the%20future%3F%3C%2FP%3E%3CP%3Ein%20Classic%20SharePoint%20there%20was%20an%20already%20component%20that%20we%20can%20just%20utilize.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-75293%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20file%20picker%20component%20in%20SharePoint%20Framework%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-75293%22%20slang%3D%22en-US%22%3E%3CP%3EI%20don't%20think%20there%20is%20a%20ready-to-use%20component%20for%20it.%20If%20you'd%20like%20to%20use%20it%2C%20you'd%20need%20to%20build%20it%20yourself%20using%20the%20building%20blocks%20from%20Office%20UI%20Fabric.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-71078%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20file%20picker%20component%20in%20SharePoint%20Framework%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-71078%22%20slang%3D%22en-US%22%3E%3CP%3ESorry%20to%20ask%20you%20directly%2C%20but%20can%20you%20help%20out%20maybe%3F%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F369%22%20target%3D%22_blank%22%3E%40Vesa%20Juvonen%3C%2FA%3E%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F121%22%20target%3D%22_blank%22%3E%40Waldek%20Mastykarz%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-533983%22%20slang%3D%22en-US%22%3ERe%3A%20Using%20file%20picker%20component%20in%20SharePoint%20Framework%20Web%20Part%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-533983%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F116361%22%20target%3D%22_blank%22%3E%40robin%3C%2FA%3E%20I%20have%20implemented%20same%20thing%20in%20my%20Project%20%2C%20you%20can%20refer%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Foliviercc.github.io%2Fsp-client-custom-fields%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Foliviercc.github.io%2Fsp-client-custom-fields%2F%3C%2FA%3E%3C%2FP%3E%3CBLOCKQUOTE%3E%3CHR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F6727%22%20target%3D%22_blank%22%3E%40Robin%20G%C3%BCldenpfennig%3C%2FA%3E%26nbsp%3Bwrote%3A%3CBR%20%2F%3E%3CP%3EIs%20it%20somehow%20possible%20to%20use%20the%20file%20picker%20control%20which%20is%20being%20used%20by%20Microsofts%20Client-Side%20Web%20Parts%20(like%20the%20Document%20or%20Quick%20links%20Web%20Parts)%20in%20our%20own%20Web%20Parts%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-center%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F14320iD2F4F1EB06064B3B%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%222017-05-09%2011_51_04-Just%20Links%20and%208%20more%20pages%20%E2%80%8E-%20Microsoft%20Edge.jpg%22%20title%3D%222017-05-09%2011_51_04-Just%20Links%20and%208%20more%20pages%20%E2%80%8E-%20Microsoft%20Edge.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20the%20requirement%20to%20implement%20a%20file%20picker%20for%20a%20certain%20Web%20Part%20and%20it%20would%20be%20great%20to%20use%20the%20%22standard%22%20one%20which%20is%20already%20being%20used%20by%20Microsoft.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CHR%20%2F%3E%3C%2FBLOCKQUOTE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

Is it somehow possible to use the file picker control which is being used by Microsofts Client-Side Web Parts (like the Document or Quick links Web Parts) in our own Web Parts?

 

2017-05-09 11_51_04-Just Links and 8 more pages ‎- Microsoft Edge.jpg

 

I have the requirement to implement a file picker for a certain Web Part and it would be great to use the "standard" one which is already being used by Microsoft.

 

7 Replies

Sorry to ask you directly, but can you help out maybe? @Vesa Juvonen @Waldek Mastykarz

I don't think there is a ready-to-use component for it. If you'd like to use it, you'd need to build it yourself using the building blocks from Office UI Fabric.

@Waldek Mastykarz are there any plans from Microsoft to release a file picker ( Asset Picker ) component anytime in the future?

in Classic SharePoint there was an already component that we can just utilize.

I don't know of any plans to release a first party component, but if I had to make a bet, I'd say that it's a reasonable request for the Reusable React controls for SPFx solutions or Reusable SPFx property pane controls.

Looking for this control . 

Are all the standard web parts that ship on Modern Pages, "1st party" components and therefore not open source? What is the standard and best practice approach for extending the 1st party components in this case? Understandably a use case for creating a uniform user experience would be to have the same file picker utility for various custom web parts, but as it stands that does not seem possible. 

@robin I have implemented same thing in my Project , you can refer https://oliviercc.github.io/sp-client-custom-fields/


@Robin Güldenpfennig wrote:

Is it somehow possible to use the file picker control which is being used by Microsofts Client-Side Web Parts (like the Document or Quick links Web Parts) in our own Web Parts?

 

2017-05-09 11_51_04-Just Links and 8 more pages ‎- Microsoft Edge.jpg

 

I have the requirement to implement a file picker for a certain Web Part and it would be great to use the "standard" one which is already being used by Microsoft.