With SharePoint custom file upload control we can add comments or description for each uploaded file.
for this we have to create a SharePoint Multiline text field to store comments. we can store the comments along with file name. so that we retrieve or save comments with correct file.

      

        DocumentComments
       

       
      


              

and we can handle the comments on the code as below.

var inputtext = document.getElementById("onetidIOComment").value;
            if (inputtext != "") {
                var tdivision = document.createElement("td");
               // tdivision.setAttribute("class", "ms-vb");
      
                var span = document.createElement("span");                       // Create a element
                span.setAttribute("dir", "ltr");
                span.innerText = "Comment:  " + inputtext;
                tdivision.appendChild(span);
                var tRow = document.getElementById("attachRow" + i);

                tRow.appendChild(tdivision);
                document.getElementById("onetidIOComment").value = "";
    $("#attachRow" + i).find('td:last').css('color','#444');
    $("#attachRow" + i).find('td:last').css('padding-left','10px');
    $("#attachRow" + i).find('td:last').prev().css('vertical-align','top');

            }
            i++;

// Here we are tying to show the comments on attached documents table immediatly

function AddDocumentComments(){
    var fileinfo="";
    var MyRows = $('table#idAttachmentsTable').find('tbody').find('tr');
    for (var i = 0; i < MyRows.length; i++) {
        var AttCol = $(MyRows[i]).find('td:eq(0)').find('span').html();

        var lastItem = AttCol.split("\\").pop(-1);

        var ComCol = $(MyRows[i]).find('td:eq(2)').find('span').text();
        fileinfo += lastItem + ";" +ComCol + "#";


    }
    $("textarea[title='DocumentComments']").val(fileinfo);
}

Now we will include all feature step by Step

Step: 1
   
SharePoint Custom file attachment control

Step: 2
 Client Validation for SharePoint file Upload Control

Step: 3
 SharePoint error duplicate file ulpoad error

SharePoint file upload / attachment control has a very big issue is " SharePoint List will not allow to attach duplicate files."

If we used custom file upload control we dont have direct way to restrict to upload duplicate files.
we will get the below error message.
"Fail to get the value of the attachments column. A file with same name is already exists".
 

We can handle this error by using JQuery.

// it is the same duplicate check code
        var foundDuplication = false;

        $('#idAttachmentsTable').find('tbody').find('tr').each(function () {
            var existingFileName = $(this).find('.ms-vb').find('a').text();
            // if the existingFileName is empty then the attachment was uploaded in this session
            // that is, it is not saved yet
            if (existingFileName == '') {
                var existingFilePath = $(this).find('.ms-vb').find('span').text();
                existingFileName = existingFilePath.replace(/^.*[\\\/]/, '');
            }

            if (newFileName == existingFileName) {
                foundDuplication = true;
                return false;
            }
        });

        if (foundDuplication) {
            alert("A file with name '" + newFileName + "' is already attached to this item.");
           // $('#attachmentsOnClient').find('input').last().clone(true).remove();
   //$('#attachmentsOnClient').find('input').last().val('');
   var lastupp = $('#attachmentsOnClient').find('input').last();
   //$('#attachmentsOnClient').find('input').last().replaceWith(($('#attachmentsOnClient').find('input').last()).clone(true));
   lastupp.replaceWith((lastupp).clone(true));
   document.getElementById("onetidIOComment").value = "";
   

        }

Here we have only one option to replace the last uploaded control with new one. The internal functionality of the file upload control is, when ever a file is uploaded, SharePoint will hide the existing upload control and will create new upload control to upload another file.

Now we will include all feature step by Step

Step: 1
   
SharePoint Custom file attachment control

Step: 2
 Client Validation for SharePoint file Upload Control

Step: 3
 SharePoint add comments for each attached document

we can set client side validation for SharePoint file upload / attachment control.
we can do validation on
 1. Restricted file types
2.  Max file Size
3. Min File Size

