History

dependabot[bot] 36d58e1af4 Bump webpack-dev-middleware from 5.3.3 to 5.3.4 in /samples/react-avatar Bumps [webpack-dev-middleware](https://github.com/webpack/webpack-dev-middleware) from 5.3.3 to 5.3.4. - [Release notes](https://github.com/webpack/webpack-dev-middleware/releases) - [Changelog](https://github.com/webpack/webpack-dev-middleware/blob/v5.3.4/CHANGELOG.md) - [Commits](https://github.com/webpack/webpack-dev-middleware/compare/v5.3.3...v5.3.4) --- updated-dependencies: - dependency-name: webpack-dev-middleware dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>		2024-03-23 12:38:31 +00:00
..
assets	Updated sample.json and readme	2023-01-01 17:27:42 -05:00
config	Adding PnP identifier for the MPN ID entries in samples - distinct sample usage in production	2021-01-07 14:51:39 +02:00
src	Add files via upload	2023-01-01 17:27:42 -05:00
teams	Adding react-avatar sample	2020-08-12 00:54:53 +05:30
.editorconfig	add missing files	2020-10-20 14:18:39 +01:00
.gitignore	add missing files	2020-10-20 14:18:39 +01:00
.yo-rc.json	add missing files	2020-10-20 14:18:39 +01:00
README.md	Updated contributors for readmes	2023-03-15 00:11:27 -04:00
gulpfile.js	Adding react-avatar sample	2020-08-12 00:54:53 +05:30
package-lock.json	Bump webpack-dev-middleware from 5.3.3 to 5.3.4 in /samples/react-avatar	2024-03-23 12:38:31 +00:00
package.json	Bump debug, @microsoft/sp-build-web and @microsoft/sp-webpart-workbench	2023-01-12 08:48:33 -05:00
tsconfig.json	update to SPFx 1.11.0	2020-10-20 14:32:40 +01:00
tslint.json	Adding react-avatar sample	2020-08-12 00:54:53 +05:30

README.md

Avatar Editor

Summary

This is a sample web part that helps user create their avatar and save as profile picture. User can even download their avatar as PNG file. This web part can be useful in Intranet to help user create their avatar and save it as profile picture.

Features

Avatar Generator from multiple options available
Set Avatar as Profile Picture.
Download Avatar as PNG file.

Compatibility

⚠️ Important
Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.
Refer to https://aka.ms/spfx-matrix for more information on SPFx compatibility.

Applies to

SharePoint Online

Prerequisites

SharePoint Online tenant
You have to provide permission in SharePoint admin for accessing Graph API on behalf of your solution. We can do it before deployment as proactive steps, or after deployment. You can refer to steps about how to do this post-deployment. You have to use API Access Page of SharePoint admin and add below permission for our use case.

 "webApiPermissionRequests": [
      {
        "resource": "Microsoft Graph",
        "scope": "User.ReadWrite"
      }
    ]

Concepts

This Web Part illustrates the following concepts on top of the SharePoint Framework:

Using react framework in SPFx web part
Calling Graph API my Photo to store the image in SPFx web part
Usage of Material UI Tab and Dialog
Usage of avataaars

Web Part Properties

Property	Type	Required	comments
Web Part Title	Text	no

Contributors

Kunj Sangani

Version history

Version	Date	Comments
1.0.0	August 1, 2020	Initial release
1.0.1	October 20, 2020	Update to SPFx 1.11.0
2.0.0	November 18, 2022	Added hat color, facial hair color, background color support

Minimal Path to Awesome

Clone this repository
in the command line run:
- npm install
- gulp build
- gulp bundle --ship
- gulp package-solution --ship
- Add to AppCatalog and deploy

This sample can also be opened with VS Code Remote Development. Visit https://aka.ms/spfx-devcontainer for further instructions.

Help

We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.

If you're having issues building the solution, please run spfx doctor from within the solution folder to diagnose incompatibility issues with your environment.

You can try looking at issues related to this sample to see if anybody else is having the same issues.

You can also try looking at discussions related to this sample and see what the community is saying.

If you encounter any issues using this sample, create a new issue.

For questions regarding this sample, create a new question.

Finally, if you have an idea for improvement, make a suggestion.

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.