File uploader control in each row of html table

Noman Soofi 1 Reputation point

I am generating the rows dynamically in a HTML table on a button click. In each row there is a HTML file uploader control. Let say If I create 3 rows and on each row I browse the 3 different files for uploading. when I click submit button, I am being unable to get the file and upload in SharePoint list. For getting each row day, I am executing a loop.

please help me to get out of this problem.

Below is my code:

 <table class="myTable">
                <th>Team Name</th>
                <th>Cricketer Name</th>
        <tbody id="myBody">
                    <input type="file" id="doc_upload0" name="doc_upload" onchange="return validateSize(this,"/></td>
                    <input type="text" class="txtTeam" name='txtTeam0' placeholder="Enter Team Name"></td>
                    <input type="text" class="txtTeam" name='txtPlayer0' placeholder="Enter Player Name"></td>
                    <input type="text" class="txtTeam" name='txtBowler0' placeholder="Enter Bowler Name"></td>
                    <button type="button" class="btnDelete" > - </button></td>
    <p><button type="button" id="btnsave" class="btn btn-success" onclick="saverecord()">Save</button></p>


    var t;
    var rowHtml;
    $(document).ready(function () {

        var ID = 0;
        t = $("#myTable").DataTable();

        $("#addrows").click(function () {

            ID += 1;
            rowHtml = "<tr><td><input type='file' id='doc_upload" + ID + "' name='doc_upload' onchange='return validateSize(this,' /></td>" +
                "<td><input type='text' name='txtTeam" + ID + "' placeholder='Enter Team Name' /></td>" +
                "<td><input type='text' name='txtPlayer" + ID + "' placeholder='Enter Player Name' /></td>" +
                "<td><input type='text' name='txtBowler" + ID + "' placeholder='Enter Bowler Name' /></td>" +
                "<td><button type='button' class='btnDelete' > - </button></td></tr>";


        $(document).on('click', 'button.btnDelete', function () {
            return false;


    function saverecord() {

        var row = $('#myBody tr');
        var TotalRows = $('#myBody tr').length;
        serviceUri = "http://mysite/_vti_bin/Service1.svc/UATObservations";

        for (var i = 0; i <= 1; i++) {

            var fu_control = row[i].cells[0].getElementsByTagName('input')[0].value;

            var vData = {

                //ID: $("#RowID_IH").val(),
                TeamName: row[i].cells[1].getElementsByTagName('input')[0].value,
                PlayerName: row[i].cells[2].getElementsByTagName('input')[0].value,
                BowlerName: row[i].cells[3].getElementsByTagName('input')[0].value

                type: "POST",
                contentType: "application/json; charset=utf-8", // this
                dataType: "json", // and this
                url: serviceUri,
                data: JSON.stringify(vData),
                headers: { "Accept": "application/json; odata=verbose" },
                function (response) {

                    if (fu_control != '')
                        readFile(response, "PWA_UATObservation_Documents", fu_control);  // doc librayname 

                    alert("record saved successfully.");

                function (err) {


    function readFile(response, dlname, ctrlname) {
        //Get File Input Control and read the file name  
        //var element = document.getElementById("Attached_detailed");
        var element = document.getElementById(ctrlname);
        var file = element.files[0];
        var ReqID = response;
        //var documentlib = 'Detailed Requirement Document';
        var documentlib = dlname;
        var parts = element.value.split("\\");
        var fileName = parts[parts.length - 1];
        //Read File contents using file reader  
        var reader = new FileReader();
        reader.onload = function (e) {
            uploadFile(, fileName, documentlib, "1");
            //uploadFile(, fileName, documentlib, ReqID);
        reader.onerror = function (e) {

    function uploadFile(arrayBuffer, fileName, documentlib, ReqID) {
        //Get Client Context,Web and List object.  
        var clientContext = new SP.ClientContext();
        var oWeb = clientContext.get_web();
        var oList = oWeb.get_lists().getByTitle(documentlib);
        //Convert the file contents into base64 data  
        var bytes = new Uint8Array(arrayBuffer);
        var i, length, out = '';
        for (i = 0, length = bytes.length; i < length; i += 1) {
            out += String.fromCharCode(bytes[i]);
        var base64 = btoa(out);
        //Create FileCreationInformation object using the read file data  
        var createInfo = new SP.FileCreationInformation();
        //Add the file to the library  
        var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)
        var myListItem = uploadedDocument.get_listItemAllFields();
        myListItem.set_item("ReqID", ReqID.toString());
        //Load client context and execcute the batch  
        clientContext.executeQueryAsync(QuerySuccess, QueryFailure);

    function validateSize(input, ctrlname) {
        const fileSize = input.files[0].size / 1024 / 1024; // in MiB
        if (fileSize > 10) {
            alert('File size exceeds 10 MB');
            $("#" + ctrlname + "").css("border", "2px solid red");
            return false;
            // $(file).val(''); //for clearing with Jquery
        } else {
            $("#" + ctrlname + "").css("border", "");
            return true;
            // Proceed further
A set of technologies in the .NET Framework for building web applications and XML web services.
3,252 questions
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
9,609 questions
JavaScript API
JavaScript API
An Office service that supports add-ins to interact with objects in Office client applications.
866 questions
SharePoint Development
SharePoint Development
SharePoint: A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.Development: The process of researching, productizing, and refining new or existing technologies.
2,665 questions
{count} votes