Uploading and Displaying a photo or image
(Data Bound - Web App)

Capturing, saving, displaying photos or other images is a very useful feature of an app. This section describes Data Bound Images (images that are caputured from a device during app operation or from a database datafile). Using photos or pictures for backgrounds, logos, icons, pictures, etc that are used in the app design and do not change once a app is generated are called Static Images
Uploading images and displaying them in an Evoke App is consistant but choices can be made regarding storing the image or a pointer to the image in the database record. This section of the Evoke helps reviews photos being phyically stored centrally, outside the database and a pointer to that photo being included in the database record. We will use the example of an expense form, with seperate expense lines that each have the option of a receipt being uploaded, stored and displayed.
The Database Fields
The Evoke App Entity for the Expense Line will need a field for the pointer to be stored. This field will need to be initialised, when a new expense line is stored to hold a unique value. This will be used to name the photo and resolves the issue of two or more people uploading an image called, for example, "myreceipt.jpg". If the database already has existing records that you want to add an image/photo to, e.g. a product record, then the current database will need this new field in the existing records initialised to a unique value.
The new photo name/pointer field is simply an Alphanumeric or Short String field. It can be called anything you would like and in this example we have called it GUID. The reason for this is that Evoke can initialise the field for you when a new record is created and the {GUID} command in the Entity field initialise value will generate a unique 6 digit value in this field. If existing records are populated with a unique 4, 5, 7 or 8 alphanumeric field that all values in these fields will be unique.
An example of the new field in the receipt line Entity is shown on the right and the initialise option of {GUID} is shown also.
Add Display image and Upload image to an App screen / Page
In the Page where you would like to display and offer the option to upload a new photo/image, either access the template you would like to add this to OR create a new template. This template will need to be linked to the Datasource that contains the name/pointer field (in the case of the example this is the Expense Line entity).
Add two new properties to the template and select GUID for both. It is fine to have two instances of the same entity property in the same template. The first instance will be to display the image, the second will be to offer the upload option.
Display Image/Photo
For the first instance select the Editor Type of "Image". A screenshot of the setup of this widget, within the template, is shown on the right. It is very important for this widget to give it a unique widget id, in the example we have used "ReceiptImageUpload". This will be used to ensure that new images are immediately displayed even if a browser is caching images.
The folowing editor specific fields further define the widget:
  • Widget Row Height - Select the size that you would like to reserve for displaying the image.

  • Metered Connection Check - If the boolean property "OnMeteredConnection" in the AppUser Entity is set to {true} then the image is not downloaded to the device to save using the users "data" allowance.

  • Image Path Type - as the image is to be uploaded and stored, in this example, the path will be a databound path

  • Image Path Prefix - where to store the images. If they are not physically stored in the database (this example) then they can be stored anywhere on the server as long as this is accessible to the app. In this case, we have specified a path of "Images/Common/Receipts" this will store the images within the Visual Studio project for this App that was deployed to a web server. In this case .../Web/Images/Common/Receipts. If the final folder does not exist (e.g. receipts) then please remember to create this.

  • Image Path Suffix Data - the name of the image photo is provided by the uniquely initialied GUID value (which can be blank or nothing), this suffix data field allows for the name of the image to be populated from a datafield in the database (Entity).

  • Image Path Suffix (with .ext) - the name of the image photo is provided by the uniquely initialied GUID value, this suffix field defines the filetype extension to be added. In this example we have used .JPG which opens all images uploaded from mobile devices and those scanned/stored on a desktop computer.

  • On Image not found - options are a) Use alternative image (allows for the selection of an alternate image), b) hide container (hides the box the image would have appeared in), or c) do nothing.

  • Image Alternate Path - If On Image not found is checked this is where the alternate image is stored.

  • Disable Browser Cache - used in conjunction with the Widget ID during the image upload to ensure that the new image is displayed immediately and not a cached image. In this example this is checked to disable the browser cache.

  • Is Clickable - is the image clickable allowing a click on the image to open a new page or perform other actions, if checked this is used in conjunction with the next field "Actions on Click/Tap".

  • Actions on Click/Tap - opens the Evoke Click Actions allowing navigation to another page or any of the other powerful Evoke click actions.

Upload Image/Photo
For the second instance select the Editor Type of "ImageUploader". in this case the Editor Specific options change and a screenshot of the setup of this widget, within the template, is shown on the right.
The folowing editor specific fields further define the widget:
  • Caption text - the caption for the image uploader button, in the example at the top of this screen this text is "Upload Receipt" on the button.

  • Alternative Caption text - the alternative caption for the image uploader button, that may be used in conjunction with the Evoke Adaptations.

  • Image Path Type - as the image is to be uploaded and stored, in this example, the path will be a databound path

  • Image Path Prefix - where the images are to be stored when uploaded. If they are not physically stored in the database (this example) then they can be stored anywhere on the server as long as this is accessible to the app. In this case, we have specified a path of "Images/Common/Receipts" this will store the images within the Visual Studio project for this App that was deployed to a web server. In this case .../Web/Images/Common/Receipts. If the final folder does not exist (e.g. receipts) then please remember to create this.

  • Image Path Suffix Data - the name of the image photo is provided by the uniquely initialied GUID value (which can be blank or nothing), this suffix data field allows for the name of the image to be populated from a datafield in the database (Entity).

  • Image Path Suffix (with .ext) - the name of the image photo is provided by the uniquely initialied GUID value, this suffix field defines the filetype extension to be added. In this example we have used .JPG which opens all images uploaded from mobile devices and those scanned/stored on a desktop computer.

  • Image widgets to reload - enter the Widget IDs of the widgets used to display this image, these will then automatically be updated to avoid image caching by a browser. Add multiple widgets by adding a space between widget IDs.

  • Disable Browser Cache - used in conjunction with the Widget ID during the image upload to ensure that the new image is displayed immediately and not a cached image.

  • Is Clickable - is the image clickable allowing a click on the image to open a new page or perform other actions, if checked this is used in conjunction with the next field "Actions on Click/Tap".

  • Actions on Click/Tap - opens the Evoke Click Actions allowing navigation to another page or any of the other powerful Evoke click actions.