In this post we will  see how to upload a file to Document library to a specific folder path using remainder api  in SharePoint online and SharePoint 2013.

i)  Create a  Document Library (SampleDocuments)  with ii columns( Column1 and Column2) .Create a folder(Folder1) in that.

2) Copy the beneath script and to a notepad and save the file with  name FileUploadScript.js 

$(document).ready(function () { 	SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () { 		init(); 	}); });  function init() { 	$("#btnUploadFiles").click(function(){ 		var files=$("#inputTypeFiles")[0].files; 		uploadFiles(files[0]); // uploading singe file 	}); }  function uploadFiles (uploadFileObj) { 	var fileName = uploadFileObj.proper name; 	var webUrl = _spPageContextInfo.webAbsoluteUrl; 	var documentLibrary="SampleDocuments"; 	var folderName = "Folder1"; 	var targetUrl = _spPageContextInfo.webServerRelativeUrl + "/" + documentLibrary + "/" + folderName; 	var url = webUrl + "/_api/Spider web/GetFolderByServerRelativeUrl(@target)/Files/add(overwrite=true, url='" + fileName + "')?$expand=ListItemAllFields&@target='" + targetUrl + "'";  	uploadFileToFolder(uploadFileObj, url, part (information) { 		var file = data.d; 		var updateObject = { 			__metadata: { 				blazon: file.ListItemAllFields.__metadata.type 			}, 			Column1: 'Test Data',   //meta data column1 			Column2: 'Test Data'    //meta data column2 		};  		url = webUrl + "/_api/Web/lists/getbytitle('"+documentLibrary+"')/items(" + file.ListItemAllFields.Id + ")";  		updateFileMetadata(url, updateObject, file, function (data) { 			alert("File uploaded & meta data updation done successfully"); 		}, function (data) { 			warning("File upload done but meta data updating FAILED"); 		}); 	}, function (information) { 		alert("File uploading and meta data updating FAILED"); 	}); }  function getFileBuffer(uploadFile) { 	var deferred = jQuery.Deferred(); 	var reader = new FileReader(); 	reader.onloadend = function (due east) { 		deferred.resolve(e.target.result); 	} 	reader.onerror = office (east) { 		deferred.turn down(east.target.error); 	} 	reader.readAsArrayBuffer(uploadFile); 	return deferred.promise(); }  function uploadFileToFolder(fileObj, url, success, failure) { 	var apiUrl = url; 	var getFile = getFileBuffer(fileObj); 	getFile.done(office (arrayBuffer) { 		$.ajax({ 			url: apiUrl, 			type: "Postal service", 			data: arrayBuffer, 			processData: false, 			async: imitation, 			headers: { 				"accept": "application/json;odata=verbose", 				"X-RequestDigest": jQuery("#__REQUESTDIGEST").val(), 			}, 			success: function (data) { 				success(data); 			}, 			fault: role (data) { 				failure(information); 			} 		}); 	}); }  function updateFileMetadata(apiUrl, updateObject, file, success, failure) { 	$.ajax({ 		url: apiUrl, 		type: "POST", 		async: imitation, 		data: JSON.stringify(updateObject), 		headers: { 			"accept": "application/json;odata=verbose", 			"X-RequestDigest": $("#__REQUESTDIGEST").val(), 			"Content-Blazon": "application/json;odata=verbose", 			"X-Http-Method": "MERGE", 			"IF-Match": file.ListItemAllFields.__metadata.etag, 		}, 		success: office (data) { 			success(information); 		}, 		error: function (data) { 			failure(data); 		} 	}); }

3) upload theFileUploadScript.js to one of the Certificate Library (SharepointMates)

4) Upload the jquery-iii.1.ane.js(apply can you the latest version of Jquery)  to one of the Document Library (SharepointMates)

5) re-create the below  html code  to notepad and save the file with a FileUpload.html and upload to one of the Document Library(SharepointMates)

<script type="text/javascript" src="https://tarundev.sharepoint.com/sites/sharepointmates/SharepointMates/Scripts/jquery-three.ane.1.js"></script> <script type="text/javascript" src="https://tarundev.sharepoint.com/sites/sharepointmates/SharepointMates/Scripts/FileUploadScript.js"></script>  <input type="File" id="inputTypeFiles" />  <br> <input type="push" id="btnUploadFiles" value="submit" Text="Upload"/>

Note:

a)  Please give the correct  url of the scripts files(FileUploadScript.js and   jquery-3.one.1.js) .

b)  Make sure the Publishing characteristic was enable to the site collection

6) Create a folio in the Site pages Library( Fileupload.aspx) and Place the content editor webpart in that page. Give the url of the URL of theFileUpload.html  in the  content Link Department  as bear witness below.

contentlink

Click on Use push button and Save the Page.

7) Uplod a file and Click on the submit Button.

upload

8) The file volition be upload to the specific Certificate Library to the specific Folderpath with the metadata.

In the Next article we will how to upload file with different columns like DateTime,Lookup,Person or Group,Managed Metadata etc….