Using the “Upload a Document” button from the Document Center in another site

Everybody who has ever deployed a site in SharePoint 2010 based on the Document Center template, has seen the large “Upload a Document” button.

UploadDocument

When you edit the page, you can see the button is nothing more than a Content Editor Web Part (CEWP), containing some HTML to show the button. The HTML looks like this:

As a note, the ' and   codes are HTML codes for ‘ and a space.

Now, when you want to put this button on another page in another site, to provide easy access to the Document Center for your users, there is two things you need to do. First, you need to find out the List ID of the Document Library you’d like to upload your documents to. Second, you need to add a small Javascript function to make the button work.

Add the List ID of the Document Library to the upload URL

To find out the List ID of a Document Library, browse to the Library and in the Ribbon, click the Library Settings button. Check out the URL in your browser, it should end with something like /_layouts/listedit.aspx?List=%7B7C482DEA%2D0582%2D4C8A%2D901C%2DD905790B000B%7D

The part behind the = is your List ID, but it is HTML encoded. Replace the %7B for {, %7D for } and all %2D’s for –. The List ID in this example is {7C482DEA-0582-4C8A-901C-D905790B000B}

We can add this List ID to the URL in the onclick event of the button (together with the URL of the site you want to upload to, and an empty RootFolder parameter, to let the URL know you want to upload in the root folder of the Document Library): OpenNewFormUrl(‘/documents/_layouts/Upload.aspx?List={7C482DEA-0582-4C8A-901C-D905790B000B}&RootFolder=’)

If you want, you could even display the multiple document upload drop zone (see screenshot below) after clicking the button. Just add the MultipleUpload=1 parameter: OpenNewFormUrl(‘/documents/_layouts/Upload.aspx?MultipleUpload=1&List={7C482DEA-0582-4C8A-901C-D905790B000B}&RootFolder=’)

Don’t worry about the HTML codes, once you paste your code in the CWEP and save the Web Part, the HTML is automatically encoded (when you open the CWEP again, you’ll see the ' again, if not, replace the ‘ with ').

lvblog2_thumb

Add the Javascript function

So, now we have modified the HTML to make the button work from outside the Document Center site, but… just adding this HTML to a new CEWP is not enough. You can click the button what you want, but the modal dialog is not fired. We need to add an extra Javascript function to the same CEWP. Put the following code before the <div> code:

There you go, your button works!

Leave a Reply