-->
Showing posts with label File Upload Control. Show all posts

SharePoint add comments for each attached document

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 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



Client Validation for SharePoint file Upload Control


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



SharePoint Custom file attachment control

Attach multiple files to SharePoint list item with custom upload control.
we can do the below features to your file upload control

1. Add Client Validation
2. Avoid duplicate file upload error
3. upload multiple attachments
4. include each document comments

Here we can use Custom Upload Control and OOB Attachments table.

HTML Code for Attachment Control:

                  

                
                        

                    
                


                
                     
 
                  


                  
                    
                  


                
              



Now we will include all feature step by Step

Step: 1
   
Client Validation for SharePoint file Upload Control

Step: 2
 Stop Showing duplicate file upload Error

Step: 3
 SharePoint add comments for each attached document