function CustomUpload() {

    var newFilePath = $('#attachmentsOnClient').find('input').last().val();   
    var newFileName = TrimWhiteSpaces(newFilePath).replace(/^.*[\\\/]/, '');
 var restrictype = ".ade|\\.adp|\\.asa|\\.ashx|\\.asmx|\\.asp|\\.bas|\\.bat|\\.cdx|\\.cer|\\.chm|\\.class|\\.cmd|\\.com|\\.config|\\.cnt|\\.cpl|\\.crt|\\.csh|\\.der|\\.dll|\\.exe|\\.fxp|\\.gadget|\\.grp|\\.hlp|\\.hpj|\\.hta|\\.htr|\\.htw|\\.ida|\\.idc|\\.idq|\\.ins|\\.isp|\\.its|\\.jse|\\.json|\\.ksh|\\.lnk|\\.mad|\\.maf|\\.mag|\\.mam|\\.maq|\\.mar|\\.mas|\\.mat|\\.mau|\\.mav|\\.maw|\\.mcf|\\.mda|\\.mdb|\\.mde|\\.mdt|\\.mdw|\\.mdz|\\.ms-one-stub|\\.msc|\\.msh|\\.msh1|\\.msh1xml|\\.msh2|\\.msh2xml|\\.mshxml|\\.msi|\\.msp|\\.mst|\\.ops|\\.pcd|\\.pif|\\.pl|\\.prf|\\.prg|\\.printer|\\.ps1|\\.ps1xml|\\.ps2|\\.ps2xml|\\.psc1|\\.psc2|\\.pst|\\.reg|\\.rem|\\.scf|\\.scr|\\.sct|\\.shb|\\.shs|\\.shtm|\\.shtml|\\.soap|\\.stm|\\.svc|\\.url|\\.vb|\\.vbe|\\.vbs|\\.vsix|\\.ws|\\.wsc|\\.wsf|\\.wsh|\\.xamlx";
    var maxFileNameLength = 128; 
 var maxFileSize = 250;
 //var extension = newFileName.replace(/^.*\./, '');
  var myFSO = new ActiveXObject("Scripting.FileSystemObject");
  var thefile = myFSO.getFile(newFilePath);
  var filesize = Math.round((thefile.size/1048576),2);
    
   
 
    var match = (new RegExp('[~#%\&{}+\|]|\\.\\.|^\\.|\\.$')).test(newFileName);
  var filetypes = (new RegExp(restrictype)).test(newFileName);
  
    if (match) {
        alert("Ivalid file name. The name of the attached file contains invalid characters.");
    }
    else if (newFileName.length > maxFileNameLength) {
        alert("Ivalid file name. The name of the attached file is too long.");
    }
  else if (newFileName.length <= 0) {
        alert("Please select a file");
    }
 else if(filetypes) {
  alert("Ivalid file type. The attached file type is restricted by SharePoint.");
   return false;
 } 
 else if(filesize > maxFileSize) {
  alert("The attached file size exceeds size limit of 250MB.");
   return false;
   
 } 

} 

Now we will include all feature step by Step

Step: 1
   
SharePoint Custom file attachment control

Step: 2
 Stop Showing duplicate file upload Error

Step: 3
 SharePoint add comments for each attached document

Get and Set the Users or Names on SharePoint 2013 People Picker (Person Group) field on Custom List Forms using JQuery.

The SharePoint 2013 Client People Picker on Custom List forms is different from OOB control.
The "div" structure is different when compare with both. So we have to write different script on custom forms.

The below code will give an example to get and set the values for Client People Picker or Person Group Field on Custom List forms.

