Displaying Blob Images

[sacu300]

I'm new to programming and also Coldfusion. Would someone be kind to show me
the code to display Blob Images. I'm getting an error "ByteArray objects cannot
be converted to strings". The code that I have is as follow:

<cfquery name="getImg" datasource="#Application.dsname#">
Select id, d_busdate,d_refno,imgData from #Session.db# where id='#Session.id#'

</cfquery>

<cfif #getImg.recordCount# gt 0>
<cfoutput><img src="#toBinary(getImg.imgData)#" width="650" height="300"
border="1"></img></cfoutput>:confused;

[unleashed]

This is how I do it... (You are limited to image sizes less than 64K though...
because toString is base64)

Your page containing information and image that you want to display.
*******************************************
<cfquery>
SELECT * FROM EMPLOYEES
</cfquery>

<img src="getPhoto.cfm?EmployeeID=#EmployeeID#" border="0" width="144"
height="180">
<!--- This calls your getPhoto.cfm page and passes in your EmployeeID --->
<br>#EmployeeName#
*******************************************

In your getPhoto.cfm page...

<!--- Need to have these two lines, you only want the image to be streamed
back to your display page and not any other text. --->
<cfsetting enablecfoutputonly="Yes">
<cfsetting showdebugoutput="No">

<cfquery name="getBlob">
SELECT TOP 1 EmployeePhotoBlob, EmployeeName FROM Employees WHERE EmployeeID =
#EmployeeID#
</cfquery>

<cfheader name="content-disposition"
value="Inline;filename=#EmployeeName#.jpg">
<cfcontent type="image/jpeg; charset=iso-8859-1">
<cfoutput>#tostring(tobinary(getBlob.EmployeePhoto Blob))#</cfoutput>

************************************
Hope this helps...

James
Sacramento, CA

[shahzad]

thanks for the script unleashed. Thats worked fine.

just one question though. what does <cfsetting enablecfoutputonly="Yes"> and
<cfsetting showdebugoutput="No"> really do in this case. Because if i take out
these lines, i get the following error
The image ?[url]http://localhost/testing/viewimages.cfm?[/url] cannot be displayed,
because it contains errors.

just trying to understand. thanks again

[unleashed]

When you are doing the image streaming (<img src="getImage.cfm?photoID=4">),
the only thing you want returned in the HTML stream is the photo. You don't
want any extra white space or debug code. This will often cause your image not
to be displayed and only give you the red X box.

On the thought of the red X box, in the event that you don't have an image for
a specific photoID or there is an error, you can add an "onError" to your image
tag and have it display an alternate image.

<img src="getImage.cfm?photoID=#photoID#" border="0" width="144" height="180"
onError="this.src='images/image_error.jpg'">

Hope this helps.

[sacu300]

Thank you very much! That works!:)

[shahzad]

hi unleashed,

i am back asking a question regarding the same issue :). I want to display
this image in a table and table has data in other rows. However, i only see
the image and can't see the table. anyway i can fix this? or is it not possible
at all because of cfheader and cfcontent?

thank you

here is the code:


<cfquery datasource="test" username="test" password="test" name="viewpic">
select image from images where id = 1
</cfquery>

<cfsetting enablecfoutputonly="Yes">
<cfsetting showdebugoutput="No">

<!--- if the user hasn't specified an email, give them the zip file to
download --->
<cfheader name="Content-Disposition" value="inline; filename=abc.jpg">
<cfcontent type="image/jpeg; charset=iso-8859-1">


<table border="1">
<tr><td><cfoutput>#toString(tobinary(viewpic.image ))#</cfoutput></td></tr>
<tr><td>second row</td></tr>
<tr><td>3rd row</td></tr>
</table>

[unleashed]

shahzad, you are close... You need to put your image queries in a seperate
"support" type file. You main page that displays all your data and tables will
call the support file (getPhoto.cfm) through the IMG tag. You are not gonig to
put the cfsetting, cfheader or cfcontent tags on the page displaying your data
and tables (see below).


page_with_table.cfm (This is going to be the page that displays your data.)
*******************************************
<cfquery datasource="test" username="test" password="test" name="getEmployees">
Select * from Employees where division = "Accounting"
</cfquery>

