Working with the File Field Using Extensions SDK

The Extension SDK allows you to extend the functionality of Contentstack by enabling you to create a Custom Fields, Custom Widgets, and Dashboard Widgets.

While creating an extension in Contentstack, you can select File for the Field data type field. This ensures that the input data of the field to be saved in Contentstack is of type file.  

In this document, we will learn how to use File as the Field data type while creating an Extension, custom field.

Create an Extension with Field Type as File

Follow the steps given below to create a custom field extension:  

  1. Go to your stack, navigate to the Settings gear icon, and select Extensions.  
  2. On the Extensions page, click on the + Add Extension button, and select Create new. If you have not added any extensions in the stack yet, click on the create a new one link as shown below.

    Extension Selection.png

  3. In the Select Extension Type window, select Custom Field.

    Custom Field Selection.png

  4. On the Create New Extension page, enter values in the fields as given below:
    1. Title: Provide a suitable title for your custom field. This title will be visible when you select the extension in the custom field in your content type.  
    2. Field data type: Select the data type in which the input data of the field should be saved in Contentstack. In this case, select File.  
    3. Multiple: You can leave this field unchecked or select it if your custom field will expect multiple values. In such a case, the field will save the input values in an array.  
    4. Hosting method: Select either External hosting or Hosted by Contentstack. If you choose Hosted by Contentstack, you will have to provide the extension source code in the next field.

      If you choose External hosting, then provide the URL where the code is hosted.

    5. Extension source code: Specify the extension code here if you have selected Hosted by Contentstack in the above step.
    6. Config Parameter: Here specify the required configuration parameter for your extension.  
  5. Once you have configured the extension, click on Save to save the settings.  

Saving Data Using File Type

In order to save data using file type, you need to pass the asset uid of your uploaded asset into the setData() method. The setData() method sets the data for the current field. 

Let's see how we can use this method when we are dealing with only a single file. 

When you write the extension code for your custom field, you can specify the method by using the following format:

extension.field.setData(“asset-uid”);

In the above line of code, you need to specify the UID of the asset, an example is shown below:

extension.field.setData(“blt7d89318d346***”);

To set the data when you are using multiple files, you need to specify the UIDs of the assets by using the following format:

extension.field.setData([“asset-uid1”, “asset-uid2”, “asset-uid3”]); 

An example is shown below: 

extension.field.setData(["bltd7618c9cba201***", "blt4edda9a4d9605***", "bltecb320669fefb***"]); 

Note: You can use the management token for uploading assets through extensions. For example, you can upload the asset through the management token, get a reference to asset UID, and then call the setData() method. 

This is how you can set the value of the files (assets) by using the setData() method while using the Extensions SDK.

Was this article helpful?

Thanks for your feedbackSmile-icon

On This Page

top-arrow