No description or website provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
CopyPasteImages
CopyPasteImagesWeb
.gitignore
CopyPasteImages.sln
README.md

README.md

Summary

This sample shows how to add the functionality of uploading images to SharePoint pages.

To set up this sample, we used a provider-hosted add-in using .NET CSOM that adds some files and script links to the Host Web.

It was based on some Components from the SharePoint PnP repository.

Applies to

  • Office 365 Multi Tenant (MT)
  • Office 365 Dedicated (D)
  • SharePoint 2013 on-premises
  • SharePoint 2016 on-premises

Prerequisites

It's important that the SharePoint site has the Publishing Feature enabled.

Solution

Solution Author(s)
CopyPasteImages Wiliam Rocha

Version history

Version Date Comments
1.0 May 01st 2017 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.


Step 1: Set up a Publishing Images library

The first step is to set up a Publishing Images library where the images will be saved. It must be placed on the same web of the Pages library.

Step 2: Add scripts

To demonstrate the functionality, you must add the ScriptLinks to the Host Web. This is all done using .NET CSOM. If building a custom branding solution with master page the links could of course be added directly to the master page.

var copyPasteImages = existingActions.Add();
copyPasteImages.Description = "copyPasteImagesScript";
copyPasteImages.Location = "ScriptLink";
copyPasteImages.ScriptSrc = "~site/SiteAssets/copypasteimages.js";
copyPasteImages.Sequence = 1010;
copyPasteImages.Update();
            

Copy Paste Functionality

The functionality will be installed and attached to the Body fields on your pages. So you can just copy an image from your photo viewer or editor.

Screenshot of navigation

And then, just paste it on the body of your Page:

Screenshot of navigation

The end result should look like this:

Screenshot of navigation