To add people picker on your upload.aspx or any other sharepoint aspx pages;
First create a div for picker
<div id="PeoplePickerDiv"></div>
Write your rest api functon to get people
function initializePeoplePicker(peoplePickerElementId) {
var schema = {};
schema['PrincipalAccountType'] = 'User,DL,SecGroup,SPGroup';
schema['SearchPrincipalSource'] = 15;
schema['ResolvePrincipalSource'] = 15;
schema['AllowMultipleValues'] = true;
schema['MaximumEntitySuggestions'] = 50;
schema['Width'] = '280px';
this.SPClientPeoplePicker_InitStandaloneControlWrapper(peoplePickerElementId, null, schema);
}
Initialize Your People Picker
initializePeoplePicker('PeoplePickerDiv');
Get Selected Users
var peoplePickerUserIDArray = [];
function peoplePickerGetSelectedUsersArray() {
// Get the people picker object from the page.
var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.PeoplePickerDiv_TopSpan;
// Get information about all users.
var users = peoplePicker.GetAllUserInfo();
var userInfo = '';
for (var i = 0; i < users.length; i++) {
var user = users[i];
peoplePickerSetUserIdArray(user.Key);
}
}
function peoplePickerSetUserIdArray(loginName) {
var context = new SP.ClientContext.get_current();
var user = context.get_web().ensureUser(loginName);
context.load(user);
context.executeQueryAsync(
Function.createDelegate(null, function() {
peoplePickerUserIDArray.push(user.get_id());
}),
Function.createDelegate(null, function(se, ea) {
alert('Error:' + ea.get_message());
})
);
}