Using Media Library

When developing an application in Iotellect, the Media/Content Library plugin is a priceless tool to store and manage the application’s assets. This is especially true for working with CSS of dashboard components, as it comes in handy in so many ways by allowing storing and accessing:

  • Media assets (images, videos, etc.) of all types

  • Custom fonts

  • CSS files themselves

  • Any file that you potentially want users to download via direct link

Using the Media Library eliminates the risks of your linked assets being no more available and provides all the usability needed to replace accessing the Server filesystem in order to store assets locally.

Uploading Assets to the Plugin

To put a file in the Media Library, you need to access the corresponding Server plugin:

  1. Locate the Media Library Server API context under Drivers/Plugins in the System Tree of your Iotellect product’s UI. You can use the search input in the tree’s toolbar to make it easier.

  2. Open the plugin configuration by clicking on it or from its context menu by right-clicking on the plugin and selecting the ( ) Edit Driver/Plugin Properties action.

  1. In the File List tab of the plugin configuration dialog, add a new element by clicking the () Add Row button.

  2. It’s good to organize things. Before adding any content to store, in the created table row, select Folder from the dropdown list in the Type field and give it a name in the Name field. That isn’t required, but keeping things in order never hurts.

  3. Now, move to the Folder Contents field and drill down into the created folder by clicking the () button next to the [ No records ] line.

  1. In the Folder Contents table, add a new row the same way as you did in the File List table earlier.

  2. This time, leave the Type field with the default File value. Add a name you will be using to refer to the file in the Name field. Leave the Cache Control field unchanged with the PUBLIC value.

  3. Upload the file to the File field.

  4. The Content Type field is there to specify the content-type HTTP header for the uploaded file. Depending on the file type it may be one of the MIME types according to RFC 7231 Media Types. In this example, we’re uploading a .png image, so the MIME is image/png.

  5. Apply changes by closing the configuration dialog with the OK button at the bottom. Now, the content entry is added.

  1. The file is added to the Media Library and can be accessed from anywhere in the Platform using

/content/file/folderName/fileName.extension

link. In this example, the link would be /content/file/media/cool_image.png.

A file added to the Media/Content Library can be reuploaded into the same data entry, if it’s needed to replace it everywhere where it was linked. In this case, it could be needed to refresh the browser cache depending on the option selected in the Cache Control field to see the changes.

Accessing the Uploaded Files from Custom CSS

To use a file uploaded to the Media Library in a web component’s CSS, link it as a regular file using the address based on the file’s location in the File List table:

  1. In the UI Builder, add a component to the dashboard by clicking on it in the Component Palette or by dragging it to the layout.

  2. Open its Properties Editor by hovering over the component on the layout with the cursor and clicking the () Configure button in the top-right corner of the appeared overlay, or by selecting it in the Component Tree.

  3. In the Properties Editor, switch to a tab containing a custom style property.

  1. In the opened tab, add the CSS style with the link to the Media Library entry to the local custom style property:

background-image: url("/content/file/media/cool_image.png");
background-position: center;
background-repeat: no-repeat;

  1. The style is applied once the field is out of focus, and the result is visible on the dashboard.

Was this page helpful?