Uploading multiple files to SharePoint List

Wow SharePoint is doing great with SharePoint rest api now you can do almost everything related to SharePoint using rest api. Today I am trying to upload multiple documents to SharePoint list item. You know what the problem is? You first need to create a SharePoint list item and then you can upload documents to the same SharePoint list item.

So let’s now try to create a new SharePoint list item.

function CreateNewItem() {
    var data = {
        __metadata: { 'type': "SP.Data.ListItem" },
        Title: $('#Title').val()
    };

    $.ajax({
        //_spPageContextInfo.webAbsoluteUrl get current SharePoint site url
        url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('" + ListTitle + "')/Items",
        type: "POST",
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "content-Type": "application/json;odata=verbose"
        },
        // to make sync calls.
        async: false,
        data: JSON.stringify(data),
        success: function (data) {
            if (data.d.ID != undefined && data.d.ID > 0)
                //Uploads files to SharePoint List item
                UploadFileToListItem(data.d);
            else
                alert('Item added successfully');
        },
        error: function (error) {
            alert('Problem saving data');
        }
    });
}

Once the item is created now let’s try to upload documents to SharePoint list item.

function UploadFileToListItem(data) {
    var element = document.getElementById("attachment");
    lastFileName = element.files[element.files.length - 1].name;
    for (var i = 0; i < element.files.length; i++) {
        var file = element.files[i];
        uploadFile(data, file);
    }
}

//uploads single file at a time.
function uploadFile(data, file) {
    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) {
        var binary = "";
        var bytes = new Uint8Array(buffer);
        var i = bytes.byteLength;
        while (i--) {
            binary = String.fromCharCode(bytes[i]) + binary;
        }
        var fileName = file.name;
        var error = ''
        $().SPServices({
            operation: "AddAttachment",
            async: false,
            listName: ListTitle,
            listItemID: data.Id,
            fileName: fileName,
            attachment: btoa(binary),
            completefunc: function (xData, Status) {
                console.log(file.name + "uploaded");
            }
        });
    });
}

Above code uses SPServices in order to upload files to SharePoint list item. To be frank I found SPServices to be more easy to use compared to SharePoint rest api. One more important think to take note of is don’t forget to add reference to jquery.SPServices.js on the top of the page.

<script type="text/javascript" src="jquery.SPServices.js"></script>

Below is the HTML that I have used to select multiple files.

<label class="cust-title">Select File:</label>
<input type="file" id="attachment" name="FileUpload" multiple/>

Let’s now try to get all uploaded file names from SharePoint list item.

  function GetListITem(id) {
    var uri = "/sites/spin/it/_api/web/lists/getbytitle('" + ListTitle + "')/items?$filter=Id eq " + id;
    jQuery.ajax
                 ({
                     url: uri,
                     type: "GET",
                     dataType: "json",
                     headers: requestHeaders,
                     async: true,
                     success: function (data) {
                         if (data.d.results != undefined && data.d.results.length > 0) {
                             alert(‘Yes got the data’);

//Get uri of SharePoint List Item document                    GetAllAttachments(data.d.results[0].AttachmentFiles.__deferred.uri);
                         }
                         else {
                             alert('Unable to get data');
                         }
                     },
                     error: function (error) {
                         console.log(JSON.stringify(error));
                         alert('Unable to get data');
                     }
                 });
}

function GetAllAttachments(url){
    $.ajax(
        {
            url: url, 
            method: "GET",
            headers: {
                "ACCEPT": "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose"                        
            },
            success: function (data) {
                var fileNames = "";
                $.each(data.d.results, function(){
                    fileNames += this.FileName + " |";
                });
                alert(fileNames.substring(0,fileNames.length - 1);
            },
            error: function (data) {
                alert("Error in retriving file name." + data);
            }
        });         
}

Regards,

Keyur Pandya