Tuesday, December 12, 2017

Uploading multiple files to SharePoint list as attachment using SharePointPlus

Uploading multiple files to SharePoint list as attachment using SharePointPlus
Step 1: Create an custom list and add an test item.
Step 2: Create an "FileUpload.html" and add below code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SharePoint Plus</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/nanoajax/nanoajax.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/sharepointplus-4.0.min.js"></script>
    <script type="text/javascript">
        var fileData = new Object;
        var objFileContent = new Object;
        var objFileName = new Object;
        var arrayGuid = [];
        $(document).ready(function () {
            myAttachments();
        });
        function createGuid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0, v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }
        function remove(array, element) {
            const index = array.indexOf(element);
            if (index !== -1) {
                array.splice(index, 1);
            }
        }
        function deleteFileAttachment(divID) {
            console.log(divID);
            $("#" + divID + "").remove();
            delete fileData["" + divID + ""];
            delete objFileName["" + divID + ""];
            remove(arrayGuid, "" + divID + "");
        }
        function uploadListAttachment(content, objFileName) {
            $SP().list("CustomList01").addAttachment({
                ID: 3,
                filename: objFileName,
                attachment: content.toBase64String(),
                after: function (fileURL) {
                    console.log(fileURL);
                }
            });
        }
        function FileUpload() {
            for (i = 0; i < Object.keys(fileData).length; i++) {
                var bytes = new Uint8Array(fileData[arrayGuid[i]]);
                if (bytes.length > 0) {
                    var content = new SP.Base64EncodedByteArray();
                    for (var b = 0; b < bytes.length; b++) {
                        content.append(bytes[b]);
                    }
                    objFileContent[arrayGuid[i]] = content;
                }
            }
            for (i = 0; i < Object.keys(objFileContent).length; i++) {
                console.log("objFileContent : " + objFileContent[arrayGuid[i]]);
                console.log("objFileName : " + objFileName[arrayGuid[i]]);
                if (objFileContent[arrayGuid[i]] != null && objFileName[arrayGuid[i]] != null) {
                    uploadListAttachment(objFileContent[arrayGuid[i]], objFileName[arrayGuid[i]]);
                }
            };
        }
        function myAttachments() {
            $("#my-attachments").change(function () {
                var x = document.getElementById("my-attachments");
                var txt = "";
                if ('files' in x) {
                    if (x.files.length == 0) {
                        txt = "Select one or more files.";
                    } else {
                        for (var i = 0; i < x.files.length; i++) {
                            arrayGuid.push(createGuid());
                            txt += "<div id='" + arrayGuid[arrayGuid.length - 1] + "'><img onclick=\"deleteFileAttachment('" + arrayGuid[arrayGuid.length - 1] + "')\" src='https://sharepointonline01.sharepoint.com/sites/dev2/SiteAssets/fileupload/delete_file.png' alt='Delete' width='10' height='10'>";
                            var file = x.files[i];
                            if ('name' in file) {
                                txt += "  " + file.name + " ";
                            }
                            if ('size' in file) {
                                txt += "(" + file.size + " bytes)</div>";
                            }
                        }
                    }
                }
                else {
                    if (x.value == "") {
                        txt += "Select one or more files.";
                    } else {
                        txt += "The files property is not supported by your browser!";
                        txt += "<br>The path of the selected file: " + x.value; // If the browser does not support the files property, it will return the path of the selected file instead.
                    }
                }
                $('#demo').append(txt);
                var j = 0, k = $(this)[0].files.length;
                for (var i = 0; i < k; i++) {
                    var reader = new FileReader();
                    reader.onloadend = function (evt) {
                        if (evt.target.readyState == FileReader.DONE) {
                            fileData[arrayGuid[arrayGuid.length - k + j]] = evt.target.result;
                            j++;
                            if (j == k) {
                                console.log('All files read');
                            }
                        }
                    };
                    reader.readAsArrayBuffer($(this)[0].files[i]);
                    objFileName[arrayGuid[Object.keys(objFileName).length]] = $(this)[0].files[i].name;
                }
            });
        }
    </script>
