Amazon S3

You can add an Amazon S3 custom field extension to your stack that allows you to fetch your data (documents, images, videos, and so on) and display them into a field of your content type.

Subsequently, while creating entries, you can select appropriate data (as mentioned above) as the input value for the field.

This step-by-step guide explains how to create an Amazon S3 custom field extension for your content types in Contentstack. The steps performed are as follows:

  1. Create an Amazon S3 Service account
  2. Add the Amazon S3 custom field extension to your stack
  3. Use your custom field

Prerequisites

  1. Create an Amazon S3 Service Account

    In order to use this extension, you need to create an account with Amazon Web Service. To do that, follow the steps given below:

    1. Go to https://aws.amazon.com/s3/ and click on Get Started with Amazon S3.
    2. On the next screen, you'll be asked to log in. If you already have an account, just log in with your credentials. Else, click on Create a new AWS account
    3. Then, follow the on-screen instructions and get your account created. AWS will notify you by email when your account gets activated and available for you to use.
    4. Once your account is created, log into it. Select S3 from the Services drop-down. You'll see your dashboard as shown below:

      S3 Dashboard.png

    5. To start using S3, you need to create a bucket for your account which will hold your objects. So click on Create bucket to add your objects in it.

      Note: Currently, the extension doesn't support navigating the folders in your bucket. So it is suggested to keep your files in the root folder of your S3 bucket.

    6. Click on the bucket and add your objects. You need to make the objects public. So staying inside the Overview tab, select the object(s), then click on the Actions drop-down, and select Make public
    7. Now click on the Permissions tab and then click on CORS configuration. Paste the following inside it:
      <?xml version="1.0" encoding="UTF-8"?>
      <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
      <CORSRule>
          <AllowedOrigin>*</AllowedOrigin>
          <AllowedMethod>HEAD</AllowedMethod>
          <AllowedMethod>GET</AllowedMethod>
          <ExposeHeader>ETag</ExposeHeader>
          <ExposeHeader>x-amz-meta-custom-header</ExposeHeader>
          <AllowedHeader>*</AllowedHeader>
      </CORSRule>
      </CORSConfiguration>
      
    8. Staying inside the Permissions tab, click on Block public access. Ensure that all options inside this tab are unchecked so that your objects remain public. Click on Edit and ensure that it is unchecked as shown below:

      Public access block.png

    9. Now, click on the arrow next to your username at the top and select My Security Credentials as shown below:

      Security credentials.png

    10. Then, click on Access keys (access key ID and secret access key)
    11. Click on Create New Access Key and then on Show Access Key to view your keys. Ensure that you save the keys. You'll need these keys while setting up your extension in Contentstack. You can also download the keys by clicking on the Download Key File button.

    Additional Resource: For more information about the features of Amazon S3, its pricing, and FAQs, visit the Amazon S3 product page.

  2. Add the Amazon S3 Custom Field Extension to your Stack

    1. Go to Settings > Extensions. Click on the + Add Extension button on the top-right corner and select Create New.

      New Extension.png

    2. On the Select Extension Type window, select Custom Field.

      Select Custom Field.png

    3. On the Create New Extension page, enter details in the fields as given below:
      1. Title: Provide a suitable title. For example, AmazonS3.
      2. Field data type: Select the data type in which the input data of the field should be saved in Contentstack. Select Text in this case.
      3. Multiple: Check this to select it.
      4. Hosting method: The hosting method will be set to "Hosted By Contentstack." This option allows the source code for the custom field to be displayed in the "Extension Source Code" field.
      5. Extension Source Code: In this field, you need to enter the extension code. To get the code, get in touch with our support team at support@contentstack.com. Once you have downloaded the code, copy the code from the index.html file located in the root folder and paste it in the Extension source code field. 
      6. Config Parameter: Enter the following configuration details as the extension's config parameter:
        {
            "accessKeyId": "<<aws-s3-accessKeyId>>",
             "secretAccessKey": "<<aws-s3-secretAccessKey>>",
             "bucketName": "<<aws-s3-bucketName>>",
             "region": "<<aws-s3-region>>"
        }
        The values for accessKeyId and secretAccessKey is the same that you generated or downloaded previously. Region can be traced next to the bucket name on your S3 dashboard (for example, "us-east-1")
    4. Click on Save. This creates your custom field.

    Now, let’s understand how you can start using this custom field in your content type.

  3. Use Your Custom Field

    To use your custom field, you need to follow the steps given below:

    1. Click on the CONTENT link at the top and create a content type by clicking on the + New Content Type. Provide a suitable name to your content type, an optional description, and click on Create and Add fields.

      Create Content Type.png

      This leads you to the Content Type Builder page where you can add the relevant fields.
    2. Add the Custom field in your content type and a few other optional fields such as single-line text box, and so on.

      Add custom field.png
    3. In the Edit Properties pane on the right-hand side, click on the Select Extension drop-down and select your custom field, that is, AmazonS3 and set the other properties of your custom field.

      S3 properties.png
    4. After adding other relevant fields in your content type, click on Save and Close. This will create your content type.
    5. Now open the content type and create an entry as usual. You will see AmazonS3 field in your entry as shown below:

      S3_Filed.png
    6. Click on Choose asset. If you are still logged into Amazon S3, it will open inside your entry page, from where you can select multiple documents, images, videos, etc, and insert them in your entry as shown in the following screenshot:

      S3 Choose Asset.png

On This Page

top-arrow