Uploading Images Directly from a List Input Form in SharePoint 2010

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“.
    1-300x278
  2. 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.

    2-300x293

  3. 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.3
  4. Clicking this will show the normal upload picture dialog:

    6-300x117

  5. 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.

    4


    This also works in views for the list: 


     

Hope this post is of some 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:  spimagefieldupload.js (557 downloads)
Original CodePlex Project: http://spimagefieldupload.codeplex.com/

 

Leave a Reply

17 Comments

  1. Joseph Serna

    I followed your directions and added a site column and set it to “Image with formatting and constraints for publishing” so that the list users could add the picture to the list directly… however… for some odd reason when they get to the asset picker to select the picture they want to use, it doesn’t populate in the URL box at the bottom of the asset picker. So for instance… the URL box at the bottom auto populates with the directory they are in which is “/sites/SMARTChat/Pictures” when they click on the picture titled “TEST” it should change the URL box to “/sites/SMARTChat/Pictures/Test.bmp however it doesn’t change. They literally can’t select the picture… they have to manually edit the URL box to include the file name at the end and then hit “OK”

    Do you know why this is? What can I do to fix this?

    • Chris Grist

      Hey Joseph,

      I have seen that a few times, bit buggy with SharePoint.

      Have a look at javascript errors in the browser to see if i am right.

  2. srinivas

    Hi,
    Looks good but what about the existing link it will not work . if not how can i hide that one. i dont want that one

    • Tom O'Connor

      It should work, there should be two links: one to add an image from SharePoint and then another to upload an image to SharePoint. What happens when you click on this other link?

      You could most probably hide the link you don’t want using jQuery.

      • srinivas

        Hi, thanks for your response

        when i click on the default link i am able to navigate the site content(means all list & libraries) but from there how can i upload images i am unable select any images there is no upload button, do i need to create any custom solution for upload images can you please look at once this blog

        • Tom O'Connor

          What video is that?? That’s not the same solution as mentioned in my post.

          If you add the javascript linked at the bottom of my post to your page you will see an additional link appear as shown in the following screen: http://cube4.com.au/wp-content/uploads/2012/05/3.png

          The video you linked appears to be using a custom upload form. This is an option but the javascript in my post uses the default SharePoint upload pages. This allows you to select the library that you want the image to go into.

          • srinivas

            Hi its ok thanks for your responce i am unable to use the first link to upload images from sharepoint library , can you suggest me how can i hide that one because i am new to script

          • Tom O'Connor

            I’d suggest using jQuery. If you can select the element that contains the link you could then use the hide method to get rid of the link.

            http://api.jquery.com/hide/

  3. Neha

    Uploading Images Directly from a List Input Form in SharePoint 2010 not working i followed all steps still not showing Site Column called and set the type to “Image with formatting and constraints for publishing“. what is the reason of that

    • Tom O'Connor

      Are you saying the site column is not appearing? Do you have publishing enabled on the site collection?

  4. Sahar

    I have the same problem as Neha. I have enabled publishing on site collection but I can not see the new types of column in list.

    • Tom O'Connor

      I’m honestly not too sure why this is. The columns definitely won’t be there until you enable publishing. I would think the site columns would get provisioned by the site collection feature…but have you enabled both the site collection and site publishing features?

      • Sahar

        I have enabled SharePoint Server Publishing feature and SharePoint Server Publishing Infrastructure, I found that SPImageFieldUpload : Image Field Upload and SPImageFieldUpload : jQuery v1.7.2 registration are active, but I cannot understand what the problem is. Please help me.

    • AGaber

      Seems you are trying to create new column from “create column” in the list setting page. but the “image with formatting and constraints for publishing” is available In Site column only as demonstrated in this article!!

      First you have to create new site column from your site gallery and select the type “image with formatting and constraints for publishing”. then you will be able to add this column for your list from “Add from existing site columns”

  5. zak

    How to ByPass the EditForm which comes after uploading document.

    • Tom O'Connor

      You wouldn’t happen to have some required fields in the library you are uploading into would you? By default this would cause the Edit form to appear.

  6. saleh

    This Solution work with Sharepoint 2013? and how add jQuery to masterpage?
    If it not work, doy you have any idea?

Next ArticleNintex Forms: Automatically populating the new people picker control