Uploading An Image Using Crownpeak Access API

The Crownpeak Access API is a library that enables web developers to create customer applications that can access many of the classes of the CMS API from outside the CMS environment. Using Accesss API, developers can create, import, and manage CMS Assets.

In this article we will cover how to upload an image [binary asset] from an asp.net application - into the CMS.

Prerequisites:

Understanding of C#, Crownpeak CMS, Crownpeak Access API

Lets Start:

The first step is to request the API KEY from Crpownpeak Support for your instance. To access the api, you will need this key along with your CMS login credentials.

Lets create a fresh asp.net project and add below mentioned dll as reference.

CrownPeakPublic.dll

Add below namespace references wherever we need to use the api.

CrownPeak.AccessAPI
CrownPeakPublic.AccessAPI

Add API related info into your web.config. These config keys hold credentials and instance information for connecting to Crownpeak thruogh Access API.

<add key="host" value="https://cms.crownpeak.net" />
<add key="instance" value="[CROWNPEAK_INSTANCE]" />
<add key="username" value="[CROWNPEAK_USER_ID]" />
<add key="password" value="[CROWNPEAK_PASSWORD]" />
<add key="apiKey" value="[CROWNPEAK_ACCESS_API_KEY]"/>

Create a helper class, where all the common code/functions related to login/connecting to Access Api will reside. Create a function to login via Access Api as below:

public static object login() {
  object session = null;
  string username = ConfigurationManager.AppSettings["username"];
  string passwod = ConfigurationManager.AppSettings["password"];
  session = new AccessSession(ConfigurationManager.AppSettings["host"], ConfigurationManager.AppSettings["instance"], username, passwod, ConfigurationManager.AppSettings["apiKey"]);
  return session;
}

Above code block is used to login into the CMS and it returns a AccessSession object using with we will be able to perform the desired CMS actions.

For uploading the image into the CMS, we will need to specify the CMS path where it will be saved and a Model which holds the additional asset properties like the type of asset, workflows etc. To do this, add the below two keys in your web.config

<addkey="cmsPath"value="[CMS Path where asset will be uploaded e.g. /root/folder 1/folder 2/]"/>
<addkey="assetModel"value="[Asset ID of Model e.g. 12345]"/>

Now create a method, that will take 2 parameters. One is file name and other is the InputStream. This method will connect and upload the file to the CMS.

public static void createBinaryAsset(string labelname, byte[] content)
{
  object sessionObject = null;
  string cmsPath = ConfigurationManager.AppSettings["cmsPath"];
  sessionObject = login(); // Login to crownpeak using crownpeak credentials.

  AccessAsset accessAsset = new AccessAsset(((AccessSession)sessionObject).Client);

  AssetExistsResponse _AssetExistsResponse = accessAsset.Exists(new AssetExistsRequest(cmsPath));
  if (_AssetExistsResponse.exists)
  {
    AssetUploadResponse _AssetUploadResponse = new AssetUploadResponse();
    while (!_AssetUploadResponse.IsSuccessful)
    {
       int model = int.Parse(ConfigurationManager.AppSettings["assetModel"].ToString());
       AssetUploadRequest _AssetUploadRequest = new AssetUploadRequest();
       _AssetUploadRequest.bytes = content;
       _AssetUploadRequest.destinationFolderId = _AssetExistsResponse.assetId;
       _AssetUploadRequest.newName = labelname;
       _AssetUploadRequest.modelId = model;
       _AssetUploadResponse = accessAsset.Upload(_AssetUploadRequest);
    }
  }  
}

Now, lets create an Asp.net page with the file upload control and a button as shown below

<formid="form"runat="server">
	<div>
		<asp:FileUploadID="fileupload"runat="server"ClientIDMode="Static"/>
		<asp:Buttonrunat="server"ID="btnUpload"Text="Upload to CMS"onclick="btnUpload_Click"/>
	</div>
</form>

On click event of btnUpload, write the below code

protectedvoid btnUpload_Click(object sender, EventArgs e) {
  if (fileupload.PostedFile != null && !string.IsNullOrEmpty(fileupload.PostedFile.FileName)) {
    APIHelper.createBinaryAsset(fileupload.PostedFile.FileName, APIHelper.ReadFully(fileupload.PostedFile.InputStream));
  }
}

Run the project. Output page would look like:

On click of the button, the selected image would be uploaded to Crownpeak CMS at the configured path.

Additional References:

1. https://developer.crownpeak.com/Documentation/AccessAPI/index.html

2. https://github.com/Crownpeak/Access-API-Examples