Upload Images Directly from a List Input Form in SharePoint 2010


You may also be interested in: SharePoint-based solutions by B&R Business Solutions


 

Editor’s note: Contributor Tom O’Connor is a SharePoint consultant for Loftus IT. Follow him @heatus

Problem

Normally on lists and libraries to add a picture you would use a ‘Hyperlink or Picture’ column. That’s all fine and good if you know the URL for the image. Unfortunately though, this column provides no way to upload or select items already sitting in SharePoint. While searching around for a solution to this problem I found that there were a range of different ways people have achieved this including the creation of new field types and custom aspx upload pages.

I knew that this had to be complicating things, after all you see image upload/selection functionality elsewhere in SharePoint 2010 (Rich Text Editor!).

Solution

There is, in fact, a column type already in SharePoint called “Publishing Image” which appears to be used in the Page Content Types and their associated Page Layouts. The good thing about this column is that it allows you to select from existing content in SharePoint. It also allows you to specify various attributes relating to the image such as Alt text, width and height.

Well, that solves half of the problem. Thankfully Arnault Nouvel has created a CodePlex project called ‘SharePoint 2010 Image Field Upload’ which does the rest. It is basically some jQuery that gets around this upload problem. If you add the javascript to your masterpage it finds any references where the Image Asset picker is used and adds an additional link that invokes the out of the box Rich Text Editor Upload Control. To me this is awesome because it is not actually using any custom controls.

I had to make a slight amendment to Arnault’s javascript so that the hyperlink the jQuery was creating included target=”_self”. I found using the original code that the upload link within modal dialogs would launch a new window rather than remaining on the same page. I have linked the *slightly* modified JS file at the bottom of the post.

Demonstration

I will now run through an example to add this Image field type to an Annoucements list.

  1. Create a new Site Column called and set the type to “Image with formatting and constraints for publishing
  2.  

    2012-05-29-UploadingImages-01.png
     

     

  3. Add the new site column to your announcements list. Prior to adding the custom javascript you will notice the input form will appear as shown below.
  4.  

    2012-05-29-UploadingImages-02.png
     

     

  5. Add a reference to the custom javascript in the masterpage (also make sure that you have jQuery referenced in there too). Now when you add an item to the list the field will have an additional link to insert a picture from your computer.
  6.  

    2012-05-29-UploadingImages-03.png
     

     

    Clicking this will show the normal upload picture dialog:

     

    2012-05-29-UploadingImages-04.png
     

     

  7. After selecting an image and uploading it, it will be added to the item and it will actually display when you view the item details.
  8.  

    2012-05-29-UploadingImages-05.png
     

     

    This also works in views for the list:

     

    2012-05-29-UploadingImages-06.png
     

     

Hope this post is of use to some people, let me know in the comments how you applied this. Big thanks to Arnault Nouvel for putting together the CodePlex project and doing pretty much all the hard work!

Download: SPImageFileUpload.js (19)
Original CodePlex Project: http://spimagefieldupload.codeplex.com/