Database Structure

Ok, let’s say that you have an Entity called Person and you need to upload an image/photo for each Person’s record. You probably will not need to use that photo every time that you access Person’s Entity, so it’s best practice (and specially best performance) if you create a new Entity attribute with the same Id as the Person’s Entity Identifier and a Binary Data attribute to save the file, this will avoid that the images are loaded every time that you access Person’s Entity.

Database should look like the image below.

Steps

1. Create an Entity with the primary key being of the type Person’s Identifier (establishing the relationship between a Person and his photo) and a Binary Data attribute to save the image file.

2. In order to upload an image you will need to use the upload widget from the toolbox.

3. You will also need a button or a link to perform the action to save the image file in the database. Here you need to have one thing in consideration: in order that the upload widget works the button/link method can’t be Ajax Submit.

4. You can just double-click the button and an action will be created (or you can create it manually) to save the data.

5. Create a local variable (in our case of the type PersonPhoto) to hold the data.

6. Assign an Identifier to the local PersonPhoto.Id (in our case it’s the PersonId received by the page), and the Binary Data from the Upload Widget Content attribute to Photo attribute in the PersonPhoto Entity. (This is just an example you will need to adapt this to your purposes)

7. Now you can just drop the CreateOrUpdatePersonPhoto under the assign and set the source to the local variable created before.

Your action should look like this.

Now the upload of the image should be working, but it will be useless if we can’t see the image, so in the next steps we will explain how to show an image from the database.

How to show image from the database  

1. To show the image we will use the Image Widget from the toolbox, just drag and drop it wherever you want.

2. After you do it a window will appear, and you should choose some default image to be displayed when an image doesn’t exist in the database.

8. Since you want the image to be set from the database you should change the widget attribute type to Database. (check picture below)

9. Some attributes will be unlocked and the Filename and the Attribute will appear as mandatory. So you need to set those. In the Filename, if you have the image file name in the database you can pass that parameter here, since we aren’t saving the image file names we just pass an empty string (“”), and in the Attribute we will pass the type of attribute that the widget will receive that should be of Binary Data type. (check picture below)

10. After you set the Attribute the Entity Identifier will appear as mandatory, you need to pass the Identifier of the image that you want to show (so in our case the Identifier is the same as the associated Person’s Identifier), and the widget will then find automatically the corresponding image.

And it’s done now you should be able to upload and see your images.
(sample attached)

Thanks João, next time the question comes up we can just point here :).

João Vicente wrote:

I tried this approach to upload image but unfortunately, I am getting this error.

Regards,

Pankaj Pant

Hi Pankaj,

First, please don't fully quote the previous post, this makes it very difficult to read your post. If possible, please edit your post and remove the quoted stuff.

Secondly, your error indicates that you are trying to store the image to the PersonPhoto Entity, without setting the PersonId.

Hi pankaj pant!

Sorry, I should have talked about that in the post, but in this case, you need to create a person before you upload an image, I made some changes in the app to make it more explicit, please see the oml again. 

Best regards,

João Vicente.