</head>
<body>
    <input id="my-attachments" type="file" multiple fileread="run.AttachmentData" fileinfo="run.AttachmentInfo" style="display: none;" />
    <input type="button" value="Chose Files..." onclick="document.getElementById('my-attachments').click();" />
    <button type="button" onclick="FileUpload()">File Upload</button>
    <div id="demo"></div>
</body>
</html>
===========================================
Using "jquery.multifile.min.js" code  V.1.0
===========================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SharePoint Plus</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/nanoajax/nanoajax.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/sharepointplus-4.0.min.js"></script>
    <script type="text/javascript" src="https://sharepointonline01.sharepoint.com/sites/dev2/SiteAssets/fileupload/jquery.multifile.min.js"></script>
    <script type="text/javascript">
var fileData = new Object;
    var objFileContent = new Object;
    var objFileName = new Object;
$(document).ready(function () {
$('#my-attachments').MultiFile({     
    onFileRemove: function(element, value, master_element) {
    myAttachments(element, value, master_element);
    },
    afterFileRemove: function(element, value, master_element) {
    myAttachments(element, value, master_element);
    },
    onFileAppend: function(element, value, master_element) {},
    afterFileAppend: function(element, value, master_element) {
    myAttachments(element, value, master_element);
    },
    onFileSelect: function(element, value, master_element) {},
    afterFileSelect: function(element, value, master_element) {},
    onFileInvalid: function(element, value, master_element) {},
    onFileDuplicate: function(element, value, master_element) {},
    onFileTooMany: function(element, value, master_element) {},
    onFileTooBig: function(element, value, master_element) {},
    onFileTooMuch: function(element, value, master_element) {}
  });
     });     
    function myAttachments(element, value, master_element) {
    fileData = [];
    objFileName = [];
if(master_element.files.length>0) {
master_element.files.forEach(function(file,index) {
objFileName[index] = file.name;
var reader = new FileReader();
reader.onload = function(){
fileData[index] = reader.result;
};
reader.readAsArrayBuffer(file);
});
}
}
function FileUpload() {
for (i = 0; i < Object.keys(fileData).length; i++) {
            var bytes = new Uint8Array(fileData[i]);
            if (bytes.length > 0) {
                var content = new SP.Base64EncodedByteArray();
                for (var b = 0; b < bytes.length; b++) {
                    content.append(bytes[b]);
                }
                objFileContent[i] = content;
            }
        }
        for (i = 0; i < Object.keys(objFileContent).length; i++) {
uploadListAttachment(objFileContent[i], objFileName[i]);  
}          
}
function uploadListAttachment(content, objFileName) {
        $SP().list("CustomList01").addAttachment({
            ID: 4,
            filename: objFileName,
            attachment: content.toBase64String(),
            after: function (fileURL) {
                console.log("fileURL: " +fileURL);
            }
        });
    }
</script>
</head>
<body>
    <input id="my-attachments" type="file" />
    <button type="button" onclick="FileUpload()">File Upload</button>
</body>
</html>
===========================================
Using "jquery.multifile.min.js" code V.2.0
===========================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SharePoint Plus</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/nanoajax/nanoajax.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/sharepointplus-4.0.min.js"></script>
    <script type="text/javascript" src="https://sharepointonline01.sharepoint.com/sites/dev2/SiteAssets/fileupload/jquery.multifile.min.js"></script>
    <script type="text/javascript">
        var objmaster_element = "";
         var bytes = "";
        $(document).ready(function () {
            $('#my-attachments').MultiFile({
                onFileRemove: function (element, value, master_element) {
                    objmaster_element = master_element;
                },
                afterFileRemove: function (element, value, master_element) {
                    objmaster_element = master_element;
                },
                onFileAppend: function (element, value, master_element) { },
                afterFileAppend: function (element, value, master_element) {
                    objmaster_element = master_element;
                },
                onFileSelect: function (element, value, master_element) { },
                afterFileSelect: function (element, value, master_element) { },
                onFileInvalid: function (element, value, master_element) { },
                onFileDuplicate: function (element, value, master_element) { },
                onFileTooMany: function (element, value, master_element) { },
                onFileTooBig: function (element, value, master_element) { },
                onFileTooMuch: function (element, value, master_element) { }
            });
        });
        function FileUpload() {
            if (objmaster_element.files.length > 0) {
                objmaster_element.files.forEach(function (file, index) {
                    var reader = new FileReader();
                    reader.onload = function () {
                         bytes = new Uint8Array(reader.result);
                    };
                    reader.readAsArrayBuffer(file);                   
                    if (bytes.length > 0) {
                        var content = new SP.Base64EncodedByteArray();
                        for (var b = 0; b < bytes.length; b++) {
                            content.append(bytes[b]);
                        }
                        $SP().list("CustomList01").addAttachment({
                            ID: 4,
                            filename: file.name,
                            attachment: content.toBase64String(),
                            async: true,
                            after: function (fileURL) {
                                console.log("fileURL: " + fileURL);                                
                            }
                        });
                    }
                });
            }            
        }
    </script>
