How to use images in web-applications

This tutorial describes the Image component usage in web applications.

Look & Feel

• Upload - it is possible to predefine an image by pressing the button and selecting an image from the file system;

• Image alt [string] - also called alt tags and alt descriptions, alt text is the written copy that appears in place of an image on a webpage if the image fails to load on a user's screen. This text helps screen-reading tools describe images to visually impaired readers and allows search engines to better crawl and rank your website;
• Width [string] - image width by default;
• Height [string] - image height by default;
• Visible [boolean] - defines if the image is visible or not;
• Name [string] - component’s name;

Related business processes

Image in HTML is a reference to the image object itself. Therefore, Image always works with links and, in order to use image data, you need to get a link to it.

The following BPs are pregenerated for web applications usage:

• Image Get Properties - gets image properties:
  • Component ID [string] - component’s identifier;
  • Width [string] - image width;
  • Height [string] - image height;
  • Image URL [string] - image URL-address;
  • Tooltip [string] - tooltip string to be shown on hover;
  • Visible [boolean] - defines if the image is visible or not;
  • Loading [boolean] - sets image into “loading” state if true;

• Image Set Properties - resets all the properties of  the selected image and sets the given ones instead:
  • Component ID [string] - component’s identifier;
  • Width [string] - image width;
  • Height [string] - image height;
  • Image URL [string] - image URL-address;;
  • Tooltip [string] - tooltip string to be shown on hover;
  • Visible [boolean] - defines if the image is visible or not;
  • Loading [boolean] - sets image into “loading” state if true;

• Image Update Properties -  updates image properties:
  • Component ID [string] - component’s identifier;
  • Width [string] - image width;
  • Height [string] - image height;
  • Image URL [string] - image URL-address;
  • Tooltip [string] - tooltip string to be shown on hover;
  • Visible [boolean] - defines if the image is visible or not;
  • Loading [boolean] - sets image into “loading” state if true;

Usage example

Consider an example of loading a user profile avatar. The web interface consists of an image and a button that triggers the BP, and looks like this:

BP starts from onClick trigger. To pick the files from the user’s device filesystem Select Files block is used (Max files = 1, File types = Image). If the file is picked successfully array element with index=0 to be selected.

The resulting file element of the Files array must be uploaded to the web application server for further use (Server request POST /_files/). If the request is successful, the file object at the output of the Server request POST /_files/ block is passed to the input of the Expand file block to get its ID.

To get the URL, you need to take the file ID and convert its value to a string (To String). The relative file path  would be /api/_files/<ID>/download/. Thus, to upload an image, the file path has to be passed into the Image URL property of the Image Update Properties block.

Published application is on the example below