Render Image file located outside application context in gsp – Grails

Hi There I have seen people struggling with this issue. They have images uploaded to their website which are saved in a folder located in their context so that they can easily receive this image by just using:

<img class="Photo" src="${createLink(dir:'images',file:'dynamic_name.jpg'}" />

But that is a bad idea. If you have to redeploy the application and if anytime you forget to take backup of them, you will be in a loss. So a better solution will be, either you save it to a different location on your machine to save it in cloud based service where you easily get url of it. In my configuration I will be using a different file system location to store images and then render them. So, Let us start with uploader code in gsp: Add this code in your gsp, to create a simple uploader that uploads image to your action. Photo: < input name=”photo” type=”file” /> Choose input name as photo and type as file and create a uploader So, now our gsp uploader is ready. Let us write a action in image controller which receives image and saves it to a location on file system.

try {

 def mhsr = request.getFile('photo')

def fileName = mhsr.name

if(!mhsr?.empty && mhsr.size < 1024*2000){

mhsr.transferTo( new File("/home/arvind/Images/${fileName}.jpg") )

}

}catch(FileNotFoundException fnfe){

fnfe.printStackTrace()

render "path is not available"

} catch(MissingPropertyException mpe){

mpe.printStackTrace()

render "path is not available"

}

Yes, now the file has been uploaded to your file system. We will proceed with rendering it on gsp page. Simply create another action which reads image as stream from the saved location and renders it to gsp page.

def renderImage = {

String profileImagePath = "/home/arvind/Images/"

//String profileImagePath = grailsApplication.grails.profile.images.path

String image image = 'abc.jpg' // or whatever name you saved in your db

File imageFile =new File(profileImagePath+image);

BufferedImage originalImage=ImageIO.read(imageFile);

ByteArrayOutputStream baos=new ByteArrayOutputStream();

ImageIO.write(originalImage, "jpg", baos );

byte[] imageInByte=baos.toByteArray();

response.setHeader('Content-length', imageInByte.length.toString())

response.contentType = 'image/jpg' // or the appropriate image content type

response.outputStream << imageInByte response.outputStream.flush()

}

Now , we have our action ready. We now just have to render this image in our view.Simply add this code in the related page. Here renderImage.gsp

<img src="${createLink(controller: 'my_controller', action:'renderImage')}"

Done!!!!!!!!

Hope , now you are able to see images in your view

\m/

🙂 Cheers

Latest in Cloud

Given some links here you will be able to find as what is happening today in Cloud Computing. And expect the  same from all of you post your links and share them.

Cloud Tech

Look for White papers by Oracle and that of Intel too

Thanks