</head>
<body>
    test1
    <input id="my-attachments" type="file" />
    <button type="button" onclick="FileUpload()">File Upload</button>
</body>

</html>
===========================================
Using "jquery.multifile.min.js" code V.3.0
===========================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>SharePoint Plus</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/nanoajax/nanoajax.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/sharepointplus-4.0.min.js"></script>
    <script type="text/javascript" src="https://sharepointonline01.sharepoint.com/sites/dev2/SiteAssets/fileupload/jquery.multifile.min.js"></script>
    <script type="text/javascript">
        var objmaster_element = "";
        var bytes = "";
        $(document).ready(function () {
            $('#my-attachments').MultiFile({
                onFileRemove: function (element, value, master_element) {
                    objmaster_element = master_element;
                },
                afterFileRemove: function (element, value, master_element) {
                    objmaster_element = master_element;
                },
                onFileAppend: function (element, value, master_element) { },
                afterFileAppend: function (element, value, master_element) {
                    objmaster_element = master_element;
                },
                onFileSelect: function (element, value, master_element) { },
                afterFileSelect: function (element, value, master_element) { },
                onFileInvalid: function (element, value, master_element) { },
                onFileDuplicate: function (element, value, master_element) { },
                onFileTooMany: function (element, value, master_element) { },
                onFileTooBig: function (element, value, master_element) { },
                onFileTooMuch: function (element, value, master_element) { }
            });
        });
        function FileUpload() {
            if (objmaster_element.files.length > 0) {
                var promises = [];
                objmaster_element.files.forEach(function (file, index) {
                    var deferred = $.Deferred();
                    getFileBuffer(file).then(
                      function (buffer) {
                          getContent(buffer).then(
                              function (content) {
                                  $SP().list("CustomList01").addAttachment({
                                      ID: 4,
                                      filename: file.name,
                                      attachment: content.toBase64String(),
                                      async: false,
                                      completefunc: function (xData, Status) {
                                          deferred.resolve();
                                      }
                                  });
                                  promises.push(deferred);
                              });
                      },
                      function (err) {
                          deferred.reject(err);
                      });
                    return deferred.promise();
                });
                return $.when.apply(undefined, promises).promise();            }
        }
        function getFileBuffer(file) {
            var deferred = $.Deferred();
            var reader = new FileReader();
            reader.onload = function (e) {
                deferred.resolve(e.target.result);
            }
            reader.onerror = function (e) {
                deferred.reject(e.target.error);
            }
            reader.readAsArrayBuffer(file);
            return deferred.promise();
        }
        function getContent(buffer) {
            var deferred = $.Deferred();
            var bytes = new Uint8Array(buffer);
            var content = new SP.Base64EncodedByteArray();
            for (var b = 0; b < bytes.length; b++) {
                content.append(bytes[b]);
            }
            deferred.resolve(content);
            return deferred.promise();
        }
    </script>
</head>
<body>
    <input id="my-attachments" type="file" />
    <button type="button" onclick="FileUpload()">File Upload</button>
