Add Asset picker(Browse and select file) control to Textbox in a Sharepoint list form Or Page

Hi Guys,

In this post we are going to learn How to add Asset picker control to a SharePoint FORM/Page.

Recently I came across a requirement where user needs to add the reference of a document present in a document library while adding a new list item. As Sharepoint doesn't provide you any OOTB column/field control to pick the asset from the site, User has to go the document library select the particular document then copy shortcut and finally paste the copied URL into List form.

Some of the users do not like this behavior when they have the file already present in document library and expects the option of browse and pick behavior.

In this post we will be adding the "browse and pick file" control to any Textbox box field(of List form) in which you wants to save the URL of the file.

Below are the steps which does the trick.

Step 1:
Create a js file called "createassetpickercontrol.js"

Step 2:
Add the following snippet to the "createassetpickercontrol.js"

$(document).ready(function () {

// With the below line we will be dynamically adding the Browse control next to the textbox where we need to place this. 

//Replace "controlid" with your actual id of the textbox.

$("textarea#controlid").closest('td').append("<div id='btnbrowsectrl' style='display:none'><input onclick='GetFileURL()' type='button' value='Browse File' /><span>Browse File location if exists on same site</span></div>");

 //The below snippet to acheive the browse functionality

//Create a object which will be used for the Asset. I have used the object name as 'assetPickerObj'

    with(new AssetPickerConfig('assetPickerObj'))

    {{

         DefaultAssetImageLocation='';

         //CurrentWebBaseUrl will be the url of the site or site collection.

         CurrentWebBaseUrl='https://siteurl.com';

         OverrideDialogFeatures='';

         OverrideDialogTitle='';

         OverrideDialogDesc='';

         OverrideDialogImageUrl='';

         //AssetUrlClientID is the id of the control in which the path of the selected file will be saved.

         AssetUrlClientID='controlid';

         AssetTextClientID='';                                                             

         UseImageAssetPicker=false; //make this false to show Documents instead

         DefaultToLastUsedLocation=true;

         DisplayLookInSection=true;                                                            

         ReturnCallback = null;}}

});

function GetFileURL(){

    //Following is the function which launch the AssetPortalBrowser.aspx automatically.

    APD_LaunchAssetPickerUseConfigCurrentUrl('assetPickerObj');

//the above line will just give you the relative url to the textbox.

//set absolute url in textbox if required then use the below lines

var newabsoluteurl= window.location.protocol + "//" + window.location.host+$("#controlid ").val().replace(/\s+/g,"%20");

$("#controlid").val(newabsoluteurl);

return false;

}

Step 3: 

Upload the above JS to your site.

Step 4:

Go to the List and then Select default New Form as shown below.

Add a HTML Form webpart and then add the below JS references in it and then Save the page.

AssetPicker.js is a sharepoint farm JS file and will be available in layouts folder. The folder structure will change from 2007 to 2010 environment.

<script src="/_layouts/1033/AssetPickers.js" type="text/javascript"></script>

<script src="/Style%20Library/Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>

<script src="/Style%20Library/Scripts/createassetpickercontrol.js" type="text/javascript"></script>

There you go, you could now see the browse button to pick the file url when you open the LIst form as below.

Hope this helps...