Learning XPages Part 38 : Uploading An Image For The Person’s Picture

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.

A picture named M2

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.

A picture named M3

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.

A picture named M4

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

A picture named M5

and here’s what it looks like after
I upload the image and save the document

A picture named M6

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.

Advertisements
Tagged with: , , ,
Posted in None
4 comments on “Learning XPages Part 38 : Uploading An Image For The Person’s Picture
  1. Patrick Picard says:

    Any way to automatically resize the image so it does not mess up the sizing of the image area?

    Like

  2. Jerry Carter says:

    @ Patrick,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.

    Like

  3. vijayasree says:

    i am not understand

    Like

  4. vijayasree says:

    i cant able to see the image when it get uploaded in xpage.i need to view the image in the same page.please clarify my doubt……

    Like

Comments are closed.

Archives
%d bloggers like this: