User Profile Photo UploaderIntroductionThis webpart allows administrative users to upload and crop a new photo on behalf of other users. The solution ensures photos are in jpeg format (to support exporting them to Active Directory), and formats the user profile picture (PictureURL) property correctly to ensure the photo can be synchronised with Active Directory.

What’s in the solutionThe solution contains a single webpart, and a number of JavaScript and CSS files.

JavaScript Files jQuery (http://blog.jquery.com/) jCrop (http://deepliquid.com/content/Jcrop.html / https://github.com/tapmodo/Jcrop) jQuer-Color (http://blog.jquery.com/2012/08/24/jquery-color-2-1-0/ / https://github.com/jquery/jquery-

color/) Custom solution JS file

CSS Files Custom CSS based on twitters bootstrap (only applies styles to elements in the webpart within a DIV with the

class .container jCrop.css

Setting Permissions for Administrative UsersThe administrative user must have permissions to Manage Profiles on the User Profile Service. To give the user(s) the required permissions, follow this procedure.

1. Logon the Central Administration site2. On the left hand navigation pane, click on Application Management 3. Click on Manage service applications under the Service Applications heading4. In the list of service applications, highlight the User Profile Service (the type will be User Profile Service

Application)5. On the ribbon, click on Permissions

Mathew Yarlett 1 User Profile Photo Uploader

6. In the Connection Permissions dialog, add all of the users who will be administering user profile photos, and assign each user added the Full Control permission. Click Ok to save the changes and close the dialog once you have finished adding users.

7. On the ribbon, now click on Administrators

Mathew Yarlett 2 User Profile Photo Uploader

8. Using the same list of users in step 6, add each user, assigning them the Manage Profiles permission. Click Ok to save the changes and close the dialog.

Installing the SolutionTo install the solution, use PowerShell to add and install the solution in the farm. Then activate the feature on site to add the webpart in the webpart gallery.

1. Copy the WSP file to the local file system of a SharePoint server.2. Open the SharePoint Management Shell 3. Add the solution to the farm.

E.g.add-spsolution -LiteralPath C:\Webparts\ProfileImageUploader.wsp

4. Install the solution.E.g. To a specific web applicationInstall-SPSolution ProfileImageUploader.wsp -GACDeployment -WebApplication http://myweb

5. Activate the feature on the site. This can be done via the GUI (Site Settings > Site Collection Administration > Site collection features), or via PowerShell.E.g. To activate the solution via PowerShell (Note the GUID 2a8e2773-b578-417d-8d9f-9cac898b9d6a is the ID of the ProfileImageUploader)Enable-SPFeature -Identity 2a8e2773-b578-417d-8d9f-9cac898b9d6a –Url http://myweb

6. Lastly, add the webpart to a webpart pagea. Browse to a (or create a new) webpart pageb. Edit the webpart pagec. Add a new page

Mathew Yarlett 3 User Profile Photo Uploader

d. Select the Upload and Format Profile Images webpart in the User Profiles category, and click Add to add it to the page.

e. [Optionally] Edit the webpart’s properties to set the maximum size (in bytes) allowed for a photo being uploaded.

Mathew Yarlett 4 User Profile Photo Uploader

Using the Solution1. Make sure you have the required permissions on the User Profile Service Application.2. Browse to the page you have added the webpart to. The webpart should look like this:

3. To get started, enter the user name (or browse for a user) that you want to update a profile photo for.

4. Next, click Browse, and select the new user profile photo for the user, then click Upload.

Mathew Yarlett 5 User Profile Photo Uploader

5. To crop the image, put the mouse over the image, and click in the image to begin drawing a selection box in the image (the cropping area), then right click the mouse to release the selection.

6. Click Crop Image to crop the image and preview the result.

7. Once you are happy with the result, click Save Image to commit the photo to the users profile.

Mathew Yarlett 6 User Profile Photo Uploader

8. The profile with the updated / new profile photo

Mathew Yarlett 7 User Profile Photo Uploader