How to Use Thumbnail Generator
Step 1 – Add the Thumbnail Generator Block
Open your OutSystems application and navigate to the Screen or Block where you want to generate thumbnails.
From the Thumbnail Generator component, drag and drop the:
ThumbnailGenerator
Block onto your Screen or Block.
Example:
Screen
│
└── ThumbnailGenerator
Step 2 – Handle the Thumbnail Generated Event
The ThumbnailGenerator Block exposes the following event:
ThumbnailGenerate
Configure an Event Handler for this event.
In your Screen/Block:
└── ThumbnailGenerate
▼
Event Handler
The Event Handler receives the generated file information.
Step 3 – Access the Returned File Data
The ThumbnailGenerate event returns:
ThumbnailGenerateReturnFileData
└── FileData
The FileData contains the information generated by the Thumbnail Generator.
The structure contains:
Attribute Description
FileName Name of the uploaded file
FileSize Size of the original file in bytes
FileMimeType MIME type of the uploaded file
FileBinaryData Original file binary data
NumberOfFilesToUpload Number of files being processed
ResizeFile Generated thumbnail returned as Text
Step 4 – Display the Generated Thumbnail
One of the main features of this component is that the generated thumbnail is available in:
ResizeFile
ResizeFile is returned as Text and can be directly assigned to the src attribute of an HTML element.
Add an HTML Element to your Screen.
Set the HTML tag to:
img
Attribute: Property= src Value = LocalFileData.ResizeFile
Step 5 – Display File Information
You can display the returned file information in your Screen.
For example:
File Name:FileData.FileName
File Size:FileData.FileSize
File Type:FileData.FileMimeType
FileBinaryData:File.FileBinaryData (Orignal Image)
You can also display the number of files processed:
Number of Files:
FileData.NumberOfFilesToUpload