<table>
<cfoutput query="getEmployees">
<tr><td><img src="getPhoto.cfm?EmployeeID=#EmployeeID#"></td></tr>
<tr><td>#EmployeeName#</td></tr>
<tr><td>#EmployeeTelephone#</td></tr>
</cfoutput>
</table>
*******************************************

Now, you need a second page

getPhoto.cfm (The only thing this page does is streams the Image from the BLOB
to the browser window.)
*******************************************
<cfquery datasource="test" username="test" password="test" name="viewpic">
select EmployeePhoto from images where EmployeeID = #URL.EmployeeID#
</cfquery>

<cfsetting enablecfoutputonly="Yes">
<cfsetting showdebugoutput="No">

<cfheader name="Content-Disposition" value="inline; filename=abc.jpg">
<cfcontent type="image/jpeg; charset=iso-8859-1">

<cfoutput>#tostring(tobinary(viewpic.EmployeePhoto ))#</cfoutput>
*******************************************

Hope this helps... If now, give me some more details and I will try to help
you some more...

James
Sacramento, CA

[shahzad]

works great!!!

thank you very much

[Unregistered]

I am having the same problem but mine is a form that a user submits with text and an image to the database, the image is stored as a blob and I need to display the images to a page, this is what I have for the form:
************************************************** ***********************
<table>
<cfform method ="post" action="adprocess.cfm" enctype="multipart/form-data">

<tr>
<td><font size = 4 color = white>Title:</font></td>
<td><cfinput type = "text" name="title" value=""></td>
</tr>
<tr>
<td><font size = 4 color = white>URL:</font></td>
<td><cfinput type="text" name="URL" value="" required="yes" validate="URL" validateat="onsubmit" message="Invalid URL!"></td>
</tr>
<tr>
<td><font size = 4 color = white>Body:</font></td>
<td><cfinput type="text" name="body" value=""></td>
</tr>
<tr>
<td><font size = 4 color = white>State:</font></td>
<td><cfselect id="State" name="State" >
<option value="">Select a State</option>
<option value="AK">Alaska</option>
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DC">Washington D.C.</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="IA">Iowa</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MA">Massachusetts</option>
<option value="MD">Maryland</option>
<option value="ME">Maine</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MO">Missourri</option>
<option value="MS">Mississippi</option>
<option value="MT">Montana</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="NE">Nebraska</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NV">Nevada</option>
<option value="NY">New York</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VA">Virginia</option>
<option value="VT">Vermont</option>
<option value="WA">Washington</option>
<option value="WI">Wisconsin</option>
<option value="WV">West Virginia</option>
<option value="WY">Wyoming</option>
</cfselect></td>
</tr>
<tr>
<td><font size = 4 color = white>City:</font></td>
<td><cfinput type = "text" name="cityName" value=""></td>
</tr>
<tr>
<td><font size = 4 color = white>Zipcode:</font></td>
<td><cfinput type = "text" name="zipCode" value="" required="yes" validate="zipcode" validateat="onsubmit" message="Invalid Zipcode!"></td>
</tr>
<tr>
<td><font size = 4 color = white>Min Age:</font></td>
<td><cfinput type= "text" name="minAge" value="" required="no" validate="integer" validateat="onsubmit" message="Invalid Min Age"></td>
</tr>
<tr>
<td><font size = 4 color = white>Max Age:</font></td>
<td><cfinput type="text" name="maxAge" value=""required="no" validate="integer" validateat="onsubmit" message="Invalid Max Age"></td>
</tr>
<tr>
<td><font size = 4 color = white> Target Birthday:</font></td>
<td><cfinput type="text" name="targetBirthday" value="1" required="no" validate="boolean" validateat="onsubmit" message="Invalid response for Target Birthday"></td>
</tr>
<tr>
<td><font size = 4 color = white>Gender:</font></td>
<td><cfinput type="text" name="gender" value=""></td>
</tr>
<tr>
<td><font size = 4 color = white>Balance:</font></td>
<td><cfinput type="text" name="balance" value="" required="no" validate="float" validateat="onsubmit" message="Invalid Balance"></td>
</tr>
<tr>
<td><font size = 4 color = white> Daily Limit:</font></td>
<td><cfinput type="text" name="dailyLimit" value="" required="no" validate="float" validateat="onsubmit" message="Invalid Daily Limit"></td>
</tr>
<tr>
<td><font size = 4 color = white> View Amount:</font></td>
<td><cfinput type="text" name="viewAmount" value="" required="no" validate="float" validateat="onsubmit" message="Invalid View Amount"></td>
</tr>
<tr>
<td><font size = 4 color = white> Click Amount:</font></td>
<td><cfinput type="text" name="clickAmount" value="" required="no" validate="float" validateat="onsubmit" message="Invalid Click Amount"></td>
</tr>
<tr>
<td><font size = 4 color = white>Image:</font></td>
<td><form enctype="multipart/form-data" method="post"><input type="file" name="image" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="Submit & View Ad" action="adprocess.cfm"></td>
</tr>

