Image Files

In this lesson, we will take a look at image files in M#. We will learn how to use image files on pages and how M# creates the URLs and file names. We will create a new entity called "Employee Photo" in our HelloWorld project and will add properties to learn about Image Files.

Important: It is important to know about "File" type in M# before going through this lesson. For more info, please read Lesson File in chapter 2.

Creating Image Files Type

First create a new entity and name it "EmployeePhoto" in M#. For more information on managing entities, please read lesson Entity, Page, Module in chapter 1.

Add property of type File within "EmployeePhoto" entity.

Set the "Title" of the property as "Photo".

Mark the Photo as an Image by selecting "IsImage" attribute.

Add another property of type File and give it a title of "Thumbnail"

Specify "Height and Width" for Thumbnail.

Mark is as "Auto Optimize".

Image Files Manipulation

At this point we have successfully created a new entity called EmployeePhoto which has a reference of Employee entity and two Image File properties. We will use Photo to store the original image and Thumbnail property will be used to generate and store thumbnails of specified size from the original image.

M# provides "File Upload" control for File type properties on asp.net Forms, as shown in the picture below: Forms are discussed in more detail in a separate chapter.

M# stores the provided files / images on the disk and File Names are stored in the database table. M# uses a special folder called "App_Documents (specified in AppSettings of web.config)" as the root folder for all the files in a project and then creates specific folder for each File Type property, using "Title" with a prefix of the entity "Name", as shown below:

Creating Thumbnails

Creating thumbnails doesn’t require any complex coding. You might have noticed that we didn’t mark the Thumbnail property as "Mandatory" while developing and didn’t require it on the Form either. That is because, we don’t want to ask the user for the same photo twice, but we will use the original "Photo" provided by the user in the "Logic Class" of our entity to generate thumbnails.