Upload list item attachment using Jquery and rest call

Most of the time we require to upload SharePoint list item attachment from the custom interface. So here is the simplest way to upload list item attachment. It requires jQuery to execute this code.

Call “fnUpload” just pass List title, Item ID that’s it.  I am assuming here you already created HTML with file upload control.

function fnUpload() {
    var allFiles = [];
    var input = document.getElementById('<ReplaceWithFileUploadID>');
    var file = input.files[0];
    if (file != null && file.size > 0) {
        allFiles.push(file);
    }
    if (allFiles.length > 0) {
        // replace list item name ,and list item id. 
        fnUploadFile('[Replace with List Name]', parseInt('[Replace with Item ID]'), allFiles[0]);
    }
    else {
        alert("There is no file selected, please select file...");
    }
}

function fnGetFileBuffer(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 fnUploadFile(listName, itemID, file) {
    var deferred = $.Deferred();
    var fileName = file.name;
    fnGetFileBuffer(file).then(
        function (buffer) {
            var bytes = new Uint8Array(buffer);
            var binary = '';
            for (var b = 0; b < bytes.length; b++) {
                binary += String.fromCharCode(bytes[b]);
            }
            var scriptbase = _spPageContextInfo.webServerRelativeUrl + "/_layouts/15/";
            $.getScript(scriptbase + "SP.RequestExecutor.js", function () {
                var createitem = new SP.RequestExecutor(_spPageContextInfo.webServerRelativeUrl);
                createitem.executeAsync({
                    url: siteurl + "/../_api/web/lists/GetByTitle('" + listName + "')/items(" + itemID + ")/AttachmentFiles/add(FileName='" + fileName + "')",
                    method: "POST",
                    binaryStringRequestBody: true,
                    body: binary,
                    success: function (data) {
                        alert("file Uploaded Succesfully.");
                        deferred.resolve(data);
                    },
                    error: function (data) {
                        alert(data + "There is a error while uploading..")
                        deferred.reject(data);
                    },
                    state: "Update"
                });
            });
        },
        function (err) {
            deferred.reject(err);
        }
    );
    return deferred.promise();
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s