pnp / pnp/sp-dev-fx-controls-react

FilePicker - best practice for storing files (images) uploaded via SPFX?

Open
#1,734 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

type:question
Dominant language
TypeScript
Stars
433
Forks
418
Avg merge
5d 6m
Merged PRs (30d)
19

Description

Category

[ ] Enhancement

[ ] Bug

[X] Question

Version

Please specify what version of the library you are using: [3.16.0]

Question

I'm using the FilePicker control in an SPFX to prompt the user to select an image - which will appear in the SharePoint page as part of the same webpart.

One of the FilePicker options is for the user to upload a file - and this is what my question relates to. For a modern SharePoint page - is there a best practice way of saving an image in the correct place? It looks like the built in webparts store their images in a Site Assets/SitePages/.../ folder (but it seems there may need to be some associated management with the sub-folder, which is dependent on the page name, and may even change if the page is renamed?).

Just wondered if there was a library, package or API which deals with saving an uploaded image, filing it in the right place and returning the Url. Or, do I have to come up with my own code for this?

Any guidance would be appreciated! Thanks,.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

The question concerns the FilePicker control in an SPFx web part and image storage in SharePoint Site Assets/SitePages. Start by reviewing the existing FilePicker upload behavior and the SharePoint APIs or packages available for storing files and returning URLs. Done would be clear guidance on the recommended storage location and whether an existing library handles it.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
documentation
Issue type
Documentation
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.