Overview
This tutorial will introduce two methods on how to upload local images to your project via the Umajin Cloud and how to link them to a Feed.
Prerequisites
- Umajin Editor downloaded and installed.
Instructions
We will start by creating a simple feed component that will map through a title and an image file that we will have uploaded to the Umajin Cloud.
Step 1) Create a new blank project in the Umajin Editor to use as a testing platform.
Step 2) Open Umajin’s Cloud Services:
This is a place where you will be able to upload and manage any files that you would like to use for your project. Try uploading an image from your local folders into the cloud folder, it should appear in the box.
Step 3) Next, we will show you how to link your uploaded image to a Feed. Click on the Dynamic tab and create a Feed. (If you are unsure on what Feeds are and how they work, check out this tutorial https://help.umajin.com/component-list/data-driven/feed-list-component)
Step 4) Add a couple of simple headers for your data so that you can distinguish them later in the editor. Ours will have a title and an image header.
Step 5) When inserting references to certain files, we need to tell each column in the data table which type to search for. Right-click the icons above your column and select the ‘Type’ from the drop-down options. Ours is an image.
Step 6) Double click the column to open up the file picker. Then double click the image to insert it into the data cell. Now save your Feed.
Step 7) Set up your editor for testing. This will require adding a Feed List component to your page and creating a Master to map the data. Again, if this step is confusing, please refer to the Feed List tutorial. Our Master will need a text component to hold the ‘title’ and an image component for the ‘image’ file.
Step 8) In the properties section for the Feed List component, we will select our Media Upload Feed in Feed ID, our master through Master property, and then add in our data through Mapping. Mapping allows us to import our feed data into the components that we made in our Masters page. In our case, our title will be mapped to the Text 1 Component and our image will be mapped to the Image 1 Component.
Hit ‘OK’ and the result should look like this:
Congrats! You have successfully linked your cloud files to your Umajin App. This is especially handy when creating static Feeds where you know what you want to show. But, what if you want to add another image on the fly while your app is running? The next part of this tutorial will explain how to use Umajin’s JavaScript API to allow for extended flexibility.