</form>
</table>

</cfform>
<cfform method = "post" action ="viewads.cfm">
<tr>
<td colspan="2" align="right"><cfinput name="viewad" type="submit" value="View all Ads"></td>
</tr>
</cfform>
************************************************** ***********************
Here is the form process that submits the entries to the database using a cfquery and the user can view their advertisement:
************************************************** ***********************
<cfquery name="Insertad" datasource="SiteLife">
<cfset userId = 6/>
insert into ad_temp(userId, title, URL, body, image, state, cityName, zipCode, minAge, maxAge, targetBirthday, gender, balance, dailyLimit, viewAmount, clickAmount) values('#userId#','#Form.title#','#Form.URL#','#Fo rm.body#','Form.image','#Form.state#','#Form.cityN ame#','#Form.zipCode#','#Form.minAge#','#Form.maxA ge#','#Form.targetBirthday#','#Form.gender#','#For m.balance#','#Form.dailyLimit#','#Form.viewAmount# ','#Form.clickAmount#')
</cfquery>
<cfoutput><center><font size = 10 color = purple>#Form.title#</font></center></cfoutput>
<br>
<center>
<cfset strPath = ExpandPath( "./" ) />
<cfset strPath = GetDirectoryFromPath(GetCurrentTemplatePath()) />
<cfif isDefined("form.image")>
<cffile action="upload" fileField="image" destination="#strPath#" accept="image/*">
<cfimage action="resize" width="100" height="100" source="#strPath##file.serverfile#" destination="#strPath##file.serverfile#" overwrite="yes">
<img src="<cfoutput>#file.serverfile#</cfoutput>">
</cfif>
</center>
<br>
<cfoutput><center><font size = 6 color = red>#Form.body#</font></center></cfoutput>
<br>
<cfoutput><center><font size = 6 color = blue>#Form.cityName#, #Form.state#, #Form.zipCode#</font></center></cfoutput>
<br>
<cfoutput><center><a href="#Form.URL#">#Form.URL#</a></center></cfoutput>
************************************************** ***********************Now I have created a view all ads page that displays all the ads in the database but the images are not displaying, I am getting that red X box here is the code for the display page:
************************************************** ***********************
<cfquery name="qoutputad" datasource="SiteLife">
SELECT * FROM ad_temp
</cfquery>
<cfoutput query = "qoutputad">
<center><font size = 10 color = purple>#title#</font></center>
<br>
<center><img src ="getPhoto.cfm?tempAdId=#tempAdId#"></center>
<br>
<center><font size = 6 color = red>#body#</font></center>
<br>
<center><font size = 6 color = blue>#cityName#, #state#, #zipCode#</font></center>
<br>
<center><a href="#URL#">#URL#</a></center>
</cfoutput>
************************************************** ***********************
I used the same code as you have above but mine is still not working, here is the code for the getphoto page:
************************************************** ***********************
<cfquery name = "viewpic" datasource = "SiteLife">
SELECT image FROM ad_temp WHERE tempAdId = #tempAdId#
</cfquery>

<cfsetting enablecfoutputonly = "Yes">
<cfsetting showdebugoutput ="No">

<cfheader name="Content-Disposition" value= "inline;filename = #image#.jpg">
<cfcontent type="image; charset=iso-8859-1">

<cfoutput>#tostring(tobinary(viewpic.image))#</cfoutput>
************************************************** ***********************pplease tell me what I am doing wrong please