// Get People Picker Values
function getEditorPeoplePickerValues(fieldName) { // Field Title
        editorNames = "";
        var _PeoplePicker = $("div[title='" + fieldName + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
        editorsInfo = ppobject.GetAllUserInfo();

        var i;
        for (i = 0; i < editorsInfo.length; ++i) {
            editorNames += editorsInfo[i].DisplayText + ";#";
        }
    }

// Set People Picker Values
function SetAndResolvePeoplePicker(fieldName, userAccountName) {
       // alert(userAccountName);
        var _PeoplePicker = $("div[title='" + fieldName + "']");
        var _PeoplePickerTopId = _PeoplePicker.attr('id');
        var _PeoplePickerEditer = $("input[title='" + fieldName + "']");

        userAccountName.split(";#").forEach(function (part) {
   if (part !== "" && part !== null) {
          //  alert(part);
            _PeoplePickerEditer.val(part);
            var _PeoplePickerOject = SPClientPeoplePicker.SPClientPeoplePickerDict[_PeoplePickerTopId];
            _PeoplePickerOject.AddUnresolvedUserFromEditor(true);
   }
        });

    }

// How to use the above function on our code

call direct function to get values. but to set values we have to create an array with names.
var editorNames = "";
getEditorPeoplePickerValues("Field Title");
SetAndResolvePeoplePicker("Field Title", editorNames );

Get deleted names or entries from SharePoint 2010 format People Picker control on list forms using JavaScript or JQuery.

Here we have to get values from the people picker at OnLoad and PreSaveAction and we have to get the values and set the values as below.

/*  */

var onloadViewerNames = [];
var presaveViewerNames = [];

jQuery(document).ready(function () {
 onloadViewerNames = getPickerInputElement("ff2"); // Get Viewer Names on load  
}); 

function PreSaveAction() {
 presaveViewerNames = getPickerInputElement("ff2"); // Get Viewer Names on pre save 
 var getDeletedViewer = $(onloadViewerNames).not(presaveViewerNames).get();
 var delvalues= "";
 if(getDeletedViewer.length){
  for (var i=0; i < getDeletedViewer.length; i++) {
   delvalues += getDeletedViewer[i] + "; ";
  }
  setPickerInputElement("ff6", delvalues)
 }
 
 return true;
}

// Get Users/Names from the Poeple Picker
function getPickerInputElement(identifier) {
 var tags = document.getElementsByTagName('DIV');
 var returnval = [];
 for (var i=0; i < tags.length; i++) {
  var tempString = tags[i].id;
  if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){
   var innerSpans = tags[i].getElementsByTagName("SPAN");
   for(var j=0; j < innerSpans.length; j++) {
    if(innerSpans[j].id == 'content') {
     //return innerSpans[j].innerHTML;
     returnval.push(innerSpans[j].innerHTML);
    }
   }
  }
 }
 return returnval; 
}

// Set Deleted Users into another People Picker
function setPickerInputElement(identifier, value) {
  var tags = document.getElementsByTagName('DIV');

  for (var i=0; i < tags.length; i++) {
    var tempString = tags[i].id;
    //alert('tags[' + i + '].id = ' + tempString);
    if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){
      //alert('HIT for ' + identifier + ' id=' + tags[i].id + ' value=' + tags[i].value);
      tags[i].innerHTML = value;
      break;
    }
  }
}

Get SharePoint People Picker Value using Java Script

var PickerPerson = getPickerInputElement("ff13"); // Here ff13 is your people picker control ID

function getPickerInputElement(identifier) {

var tags = document.getElementsByTagName('DIV');

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0))        {

var innerSpans = tags[i].getElementsByTagName("SPAN");

for(var j=0; j < innerSpans.length; j++) {

if(innerSpans[j].id == 'content') {

return innerSpans[j].innerHTML;

}

}

}

}

return null;

}

Validate and compare the people picker values..

<script type="text/javascript">

function PreSaveAction(){

var OwnerVal = getPickerInputElement("ff4");

var ManagerVal = getPickerInputElement("ff5");

if(OwnerVal == ManagerVal){

alert("Please enter different names.");

return false;

}

else{

return true;

}

}

function getPickerInputElement(identifier) {

var tags = document.getElementsByTagName('DIV');

for (var i=0; i < tags.length; i++) {

var tempString = tags[i].id;

if ((tempString.indexOf(identifier) > 0) && (tempString.indexOf('UserField_upLevelDiv') > 0)){

var innerSpans = tags[i].getElementsByTagName("SPAN");

for(var j=0; j < innerSpans.length; j++) {

if(innerSpans[j].id == 'content') {

return innerSpans[j].innerHTML;

}

}

}

}

return null;

}

</script>