<input> tag specifies an input field where the user can enter data. An input field can vary in many ways, depending on the
type attribute. The
<input> elements with
In this article, we will focus on creating a CloudPages form with an image input field, and uploading that image into Marketing Cloud’s Content Builder. The high-level outline of this process, which can be found in this Stack Exchange post, is: once the file has been uploaded via the form, it needs to be Base64 encoded, and then passed in a REST API call to the /asset/v1/content/assets route in order to create the image in Content Builder.
I will break it down into smaller parts to make it easier to understand the different steps along the way.
Create an input field
Let’s start with creating an
<input> field on a CloudPage. The input needs to be of the
type="file" in order to allow the end-user to choose a file for upload from their local machine. We will also add an
accept attribute, which specifies a filter for what file types the user can pick from the file input dialogue box. For our use case, it will be
image/*: [see code snippet]
We also need to include an
Encode the image using Base64
Base64 is a group of binary-to-text encoding schemes which enable storing and transferring data over media that are designed to deal with ASCII (text) only. In order to encode the image, we will use the FileReader.readAsDataURL() method to securely read the contents of a file stored on the user’s computer and return a
result attribute containing a
data: URL representing the file’s data. We will use the addEventListener() method to attach a click event to the
Upload button, which will trigger the encoding function: [see code snippet]
The format of the returned result is the following:
mediatype is a MIME type string, such as ‘image/jpeg’ for a JPEG image file and
<data> is the Base64 encoded string representing the uploaded file.
Fetch the data to processing page
base64encis the encoded string which represents the image
fullFileNameis the full name of the file uploaded by the user (eg. “astro.png”)
fileNameis the first part of the file name, before the filename extension (eg. “astro”)
assetNameis the filename extension (eg. “png”)
Once we have the above, we can POST it in JSON format to the processing page that will contain the server-side script. Our request will look like this: [see code snippet]
method is POST, headers specify that the
content-type is JSON and in the JSON
body we will have three attribute-value pairs,
fetch() method argument is the path to the CloudPage containing our server-side script, so, for now, you can create an empty CloudPage just to obtain the link.
fetch() method returns a promise that resolves to a response to that request, whether it is successful or not:
The full client-side script
Let’s now put all of the above elements together to create our first CloudPage. The complete code will look like this: [see code snippet]
Now we can move on and prepare the second part of the script.
Retrieve the posted data
In order to retrieve the data posted from our first CloudPage, we will use the
Prepare the data for API call
Now we can prepare the data for our API call. Let’s take a look at an example JSON body of a create asset request: [see code snippet]
In the above, the first
name represents the name of the file. The second parameter
assetType, consists of a
name which represents the file extension and an
id of the asset type. Asset types are the file or content types supported by Content Builder and the full list can be found here: List of Asset Types.
Let’s prepare the data and match the asset type based on the name of the file extension: [see code snippet]
If you’re only going to upload images, you don’t need to include the whole list of asset types – the ones that start with “2” will be sufficient.
Create an asset using REST API
Once we obtain the
accessToken, we will need to include it in our final API call, along with the
rest_instance_url: [see code snippet]
The above call will create an image in Content Builder’s main folder and return the following response: [see code snippet]
The full server-side script
Here is the full script for our second CloudPage: [see code snippet]
You can now go back to your first CloudPage and start uploading!
To see this script in action, visit my CloudPage.
Leave a comment below or email me at email@example.com.