</body>
</html>
===========================================
=====================================
<!-- Using "jquery.multifile.min.js" and JQuery Ajax code V.4.0 -->
<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/nanoajax/nanoajax.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/sharepointplus@4.0.0/sharepointplus-4.0.min.js"></script>
    <script type="text/javascript" src="/sites/dev2/SiteAssets/fileupload/jquery.multifile.min.js"></script>
    <script type="text/javascript">
        var ID = 4;
        var listname = "CustomList01";
        var array_filename = [];
        var array_buffer = [];
        $(document).ready(function () {
            $('#my-attachments').MultiFile({
                onFileRemove: function (element, value, master_element) {
                    myAttachments(element, value, master_element);
                },
                afterFileRemove: function (element, value, master_element) {
                    myAttachments(element, value, master_element);
                },
                onFileAppend: function (element, value, master_element) { },
                afterFileAppend: function (element, value, master_element) {
                    myAttachments(element, value, master_element);
                },
                onFileSelect: function (element, value, master_element) { },
                afterFileSelect: function (element, value, master_element) { },
                onFileInvalid: function (element, value, master_element) { },
                onFileDuplicate: function (element, value, master_element) { },
                onFileTooMany: function (element, value, master_element) { },
                onFileTooBig: function (element, value, master_element) { },
                onFileTooMuch: function (element, value, master_element) { }
            });
            $("#btnUpload").click(function () {
                fileUpload();
            });
        });
        function myAttachments(element, value, master_element) {
            array_filename = [];
            array_buffer = [];
            master_element.files.forEach(function (file, index) {
                var getFileBuffer = function (file) {
                    var deferred = $.Deferred();
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        deferred.resolve(e.target.result);
                    }
                    reader.onerror = function (e) {
                        deferred.reject(e.target.error);
                    }
                    reader.readAsArrayBuffer(file);
                    return deferred.promise();
                };
                getFileBuffer(file).then(function (buffer) {
                    array_filename.push(file.name);
                    array_buffer.push(buffer);
                });
            });
        }
        function fileUpload() {
            for (let i = 0, p = Promise.resolve(); i < array_filename.length; i++) {
                p = p.then(_ => new Promise(resolve =>
                setTimeout(function () {
                    var filename = array_filename[i];
                    var buffer = array_buffer[i];
                    var request = $.ajax({
                        url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('" + listname + "')/items(" + ID + ")/AttachmentFiles/add(FileName='" + filename + "')",
                        method: 'POST',
                        data: buffer,
                        processData: false,
                        headers: {
                            "Accept": "application/json; odata=verbose",
                            "content-type": "application/json; odata=verbose",
                            "X-RequestDigest": document.getElementById("__REQUESTDIGEST").value,
                            //"content-length": buffer.byteLength
                        },
                        async: true,
                        success: function (data, status, xhr) {},
                        error: function (xhr, status, error) {},
                        complete: function() {}
                    });
                    resolve(request);
                }, 1000)
                ));
            }
        }
    </script>
</head>
<body>
    <div>
        <input id="my-attachments" type="file" fileread="run.AttachmentData" fileinfo="run.AttachmentInfo" />
        <input id="btnUpload" type="button" value="upload" />
    </div>
</body>
</html>
=====================================
Step 3: Upload "FileUpload.html" this file to site assets.
Step 4: Create an WebPart page and add content editor webpart.
Step 5: Test application.

3 comments:

  1. The article demonstrates a practical method for uploading multiple files as attachments to a SharePoint list item using SharePointPlus. The workflow covers creating a custom list, selecting multiple files through an HTML file input, generating unique identifiers for each selected file, and maintaining the selected files before upload.

    The JavaScript implementation also shows how file content and filenames are stored separately so that individual attachments can be removed before submission. The FileUpload() function converts the file bytes into a SP.Base64EncodedByteArray before passing the encoded content to SharePointPlus, making this a useful example for applying Javascript Course in Chennai concepts to SharePoint-based file handling.

    ReplyDelete
  2. The uploadListAttachment() function then calls $SP().list().addAttachment() with the list item ID, filename, and Base64-encoded attachment content. Together with the file-selection and deletion logic, the example provides a practical use case for Javascript Training in Chennai topics such as JavaScript objects, arrays, DOM manipulation, and asynchronous SharePoint operations.

    ReplyDelete

Featured Post

How to Enable and Manage the Copilot Icon in SharePoint Online: A Complete Admin Guide

Copilot in SharePoint shows up as an agent icon in the SharePoint global header. From there, users can ask questions, summarise content, a...

Popular posts