Upload files into a folder of SharePoint Document Library - REST API - JQuery

Hi, this post explains how to upload the files in to the document library of SharePoint.

Let us take the following control is input file control.

<input type="file" name="attachment" id="inputFileUpload" class="input-file-control"/>


Now we can upload the files into the SharePoint library with following functions.
In the following function parameters values are like as follow:

fileInputControlId -- Id of input file controls , here it is : '#inputFileUpload' ;
webUrl -- Url of SharePoint Site.
documentLibraryName -- Name of the document library which is root folder of uploaded file.
folderName -- Name of the folder exist in the specified document library of SharePoint Site.

For uploading files , you just call the "uploadFiles" method with required parameters.

//Call this function to upload the files.
function uploadFiles(fileInputControlId, webUrl, documentLibraryName, folderName) {
        for (var i = 0; i < $(fileInputControlId)[0].files.length; i++) {
            var uploadFile = $(fileInputControlId)[0].files[i];
            var getFile = getFileBuffer(uploadFile);
            getFile.done(function (arrayBuffer) {
                uploadFileToFolder(webUrl, documentLibraryName, folderName, uploadFile.name, arrayBuffer, function (data) {
                  alert("File upload done successfully");
                }, function (data) {
                  alert("File uploading fail");
                });
            });
        }
    }

//Get the uploaded file buffer.
function getFileBuffer(uploadFile) {
        var deferred = jQuery.Deferred();
        var reader = new FileReader();
        reader.onloadend = function (e) {
            deferred.resolve(e.target.result);
        }
        reader.onerror = function (e) {
            deferred.reject(e.target.error);
        }
        reader.readAsArrayBuffer(uploadFile);
        return deferred.promise();
    }

//Upload files into SharePoint library with REST API
 function uploadFileToFolder(webUrl, documentLibraryName, folderName, fileName, arrayBuffer, success, failure) {
        //file added to the subfolder of Rootfolder.
        var apiUrl = webUrl + "/_api/web/lists/getByTitle('" + documentLibraryName + "')/RootFolder/folders('" + folderName + "')/files/add(url='" + fileName + "', overwrite=true)";

        $.ajax({
            url: apiUrl,
            type: "POST",
            data: arrayBuffer,
            processData: false,
            async:false,
            headers: {
                "accept": "application/json;odata=verbose",
                "X-RequestDigest": jQuery("#__REQUESTDIGEST").val()
            },
            success: function (data) {
                success(data);
            },
            error: function (data) {
                failure(data);
            }
        });
    }

With the above function we can upload the files into the folder exist in the document library.
If we need to upload files directly into document library you need to change the REST API cal as follows:

var apiUrl = webUrl+"/_api/web/lists/getByTitle('" + documentLibraryName + "')/RootFolder/files/add(url='" + fileName + "', overwrite=true)";

That's all, I hope this helps to you.

Thank You...