How to upload a document file in SharePoint list with REST API using jquery?

  Upload a document file in SharePoint list with REST API using jquery:

Use the below snippet code

<html>
<head>
<script src="/Site%20Assets/js/jquery-1.11.1.min.js"></script>
<script src="/Site%20Assets/Assets/Jquery/jquery-2.2.4.min.js"></script>
</head>
<body>
<div>
        <input id="uploadFile" type="file">
</div>
<button type="button" id="saveDocuments">Save </button>
<script>
$(document).ready(function(){
    var listName = 'ERepairShop';
    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 uploadFileSP(listName, id, fileArray, fileCount) {
        var FilesCount = 0;
        var deferred = $.Deferred();
        var uploadStatus = "";
        var file = fileArray[0];
        var getFile = getFileBuffer(file);

         getFile.done(function (buffer, status, xhr) {
            var bytes = new Uint8Array(buffer);
            var content = new SP.Base64EncodedByteArray();
            var queryUrl = _spPageContextInfo.webAbsoluteUrl + "/_api/lists/GetByTitle('" + listName + "')/items(" + id + ")/AttachmentFiles/add(FileName='" + file.name + "')";
            var uploadCount = 0;
            $.ajax({
                url: queryUrl,
                type: "POST",
                processData: false,
                contentType: "application/json;odata=verbose",
                data: buffer,
                headers: {
                    "accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                    "content-length": buffer.byteLength
                },
                success: function (data) {
                    FilesCount++;
                    uploadStatus = FilesCount;
                    fileArray.shift();
                    if (fileArray.length > 0) {
                        uploadFileSP("UploadTest", id, fileArray, fileArray.length);
                    }
                    else {
                        alert('Document Upload Successfully.');
                    }
                },
                error: function (err) {
                   alert('Something Went Wrong.');
                }
            });
            deferred.resolve(uploadStatus);
        });

         getFile.fail(function (err) {
            deferred.reject(err);
        });
        return deferred.promise();
    }

     function AddAttachments()
    {
        var fileInput = $('#uploadFile');
        var fileCount = fileInput[0].files.length;
        if (fileCount === 0 ) {
                alert('Please upload file.');
                return;
        }
        var fileArray = [];
        for (var i = 0; i < fileCount; i++) {
        fileArray.push(fileInput[0].files[i]);
        }
        console.log(fileArray);
        console.log(fileInput);
        id=1;
    uploadFileSP(listName, id, fileArray, fileCount);
    }
    $("#saveDocuments").on('click', function(){
        AddAttachments();  
    })
});
</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Get list item entity type full name of a SharePoint list using REST API

Image
Get list item entity type full name of a SharePoint list using REST API : Follow the below steps to get ListItemEntityTypeFullName which must required for adding/updating items/records to the server or the SharePoint list. 1) First user/developer need logged in to the SharePoint site and then copy any of below URL/API. 2) Replace the _spPageContextInfo.webAbsoluteURL or siteurl (absolute URL) with the URL of you site for example. siteurl = https://testcompany.sharepoint.com/sites/testsite1 3) and replace SharePoint ListName = Payments or you original list name 4) Finally hit or place the complete URL/API API = https://testcompany.sharepoint.com/sites/testsite1/_api/Web/Lists/getbytitle('Students')/ListItemEntityTypeFullName into the browser search bar/box and click on enter button from keyboard then you will able to see output as shown in Output below   _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getbytitle('ListName')/items?select=EntityTypeFullName OR s...
Read more

Get SharePoint list name by GUID

Image
 Get SharePoint list name by GUID in jQuery: Use the below snippet code to get the name of list by using listGuid . To do so replace the below list guid with your SP list GUID. var listGuid = "aa4774cf-oa71-83e4-6a67-01b53d5a7y6i2";//use your own SP site list guid getlistNameByGUID(listGuid); function getlistNameByGUID(guid) { $.ajax({         url: _spPageContextInfo.siteAbsoluteUrl + "/_api/Web/Lists(guid'"+listGuid+"')",         method: "GET",         headers: { "Accept": "application/json; odata=verbose" },         success: function (data) {              console.log(data.d.Title);         },         error: function (e) {             console.log(e)         }   }); } Output: Company//list name of my sp site  Was this helpful? Comment you suggestions and share it with yo...
Read more

Get Current Web Logged In User of SharePoint Site in jQuery

Get Current web logged in User of a SharePoint site in jQuery: Use the below snippet and just replace the jQuery library URL and run on you SharePoint page. <script src="../Assets/Jquery/jquery-1.9.1.min.js"></script> <script > function getCurrentLogInUser(){ $.ajax({     url: _spPageContextInfo.webServerRelativeUrl + "/_api/web/currentuser",     type: "GET",     async:false,     headers: { "Accept": "application/json;odata=verbose" } }).success(function( data ){     console.log( data );     console.log( data.d.Title ); }).error(function(e){     console.log( e ); }); } getCurrentLogInUser(); </script> Output:
Read more