List all attachments when clicking the paperclip in a list view – updated version

13.09.2014 v1.71 fixes a bug where the attachment have an apostrophe in the name.

05.06.2012 v1.7 adds support for jQuery v1.7.x.

I have previously posted a solution for listing all attachments when clicking on the paper clip in a list view, you find it here.

This is an updated version with a few new features – and SharePoint 2010 support. I post it in a new article to keep it tidy.

The new features are:

  • Option to display the attachments on hover.
  • Shows the icon and the file name.
How to use

Put the code in a ContentEditorWebPart (CEWP) below the list view.

There are two different scripts, one for SharePoint 2007 and one for SharePoint 2010, but the CEWP code is shared.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="/test/English/Javascript/PreviewAtt/ListAttachments.js" type="text/javascript"></script>
<script type="text/javascript">

var argObj = {hideIdColumn:true,
			  clickToOpen:false,
			  clickMouseover:"Click to open",
			  oneClickOpenIfSingle:true};
			  
customListAttachments(argObj);
</script>

I have referred jQuery from Google. If you prefer a local copy, you find the file here.

Parameters explained

The argument object is an object literal with these attributes:

  • hideIdColumn: true to hide the ID column, false to leave it visible.
  • clickToOpen: true to open the list by clicking, false to open it on hover.
  • clickMouseover: If the previous attribute is set to true, this is the text shown when the mouse hovers over the paper clip.
  • oneClickOpenIfSingle: true to open a single attachment directly, false to list it. This requires the attribute “clickToOpen” to be set to true.
Download

Ensure you pick the correct version – for SharePoint 2007 or SharePoint 2010. You find the file “ListAttachments.js” here

Please post any bugs below.
Alexander

