SharePoint 2013 REST API create list item with attachments javascript

Question

By doing online research, I wrote code to create list item in JavaScript for SharePoint 2013 REST API, code is working fine.

I have also wrote code to upload attachments for particular item. The problem is, I need to make two separate calls to make this happen.

What I am trying to achieve is, create list item with multiple attachments in single HTTP call.

Answer 1

Hi try using below script block

function addItem(){

try{

    var data = {
        __metadata: { 'type': 'SP.Data.ListNameListItem' },
        Title: "Title"         
    };

   addListItem("ListName",$("#__REQUESTDIGEST").val(),data).then(function(data){

         if (document.getElementById("inputFile").files.length === 0) {                     
                    alert("Your item has been submitted successfully!");                        
           }       
           else
           {
               //File Upload
                var itemId =  data.d.ID;   
                var fileInput = $('#inputFile');
                var fileCount = fileInput[0].files.length;  
                var fileArray = [];

                for(var i=0;i<fileCount;i++)
                {
                    fileArray.push(fileInput[0].files[i]);
                }                               
                uploadFileSP("ListName", itemId, fileArray, fileCount);
           }
   },function(err){
       alert("Your item has not been submitted successfully!");
   });  
}
catch(error)
{
    alert("Your item has not been submitted successfully!");
}                               
}


function addListItem(listName,  requestDigestValue, data) {  

return $.ajax({
    url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getByTitle('" + listName + "')/items",
    type: "POST",
    headers: {
        "accept": "application/json;odata=verbose",
        "X-RequestDigest": requestDigestValue,
        "content-Type": "application/json;odata=verbose"
    },
    data: JSON.stringify(data)
});
}

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("ListName", id, fileArray, fileArray.length);
            }
            else {
              alert ("Your item has been submitted successfully!");                    
            }
        },
        error: function (err) {                
            alert("Idea has been submitted but some files failed to upload.");                
        }
    });
    deferred.resolve(uploadStatus);
});

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

Answer 2

The accepted answer asks user to authenticate for me.

This code which uses SPServices, works fine for me:

function AddAttachments(itemId, listName) {
var file = $("#videoUpload")[0].files[0];
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 bytes = new Uint8Array(buffer);
    var content = new SP.Base64EncodedByteArray(); //base64 encoding
    for (var b = 0; b < bytes.length; b++) {
        content.append(bytes[b]);
    }

    $().SPServices({
        operation: "AddAttachment",
        listName: listName,
        listItemID: itemId,
        fileName: file.name,
        attachment: content.toBase64String()
    });

});
}

Credits to the author: https://sympmarc.com/2014/05/27/uploading-attachments-to-sharepoint-lists-using-spservices/