Learning XPages Part 38 : Uploading An Image For The Person's Picture
Tags : Lotus Domino XPages File Upload
Bookmark :
Currently at the top of the person details XPages I have a static 'No Image Found' placeholder. In this part of the series I'm going to add a file upload control to the XPage so that you can upload an image and then change the placeholder to display that image if it exists. If it doesn't exist then it will just display the placeholder again.
Our domino form already has a richtext field called 'jpegPhoto' so we are going to use this to store the attachment. Lets open the content_person custom control and from the controls panel on the right drag in a new 'File Upload' control. I have placed mine just under the placeholder image that I'm currently displaying.
In the properties for the file upload control I have set the options up so that it will only accept a JPEG file and I have also decided I want to rename all uploaded files to 'thumbnail.jpg'. Again you'll see the diamonds to the right of the options meaning you can compute the values for these options, and example of this is where maybe you want to name the file using the persons first initial and lastname.
To make sure the upload option only appears when the document is in edit mode and I computed the visibility option on the control using the same personDoc.isEditable(); value that I used for the 'save Document' action button and I have also changed the visibility of the image placeholder to the !(personDoc.isEditable()); computed value so that it is hidden while the document is in edit mode, just like the 'Edit Document' action button.
On the data tab of the properties you need to bind the control to a field on the domino form. I have bound mine to the 'jpegPhoto' field.
Now select the Image control above. We need to make this display the image once it has been uploaded and the document saved. Go to it's properties and for the image source click on the diamond and select compute value. Here is the code I have used
var personImage:String = "noImage.png";
var attachmentList:java.util.List = personDoc.getAttachmentList("jpegPhoto");
if (!attachmentList.isEmpty()){
var attachmentObject:NotesEmbeddedObject = attachmentList.get(0);
personImage = "/0/" + sessionScope.personDocID + "/$FILE/" + attachmentObject.getName();
}
return personImage;
Here I am setting the default to 'noImage.png' which is a file resource in the database. I then create a list of all the attachments in the field 'jpegPhoto' and if there is more then one attachment I create a NotesEmbeddedObject variable from the first entry on the list and then calculate the URl to the image using the 'Zero View' method of /0/DocumentUNID/$FILE/attachmentName.xyz. The DocumentUNID I am grabbing out of the sessionScope. It was originally placed in there when we clicked on the person's name in the table on the locations XPage so that this XPage would know what document to open in it's data source definition.
Here's what it looks like before I upload the image
and here's what it looks like after I upload the image and save the document
Now that we have all our validation working and given the user a way to upload an image of themselves our application is starting to come together.
In the next part we'll look at some security aspects for the application.
Bookmark :
Currently at the top of the person details XPages I have a static 'No Image Found' placeholder. In this part of the series I'm going to add a file upload control to the XPage so that you can upload an image and then change the placeholder to display that image if it exists. If it doesn't exist then it will just display the placeholder again.
Our domino form already has a richtext field called 'jpegPhoto' so we are going to use this to store the attachment. Lets open the content_person custom control and from the controls panel on the right drag in a new 'File Upload' control. I have placed mine just under the placeholder image that I'm currently displaying.
In the properties for the file upload control I have set the options up so that it will only accept a JPEG file and I have also decided I want to rename all uploaded files to 'thumbnail.jpg'. Again you'll see the diamonds to the right of the options meaning you can compute the values for these options, and example of this is where maybe you want to name the file using the persons first initial and lastname.
To make sure the upload option only appears when the document is in edit mode and I computed the visibility option on the control using the same personDoc.isEditable(); value that I used for the 'save Document' action button and I have also changed the visibility of the image placeholder to the !(personDoc.isEditable()); computed value so that it is hidden while the document is in edit mode, just like the 'Edit Document' action button.
On the data tab of the properties you need to bind the control to a field on the domino form. I have bound mine to the 'jpegPhoto' field.
Now select the Image control above. We need to make this display the image once it has been uploaded and the document saved. Go to it's properties and for the image source click on the diamond and select compute value. Here is the code I have used
var personImage:String = "noImage.png";
var attachmentList:java.util.List = personDoc.getAttachmentList("jpegPhoto");
if (!attachmentList.isEmpty()){
var attachmentObject:NotesEmbeddedObject = attachmentList.get(0);
personImage = "/0/" + sessionScope.personDocID + "/$FILE/" + attachmentObject.getName();
}
return personImage;
Here I am setting the default to 'noImage.png' which is a file resource in the database. I then create a list of all the attachments in the field 'jpegPhoto' and if there is more then one attachment I create a NotesEmbeddedObject variable from the first entry on the list and then calculate the URl to the image using the 'Zero View' method of /0/DocumentUNID/$FILE/attachmentName.xyz. The DocumentUNID I am grabbing out of the sessionScope. It was originally placed in there when we clicked on the person's name in the table on the locations XPage so that this XPage would know what document to open in it's data source definition.
Here's what it looks like before I upload the image
and here's what it looks like after I upload the image and save the document
Now that we have all our validation working and given the user a way to upload an image of themselves our application is starting to come together.
In the next part we'll look at some security aspects for the application.
Comments
Posted by Patrick Picard At 04:06:02 PM On 03/06/2009 | - Website - |
Julian Robichaux created some Java code a while back that will allow you to scale images.
{ Link }
We've used it to resize images that were attached to two sizes for different uses. Works great for JPEGs.
Alternately, you could use jquery to measure the image size in a non displaying div and scale the image with JavaScript, though it gets messy. The better option would be to size and store your image server size for the intended purpose.
Posted by Jerry Carter At 11:36:46 AM On 03/09/2009 | - Website - |