Using Database Storage for Images in Morfik

User-Contributed Article

This article has been submitted by Adam Brett.

If you wish to provide any feedback regarding this article please post your comments on the Morfik Discussion Forums under the documentation category.


Introduction

Putting images on a web-page is usually achieved by including a URL in the page which points to a specific image file on the web-server.

In old-style HTML:

<html>
<body>
<heading>Hello World</heading>
<img width=167 height=222 src="/images/srpr/nav_logo13.png" alt=""></a></h1></div><div class=tsf-p style=padding-bottom:2px>
</body>
</html>


Java-based methods similar to this are used by Morfik to manage static images, such as the JPG banner of the top of a site, or a JPG rendering of a company logo.

For static images the suggested best-practice for Morfik is to copy all the images you want to use into the “Resources” folder of your project (“..\\<yourfolderpath>\_<yourXappName>Resources”). Morfik can then “bundle” these images to make your site faster.

However, Morfik is data-centric. This means the content of pages is often drawn from database tables and it is very likely that you will want to associate an image with a particular record in the database table. You may even want to write a site in which users up-load images associated to segments of data they are entering.

Morfik makes this complex process as simple as possible, but there are a few tips and tricks to making it work well.

Adding a Picture field to a Morfik database table

Picture fields in Morfik database tables can be stored as “Linked” or “Embedded” there is a very big difference between these two settings which is critical to how Morfik behaves. The default is “Linked.”

Figure 1, below shows the Morfik table designer with a Picture field. Note that the “field class” is selected as Embedded in this case.

“Linked” pictures are not stored in the database. Instead the actual picture data-file is stored on-disk in the location specified in the “URL Root”. In this case the “Picture” field only stores a link to the file-name of the picture plus the URL Root. If multiple files with the same name are stored in the database Morfik renames them <ImageName>(1), <ImageName>(2) when they are copied to the new URL location.

“Embedded” pictures are actually stored in the BLOB field of the database.


db-image-table-designer.png
Figure 1: Morfik Table designer with Picture fields


Using “Linked” as the field class allows the programmer to store the picture files in a simple folder on the web-server, it allows easy access to the files for editing (so long as the file name is preserved). It also allows the picture files to be re-used in other contexts of the website such as static content.

However, if a Picture field is “Linked” you cannot easily share the database table between different Morfik applications, as Morfik Xapp2 will not be able to see the URL-Root folder of MorfikXapp1.

Using “Embedded” images allows easy sharing of image file data between multiple Xapps.

Uploading Pictures into the database table

Morfik's table editor includes an editor dialogue, shown in figure 2, below, which allows manual insertion of picture files into database-tables.

Simply clicking on the “Load” button accesses the programmers local file system for selection of the image. If the picture field class is “Linked” the chosen file is copied to the chosen location. If the field class is “Embedded” the chosen file is stored in the data-table's BLOB field.


db-image-table-loading.png
Figure 2: Picture loading dialogue in Morfik


Important Tip/Gotcha

If the programmer has access to external data-management tools, perhaps image transfer programmes they have written in another programming environment such as Delphi these will only work if the field class is “Embedded.”

Of course pictures can be loaded into a Morfik data-table using a Morfik application. This is probably the easiest off all the ways of integrating picture up-loading into your management of images in Morfik.


db-image-uploader.png
Figure 3: 2 of Morfik's Image-uploader components on a simple form


Figure 3 above shows 2 Morfik image-uploader components on a form. The Image-uploader component includes a “Data Field” property which can be set to a field of your choice in the database-table. This will automatically manage the upload process and whether the file-content is stored “Embedded” or “Linked” and will store the data in the data-table of the Form's datasource.

Important Tip/Gotcha: This update process works best / most easily if the Form's data-source is a data-table, not a Query as Queries often return read-only data. Refer to other Morfik documentation for clarification on this issue if necessary.

Important Tip/Gotcha: To help to regulate volumes of web traffic and the size of upload-files, Morfik has included a maximum-upload-size property in the FileUploader.

Unfortunately due to the way AJAX works this property cannot be published directly on the FileUploader object, but is a property of the rather grander Catalog object. The Catalog object is a useful “holder object” for a whole range of properties such as IE6Support, DBConnectionString and many others.

Properties of the Catalog object can be set in code. The most sensible place to do this in this case is by adding code to the Xapp's AppStart event:

  1. In the Morfik IDE, with the “Project” tab highlighted go to the Events inspector.
  2. Add code to the “On Start” event


db-image-table-xapptip.png
Figure 4: Morfik Application Events


Procedure Project1XApp.XAppStart(Sender: TObject);
 
Begin
  Catalog.PostLimits.AddLimit('fileupload',8 * 1024 * 1024);  //This is 8 meg
End;

Related Topics