Clear People Picker SharePoint Using JQuery

Hi, this post describes how to clear the client side people picker.

 My client side People picker is as follows:

<SharePoint:ClientPeoplePicker ID="peoplePickerProjectManager" runat="server" AllowMultipleEntities="false" Required="true" ValidationEnabled="true" />

You can place it in any .aspx page. Use as follows:

First you need to know the People Picker Id generated by application. We can get this easily by using browser developer tool , observe the following image.

Here people picker Id is "ctl00_SPWebPartManager1_g_3a92cac2_9070_4c21_a117_8cb64a33bc5f_ctl00_peoplePickerProjectManager_TopSpan" , with this id we can clear the people picker using jquery function as follows:

function clearPeoplePicker(peoplePickerId) {

        var spclientPeoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePickerId];

        var ResolvedUsers = $(document.getElementById(spclientPeoplePicker.ResolvedListElementId)).find("span[class='sp-peoplepicker-userSpan']");

        $(ResolvedUsers).each(function (index) {

            spclientPeoplePicker.DeleteProcessedUser(this);

        });

    },

We need to pass the people picker id which is like as mention above.

That's all, I hope this helps you.

Thank You... 

Upload files into a folder of SharePoint Document Library - REST API - JQuery

Hi, this post explains how to upload the files in to the document library of SharePoint.

Let us take the following control is input file control.

<input type="file" name="attachment" id="inputFileUpload" class="input-file-control"/>


Now we can upload the files into the SharePoint library with following functions.
In the following function parameters values are like as follow:

fileInputControlId -- Id of input file controls , here it is : '#inputFileUpload' ;
webUrl -- Url of SharePoint Site.
documentLibraryName -- Name of the document library which is root folder of uploaded file.
folderName -- Name of the folder exist in the specified document library of SharePoint Site.

For uploading files , you just call the "uploadFiles" method with required parameters.

//Call this function to upload the files.
function uploadFiles(fileInputControlId, webUrl, documentLibraryName, folderName) {
        for (var i = 0; i < $(fileInputControlId)[0].files.length; i++) {
            var uploadFile = $(fileInputControlId)[0].files[i];
            var getFile = getFileBuffer(uploadFile);
            getFile.done(function (arrayBuffer) {
                uploadFileToFolder(webUrl, documentLibraryName, folderName, uploadFile.name, arrayBuffer, function (data) {
                  alert("File upload done successfully");
                }, function (data) {
                  alert("File uploading fail");
                });
            });
        }
    }

//Get the uploaded file buffer.
function getFileBuffer(uploadFile) {
        var deferred = jQuery.Deferred();
        var reader = new FileReader();
        reader.onloadend = function (e) {
            deferred.resolve(e.target.result);
        }
        reader.onerror = function (e) {
            deferred.reject(e.target.error);
        }
        reader.readAsArrayBuffer(uploadFile);
        return deferred.promise();
    }

//Upload files into SharePoint library with REST API
 function uploadFileToFolder(webUrl, documentLibraryName, folderName, fileName, arrayBuffer, success, failure) {
        //file added to the subfolder of Rootfolder.
        var apiUrl = webUrl + "/_api/web/lists/getByTitle('" + documentLibraryName + "')/RootFolder/folders('" + folderName + "')/files/add(url='" + fileName + "', overwrite=true)";

        $.ajax({
            url: apiUrl,
            type: "POST",
            data: arrayBuffer,
            processData: false,
            async:false,
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
            },
            success: function (data) {
                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    }

With the above function we can upload the files into the folder exist in the document library.
If we need to upload files directly into document library you need to change the REST API cal as follows:

var apiUrl = webUrl+"/_api/web/lists/getByTitle('" + documentLibraryName + "')/RootFolder/files/add(url='" + fileName + "', overwrite=true)";

That's all, I hope this helps to you.

Thank You...

Client Side People Picker - SharePoint - Jquery

Hi, here I provide the code to handle the client side people picker from Jquery.

My client side People picker is as follows:

<SharePoint:ClientPeoplePicker ID="peoplePickerProjectManager" runat="server" AllowMultipleEntities="false" Required="true" ValidationEnabled="true" />

You can place it in any .aspx page. Use as follows:

First you need to know the People Picker Id generated by application. We can get this easily by using browser developer tool , observe the following image.

Here people picker Id is "ctl00_SPWebPartManager1_g_3a92cac2_9070_4c21_a117_8cb64a33bc5f_ctl00_peoplePickerProjectManager_TopSpan" , with this id we can retrieve from and resolve user to people picker using jquery.

With the following function we can get the resolved users details.

function getResolvedEmails(peoplePickerId) {

        var users = [];

        var resolvedUsers = JSON.parse($('#' + peoplePickerDivId + ' input[id*=peUser_TopSpan_HiddenInput]').val());

        if (resolvedUsers.length > 0) {

            $.each(resolvedUsers, function (key, value) {

                if (value.IsResolved)

                    user.push(value);

            });

        }

        return users;

    }

In the above function you need to pass the people picker id which is get from the developer tool, which is like what am consider from above image.

If we know the user Email or Id we resolve them into people picker by the following way.

With the following function we can resolve or bind the users into the people picker. Here bind the users to people picker by their emails. We can also bind with their Id's also. The difference among those is just getting the users from REST call. For emails we use "getByEmail" , for Ids we use "getById". After getting the users we need to pass those user objects to people picker to resolve by following function.

function getUsersByEmails(usersEmails){

     var users=[];

     var webUrl="http:stage.test.com/mysite/";

     $.each(usersEmals,function(index,email){

         var resourceUrl=webUrl+"/_api/web/siteusers/getbyemail('" + email+ "')";

         getData(resourceUrl, function (data) {

                users.push(data.d);

            }, function(data){

               alert('Fail to get user');

        });

     });

     return users;

}

//Rest Call to get data from sharepoint

function getData(resourceUrl,success,failure){

           $.ajax({

                url: resourceUrl,

                method: "GET",

                async: false,

                headers: { "Accept": "application/json; odata=verbose" },

                success: function (data) {

                success(data);

            },

            error: function (data) {

                failure(data);

            }

        });

}

function bindUsersToPeoplePickerByEmails(peoplePickerId,users){

        var peoplePicker = SPClientPeoplePicker.SPClientPeoplePickerDict[peoplePikcerId];

        $.each(users,function(index,user){

             var usrObj = { 'Key': user.Title};

             peoplePicker.AddUnresolvedUser(usrObj, true);

        });

}

With the above function we can resolve the users into people picker.

That's all. I hope this helps you. 

Thank you.