71 Comments on “List all attachments when clicking the paperclip in a list view – updated version”

  1. Pingback: Sharepoint Update Oct-08-2011 | SDavara's Sharepoint Knowledge Center

  2. Hi Alexander,

    I’m trying to get your script to work but without success. I’m using SharePoint 2010.

    Could you post some details about the list web part settings!
    Do you use a XSLTListViewWeb part or a ListViewWebPart?

    I saw when debugging the script that it exists on line:
    if(!isListView){

    Any idea?

    Thanks,
    Erich

    1. Hi,
      All my solutions are designed for unmodified lists / forms. If you use a customized list view or list form you must make changes to the code This must be done in each individual case, and cannot be done by me as all customized list / form is different.

      Alexander

  3. Hi,
    i have inserted CEWP below the list and I have changed paths in the code for CEWP but it doesn’t work. The only thing that happens is that the name of the ID column hides, but the column is still there. I have SP 2010 and IE 9.0. Is IE 9.0 the problem?

  4. Hi Alexander,

    I’m using your script on SP2010/14.0.6109.5000 (CU 2011 AUG).
    Thanks a lot for it. it’s a bit tricky but it does work as expected.

    But what’s not working is to display attachments if I’m using the preview mode of a view.
    Do you have some ideas or ressources how to display a list of attachments when using previewpane mode?

    Bernhard

    2. Sorry, may I come in here?

      A Idea, just done here: Have a list in preview pane view. Add the same list as a webpart below the previe pane webpart (Edit page). Connect from the preview pane to the new webpart. I have choosed to send the ID to the consuming webpart.

      Now the trick: This page was before coded with Alex solution from here:
      https://spjsblog.com/2012/02/12/list-view-preview-item-on-hover-sharepoint-2010/

      Then you only have to select an item at the previewpane, scroll down the mouse and hover the mouse over the there shown item.

      Not ootb, but working !

      Kind regards
      Michael

    3. continuing: The pop up from preview item contains a clickable link to the attachments, so it just can opened from there.

      Maybe, that this solution kills the need to use a previewpane view. With Alex solution you can use a custom list and hover over any item.

      I prefer to hover over the paperclick instead of clicking it in custom list views…much easier. Combined with collapse/expand multiple lines you can put nearly everything in one row (that is more like a construction kit / using building blocks). Alex version I mentioned above (see link) is a ready to use combined solution .

      Regards again
      Michael

  5. Hi Alexander,

    just a small typo in your CEWP, the new js script is named “ListAttachments.js” and not “previewAttachmentsOnHover.js”

    Chris

  9. Hi Alexander,

    I am new to using jQuery in SharePoint 2010 is there some changes i need to make in the code to reference my specific list?

  11. Hi Alexander. Thank you so much for this post! I have been looking for a solution that did not require XSLT transformation.

    I do have one slight issue. This works perfectly for me if my list is not grouped, but like a couple users above, I cannot get this to work if the list is grouped. The ID column header will be hidden, but the ID numbers will still display. All of the other column headers will shift to the right. I have the CWEP placed below the list view as instructed. I am in SharePoint 2007 and using jquery 1.6.4. Any insight you can provide would be greatly appreciated.

  12. Pingback: Making the attachments “clip” clickable in a SharePoint list | The Hanley Hub

  13. Hi Guys!

    First, thanks for the JS-Code!
    I had some problems with the showAtt function.

    $(elm).parents(‘tr:first’).data(‘listGuid’) and $(elm).parents(‘tr:first’).data(‘itemID’) always were undefined.

    I’m not an expert with Jquery so I went straightforward.

    I did some changes:

    var itemId = thisRow.find(“>td:eq(“+idColIndex+”)”).text()

    if(argObj.clickToOpen){
    thisRow.find(“>td:eq(“+attcolIndex+”)”).find(‘img’).attr(‘title’,argObj.clickMouseover).css(‘cursor’,’pointer’).click(function(){
    showAtt(this,argObj, itemId, thisListCTX.ListTitle);
    });
    }else{
    thisRow.find(“>td:eq(“+attcolIndex+”)”).find(‘img’).attr(‘title’,”).css(‘cursor’,’wait’).mouseover(function(){
    showAtt(this,argObj, itemId, thisListCTX.ListTitle);
    });
    }

    Of course, you have to pass this 2 variables to the showAtt and the getAllAttachments function.

    I just replaced the function-calls with the new variables.

    That’s not the best solution, but for my needs it is good enough.

    Cheers

  18. I cannot seem to get this to work. We just upgraded to IE 10 could that be what the problem is? I tried to point to jquery-2.0.0.min.js but follow all the other instructions but nothing happens.

  19. Hi Alexander.

    Just posting to record my thanks!

    Works great in I.E. 10. In the CEWP (rightly or wrongly), I use the jQuery $(document).ready(function) as follows:

    $(document).ready(function(){
    var argObj = {hideIdColumn:true,
    clickToOpen:false,
    clickMouseover:’Click to open’,
    oneClickOpenIfSingle:true};

    customListAttachments(argObj);
    });

    This seems to make the attachments appear more quickly. Whereas, before, I occasionally experienced a time lag when the popup box said only ‘Attachments’ and contained no attachments.

    Regards and thanks again,

    Michael

      2. Daniel, Thank you for posting an update for 2013!

        However, we found that if the Attachements column is immediately followed by another column (doesn’t matter what type), the attachment popup is overlayed by the text of the other column. This renders any covered attachment link unclickable- the popup dissapears

        When I moved the Attachement column into last place, the script runs as intended. Any advice?

      3. No problem at all, but I would appreciate one line in the page where you are hosting it – stating the origin of the solution, and a link back to my blog.

        Alexander

  21. Hi Alexander.

    i am using SP2007 but can’t get it work.

    i added the js file to doc library in my site and the other short code to a CEWP in my page.

    Should i change sime references or something?

    Thank!!

      1. Hello Alexander,

        I tried your code for jQuery 1.7.2 and all works as advertised.

        I did notice an issue though…we use Enterprise Navigation which loads above the quicklaunch menu and when I activate the CEWP for attachments the Enterprise Navigation menu will not load (just has a spinning circle of dots). When I remove the CEWP with the attachments code the Enterprise Navigation menu comes back as normal. Has anyone else had this issue?

      2. Alexander, I forgot to mention I’m using SharePoint 2007. I also noted the the ability to Toggle Fullscreen is disabled as well (most likely because the page is waiting for the Enterprise Navigation menu to load).

      3. Hi,
        I am not familiar with the enterprise navigation, but this might be caused by loading jQuery multiple times in the page – could this be it?

        Alexander

  22. Mr Bautz, you got it right on the first shot. I removed the jQuery reference from the code and everything is perfect! Apparently the page uses jQuery 1.7.2 already (I noted it in the debugging code)

    Thanks again!

    1. Alexander, I noticed another item… if I use “Totals” on a column the ID column reappears. It is empty of all data but the width is still there.

      1. Hi,
        I’m glad you got it working. I will make a note of your findings and try to find time to correct it. I do have a huge backlog and cannot guarantee a fix.

        Alexander

  23. This is Soooo GREAT!
    Thanks!!
    Not sure if you have thought on a solution that displays a combined list of all attachments.
    I’ll try to work on it.

    AWESOME SOLUTION!!

    Many Thanks,
    Laura

    1. Hi Alexander,

      I was able to generate a list with all the attachments, by adding a new column and inserting there the following code:

      However, I noticed that if I order the list (asc/desc) by any column or filter the column; the order and filter of the attachments files does not follow the specified order or filter.
      It just stays in the same order which mistakenly shows that an attachment belongs to an incorrect item.

      Any ideas??

  24. Sorry, my bad.
    In designer I created a new column, and placed in the following code:
    <SharePoint:AttachmentsField ControlMode=”Display” ItemId=”{$thisNode/@ID}” EnableViewState=”true” FieldName=”Attachments” runat=”server” />
    Which successfully displays the list of all attached files according to each item.
    The problem I encountered is that when I re-order (asc/desc) the item’s column, this new added column didn’t get re-order .
    The work around I apply was to hide the sorting arrows.
    Many thanks in advance for you advice!
    Laura

      1. Daniel, I cannot get your SP2013 version to work on a grouped list like Alex’s 2007/2010 versions did. It works on ungrouped but I need grouping on the list I’d like to use it on.

  26. Pingback: (Updated) Open list item attachments by clicking the paperclip - Version 2 | Spoodoo.com

  29. I am using 2010 but i am not getting listname

    SCRIPT5007: Unable to get value of the property ‘listName’: object is null or undefined

    could you please suggest , thanks ur help

    1. Are you using it in a “normal” list view, or in a web part page with multiple lists?

      If you open the scriptfile you will most likely find the “error” in the variable “thisListCTX”. Is this variable undefined if you alert it?

      Alexander

  30. Your solution worked great! I saved the .js file in our Site Collections Library then added the script above in a CWA webpart on the page and the hover and click work great!

    Thanks for taking the time to create this solution. We will be migrating to 2013 at some point so until then…

  32. Hi,
    The reason for this not appearing is because your SP installation does not have this icons installed. You have two options. Either add a fallback to a “generic” icon, or add an alternate path to these images.

    Here is option one:
    Open the script file and locate this line:

    wrapBuffer.push("<img id='customAtt_"+i+"_icon' style='vertical-align:middle' src='/_layouts/images/ic"+item.ext+".gif' border='0'> ");

    and change it like this:

    wrapBuffer.push("<img id='customAtt_"+i+"_icon' style='vertical-align:middle' src='/_layouts/images/ic"+item.ext+".gif' border='0' onerror='$(this).attr(\"src\",\"/_layouts/images/icgen.gif\")'> ");

    Option two can be addressed like this:

    if(item.ext.toLowerCase() === "pdf"){
	wrapBuffer.push("<img id='customAtt_"+i+"_icon' style='vertical-align:middle' src='/your/path/to_the_icon.gif' border='0'> ");
}else if(item.ext.toLowerCase() === "psd"){
	wrapBuffer.push("<img id='customAtt_"+i+"_icon' style='vertical-align:middle' src='/your/path/to_the_icon.gif' border='0'> ");
}else{
	wrapBuffer.push("<img id='customAtt_"+i+"_icon' style='vertical-align:middle' src='/_layouts/images/ic"+item.ext+".gif' border='0'> ");
}

    See what you can make out of this.

    Alexander

  33. Alexander,
    Do you have a recommendation for getting this script to fire off when the page loaded is a list view, and it has the ID field? I’m thinking something like this:

    if(thisWPContainer.data(“idColIndex”)!=undefined && location.href.match(/ShowInGrid=True/)!=null && isListView){
    $.getScript(“/sites/MySite/SiteAssets/jQuery.ListAttachments.js”, function(){});
    customListAttachments(argObj);
    }

  34. Hi,
    I’m not sure I understand – are you planning to load this in the master page?

    Unfortunately your code will not work as some of the variables you refer to are made “inside” the “ListAttachments.js”.

    Also, this code is getting old (4 years) so it is not the optimal solution for SP2013.

    Alexander

    1. Alexander,

      I have a “SiteWide.js” that is loaded in the master page so I can avoid regularly editing it. I realized that they were internal variables, I just don’t know how they get their values. Basically, I want to be able to run your script when the correct conditions are met. Also, I am currently on SP2010.

      Thanks,

      Jim

  36. Hello

    I have a problem with the script. On IE 11 the attachment preview isn’t showing even though a few weeks ago it worked perfectly. Now we have to use Chrome or Firefox and its not the same since we always have to manually activate mixed content on both browsers.
    Is there a way to make it work on Internet Explorer (version 11.0.9600.18015)?

    Thanks and best regards

      2. Hi,
        I’m sorry, but I have not tested this modified solution myself so I cannot tell whats going on. Try using the developer tools (F12 > Console) to look for errors.

        Alexander

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.