SitecoreAI - My first Sitecore Marketplace App (Media Upload)

Summary

SitecoreAI (formerly XM Cloud), recently enabled developers to create their own custom Sitecore Marketplace applications. This is exciting and allows us to customize user experiences in their SaaS platform.

Recently, we had a requirement to handle various types of spreadsheet and data imports into our SitecoreAI instance. The specific users doing these imports did not necessarily fit the role of a traditional content author. We wanted to create a simple solution where they could drop a file, click a button and upload a file to the media library without knowing all the details.

We figured it would be a fun exercise to build out a Sitecore Marketplace application to learn how they work and prove such a simple use case.

Ultimately, we decided to use this Sitecore Marketplace application for our client, we made it more complex and it followed specific business rules that their organization required.

This post will show the original version, which was just a proof of concept, that we used to upload a simple excel sheet to the media library.

The Solution

The first step was to download the Sitecore Marketplace starter project (opens in a new tab).

Next, we had to decide on the Sitecore Maketplace extension point we wanted to use. Sitecore outlines the details here (opens in a new tab). We decided to use the Full Screen extension point as we wanted it to be outside of the traditional content editing experience.

Then we had to register, configure and install the application. Sitecore documents the process here (opens in a new tab).

Once the starter repo is pulled down make sure the Sitecore Marketplace application is registered, configured and installed in SitecoreAI you can start developing against it locally.

The first thing to do is to navigate to the App and configure the Deployment URL to your localhost:

I won't dive into the details of the react elements on the page as that is pretty straight forward. Essentially, we needed a draggable file upload box and a button to process the upload to SitecoreAI's media library. We leveraged Blok (opens in a new tab) for these elements, a fast and flexible UI design system with components ready to use.

The starter comes with a hook called useMarketplaceClient.ts. This is how we interact with the client and communicate with SitecoreAI.

When the user uploads a file and clicks the upload button the following happens in page.tsx:

We construct our GraphQL mutation to upload our Media:

Please note that it returns a presignedUploadUrl. This is a url we need to send a POST request to so we can upload media to the media library in SitecoreAI. Uploading media involve sending a file and is a little more complex than a regular item mutation. See the documentation here (opens in a new tab).

Now we call the client and pass our query mutation along with the item path we want that media library item to be created at. This returns the presignedUploadUrl upload url from SitecoreAI:

We then call a proxy api, src/api/upload-proxy that we wrote to upload the Media item. We did this as we needed to pass JWT credentials to upload the file to SitecoreAI and also to avoid any potential CORS errors:

The POST function shows how we take the presignedUploadUrl that was returned from our GraphQL mutation and POST that along with the file to SitecoreAI:

We get our Client Id and Client Secret from the SitecoreAI Deploy application, documentation here (opens in a new tab) and save them in our .env:

The file has now been sucessfully uploaded to SitecoreAI's media library.

This is the final Sitecore Marketplace application:

Conclusion

This proof of concept was very simple, but it demonstrated a very real and powerful use case that we could grow and expand upon for our content editors in SitecoreAI. Sitecore has enabled us to create custom Sitecore Marketplace applications and it is very exciting to see what we can do next.