Display of image in show page

I have option of photo upload in my create.gsp page. I'm able to see the uploaded photo in my create page and able to upload my photo in database, but cannot see that photo in my show page.

This is create.gsp page

<html>        
    <head>           
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />         
        <meta name="layout" content="billing-without-grid" />         
            <g:set var="entityName"         
        value="${message(code: 'skeletonBill.label', default: 'SkeletonBill')}" />            
        <title><g:message code="default.create.label"        
         args="[entityName]" /></title>           

        <script>      
            function showPhoto(imageFile) {        
             var fileReader = new FileReader();       
             var image = document.getElementById("uploadPhotoFile");       
             fileReader.onload = function(e) {          
            image.src = e.target.result;          
            }      
            fileReader.readAsDataURL(imageFile.files[0]);       
        }        
       </script>         
    </head>           
    <body>         
     <div class="body">          
     <div class="container-fluid">          
     <div class="row">          
     <div class="span6">         
         <img src="" name="uploadPhotoFile" id="uploadPhotoFile"            
                    height="200" width="160" />       
     <table style="width: 25%">        
     <tbody>       
     <tr class="prop">       
     <td valign="top" class="name"><label for="uploadPhoto"><g:message                        code="uploadInformation.uploadPhoto.label" default="Upload Photo" /></label></td>            
        <td valign="top" class="value ${hasErrors(bean: uploadInformationInstance,           field:    'uploadPhoto', 'errors')}">  
         <input type="file" id="uploadPhoto" name="uploadPhoto"         onchange="showPhoto(this)" />            
        </td>
        </tr>         
        </tbody>         
    </table>         
    </div>         
        </div>         
        </div>    
    </div>        
  </body>           
</html> '

Domain class that I created

class UploadInformation {       
     static constraints = {     
         uploadPhoto(nullable:true, maxSize: 16384 /* 16K */)       
     }      
     byte[] uploadPhoto        
     static transients = ["uploadPhoto"]         
     static mapping = {      
         uploadPhoto column:"uploadPhoto",sqlType: "blob"         
    }           
}

Solution

Anuj.

The problem I see after quick look at your code is:

static transients = ["uploadPhoto"]

UploadPhoto will not be saved to database because it's declarated as transient.
See more details transient properties