Displaying Image Attachments of a list Item Sharepoint wss3.0

Heya, Again Old Ankur, With a new post.
I am Loving the way Client Object Model with Ecma Script functions in Sharepoint2010.
Well but in this post I am picking up an issue of WSS 3.0 or sharepoint 2007.

Today I was onto a task creating a helpful site on MOSS. In that I was trying to attach a automated generated Image file with the item in a list.

I started with an idea that In the DispForm of the list I will show the attached Image as well.
So when a user go to the list item and view it he can see the image as naturally he is able to see other properties of the item.
I used DataView Web Part SharePoint designer to ease the things but it was not much helping me out as I was able to see that Attachments is 1 or 0 but how to display it I was not getting.

So I followed this

DataviewAttachments

And Modified it in my own ways so that I can associate it with the existing DipForm.aspx page.
So these are the steps which I follow to achieve this:
I use SharePoint Designer 2007, Sharepoint List Web Services Javascript files. You can find the require by going onto Darren’s Blog :
Darren's Blog
So lets go…
1)Open the DispForm.aspx of the List in sharepoint Designer 2007.
It will look like this:

2)Then Select the ListViewwebpart which is already there and click code view.


Now what we will do is in the code view of list view web part we modify the tag’s Value from “true” to “false”.
After that return to Design View.
Note: we have not deleted the webpart there is a reason behind that and it is necessary to make IsIncluded to false.
Than it will look like this

After this go to split view and add another row just below the row where earlier listviewwebpartzone is placed .see this


In that new row’s column put your cursor and after that go to menu bar and click insert >>sharepoint controls>>customlistform like this

Chose your list and select display form. A new form will be get added which will be showing your list data now.
Then just below the last column create another row in the form table and this code….

<div id="att{@ID}" style="padding: 10px;"></div>
<script type="text/javascript">
getAttachments("YourListName",'<xsl:value-of select="@ID"/>'); </script>

And inside the contentplaceholder

<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">

Add this code:

<script src="../../_JS/SPAPI_Core.js"></script>
<script src="../../_JS/SPAPI_Lists.js"></script>
<script src="../../_JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function getAttachments(List,ID){
var lists = new SPAPI_Lists('YourSite');
var items = lists.getAttachmentCollection(List,ID);
if (items.status == 200){
var rows = items.responseXML.getElementsByTagName('Attachment');
var str="";
for (var i=0; i<rows.length; i++){
temp=rows[i].childNodes[0].nodeValue;
ext=temp.substring(temp.lastIndexOf('.')+1);
switch(ext){
case "jpg":
case "png":
case "gif":
bdy='<img src="'+temp+'" alt="'+temp+'" border="0" />';
break;
default:
bdy=temp;
}
str+='<a href="'+temp+'" target="_blank">'+bdy+'</a>'+"<br />";
}
document.getElementById("att"+ID).innerHTML = str;
}else{
alert('There was an error: ' + items.statusText);
}
}
</script>

Don’t forget to change your list name and yoursite name in the above code…
And add the List.asmx files in the _JS like this..

Note : Jquery files are not necessary for this don’t get confuse
After doing this ,save your page….
And when you try to view the item now you will be able to the image like this…



It is the attachment…..You can view 9 attachments with this list with this code…..
Now what is happening behind the scene is we are calling the list data through list web service.

First we are taking all the items having attachments and then passing the ID of the particular item to get the Path of the image and rendering it into innerhtml of the DIV ……
Feel free to ask any queries if have at ankurmadaan2787@live.in