Data entry upload image

1. Problem description

When we collect employee information, we usually need to upload photos of employees. So how to realize the function of uploading images?

2. Solution

"File Widget" supports uploading image, the supported image formats are: jpg, png, gif, as shown in the following figure:

Note: The uploaded picture is stored in the database table in the form of binary code.

1. Prepare template

Open the designer’s built-in template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\First_Form.cpt, the template making process can refer to: Customized Data Entry, the form style is as shown in the figure below:

2. Widget setting

1) Add a "File Widget"  to cell H6. Since each employee only needs to upload one photo, check "Only support single file upload", as shown in the following figure:

Note: "Only supports single file upload", after checking this button, the uploaded photo will directly display the image and file name; if it is not checked, the image will not be displayed directly after uploading, only the file name will be displayed.

2) Click "Widget Setting> Mobile Terminal" to set the Upload Mode when previewing on the mobile terminal, select permission to take photos and choose from album, as shown in the figure below:

3) The uploaded image will be stored in the form of binary code under the PHOTO field of the EMPLOYEE table, so the field type of "PHOTO" in the database table needs to be modified to a type that can store binary, as shown in the following figure:

Note: blob type data may not be previewed in the dataset, please check whether the upload is successful in other database table query software.

3. Display image

When you need to display the image stored in the database, you can set "Display by Image" to solve it.

Select the cell, select "Cell Attributes> Other> Display Content", and select "Display by Image". As shown below:

4. Image layout setting

If the image is too large, it may not be displayed normally, you can set the "Image Layout" to solve it.

Select the cell, selelct "Cell Attributes> Style> Custom Style> Alignment", and set the Image Layout to "Adapt". As shown below:

5. Effect preview

Save the template, click "Data Entry Preview", click to upload the image, the effect is as shown in the figure below:

Note: Support App and H5 to upload image.

Refer to the completed template: %FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc-EN\Form\First_Form.cpt