how to display a blob type in struts2 jquery grid from mysql database?

Question

I was able to save an image as blob type in MySQL and now I want to display it using the struts2 jquery grid widget. I used the edittype="image" but it didn't work. It only displays some string. Any suggestion on which edittype i should use?

here is my jquery grid:

 <sjg:grid
        id="testresulttable1"
        caption="Test Result Summary"
        dataType="json"
        href="%{testtrsurl}"
        pager="true"
        gridModel="gridTRSModel"
        rowList="10,15,20"
        rowNum="15"
        viewrecords="true"
        viewsortcols="[true, 'horizontal', true]"
        resizable="true"
        multiselect="false"
        loadonce="false"
    >
<sjg:gridColumn
   name="screenshot"
   index="screenshot"
   title="screenshot"
   sortable="true"
   edittype="image"
/>

</sjg:grid>

thanks in advance for your help.

Typically you can't, you need to create a service to fetch the image setting the correct mime type so the browser knows what to do with it, in the grid you would point to this image producing service using an html image tag. That aside it may be possible to read the string using javascript in conjunction with the html5 canvas, this solution would be pretty unusual at this time... if it is possible at all, looks like it may be: stackoverflow.com/questions/6386748/… if you do use this unusual method with success, please let us know. — Quaternion
– Quaternion, Commented Feb 4, 2014 at 0:10

DarkHorse · Accepted Answer · 2014-02-05 06:48:15Z

1

Actually you cannot display blob-type in grid directly, what you can do is some work-arounds. Have image-id as hidden fields in grid, have a formatter which calls an function, which will read the image-id and get the blob data thru ajax call.

Then you can assign it to <img> in some <iframe> by setting its src attribute to binaryData recieved by ajax call.. Let me know once you implement it.

I had implemented similar logic for showing xml file which is read from mysql database as blob.

Note:Don't use blob directly, convert it to byte-array before you assign it to outputstream/inputstream :)

answered Feb 5, 2014 at 6:48

DarkHorse

2,77021 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arn-arn Over a year ago

hi DarkHorse... can you share the logic you made for displaying xml from mysql database? I will see if i can use the same logic for displaying images. thanks in advance

arn-arn · Accepted Answer · 2014-02-07 20:12:03Z

1

i took in the answers provided by Quaternion and Darkhorse and implemented them (thanks for your inputs). I also got a help from another blog.

Here is the solution: a. instead of blob, I used varchar and just store the filepath of the image b. in my grid, i used formatter which is pointing to a javascript c. the javascript is calling an action which returns a customised result type which in turn is passed on to the grid that calls the javascript thru the formatter attribute.

here is the javascript:

function formatImage(cellvalue, options, row) {

    if(!cellvalue){
        return "n/a";
    }else{
        var action = "http://localhost:8181/MySel20Proj-1.0/imageAction.action?imageId=" + cellvalue;

        return "<a href="+"'"+action+"'"+"title='' class='thickbox'><img src='" + action + "'  width='30' height='30 align='middle' border='0'/></a>"; 

    }   
}

for the struts action/config, please refer to this site: http://www.mkyong.com/struts2/struts-2-dynamic-image-example/

answered Feb 7, 2014 at 20:12

arn-arn

1,3971 gold badge21 silver badges32 bronze badges

2 Comments

DarkHorse Over a year ago

Sorry, couldn't provide you with sample code, as it was part of project of my prev employer..and good u made one of your own :)

arn-arn Over a year ago

it's ok...tnx DarkHorse.

Collectives™ on Stack Overflow

how to display a blob type in struts2 jquery grid from mysql database?

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related