How to Create and delete a file using Rest API in SharePoint Online/2013/2016

This Rest API SharePoint tutorial explains, how to create and delete a file using Rest API in SharePoint Online or SharePoint 2013/2016.

If you are new to SharePoint Rest API, check out the below tutorials:

• SharePoint Rest API Crud Operations

Create a file using Rest API in SharePoint

Now, we will see how to create a file using Rest API in SharePoint Online/2013/2016. You can add code inside the script editor web part in a web part page in SharePoint Online or SharePoint 2013/2016.

Here in this particular example let us take a textbox, multiple text boxes as well as a button in an HTML form. Here the user will give a name for the file and the user can put the file content in the multiline textbox. Then the user can submit in the button which will create a text file.

Here we will write both the HTML code as well as in the JavaScript object model (jsom) inside a script editor web part which will be inside a web part page. The HTML code will look like below:

HTML Code:

<div id="CreateFile">
<div>
<strong>Enter Document Name:</strong>
<br />
<input type="text" id="txtDocumentTitle" />
</div>
<div>
<strong>Enter Document Content:</strong>
<br />
<textarea cols="20″ id="txtDocumentContent"></textarea>
</div>
<br />
<input type="button" id="btnSubmit" value="Submit" />
</div>
<div id="divResults"></div>

Rest API Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(function () {
bindButtonClick();
});

function bindButtonClick() {
$("#btnSubmit").on("click", function () {
createDocument();
});
}

function createDocument() {
var docTitle = $("#txtDocumentTitle").val() + ".txt";
var docContent = $("#txtDocumentContent").val();

var fullUrl = _spPageContextInfo.webAbsoluteUrl+ "/_api/web/GetFolderByServerRelativeUrl('Shared Documents')/Files/add(url='" + docTitle +"',overwrite=true)";

$.ajax({
url: fullUrl,
type: "POST",
data: docContent,
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val()
},
success: onQuerySucceeded,
error: onQueryFailed
});
}

function onQuerySucceeded() {
$("#divResults").html("Document successfully created!");
}

function onQueryFailed() {
alert('Error!');
}
</script>

Once we will Save the page you can see a page like below where user can give a title for the file, then the user can put content in the content textbox and then the user can click on the submit button which will create a file inside the document library like below:

Now you can check in the SharePoint document library where you can see the file got created in the document library in SharePoint.

This is how we can create a document using Rest API in SharePoint Online Office 365.

Delete a file using Rest API in SharePoint

Now, we will see how to delete a file using Rest API in SharePoint Online/2013/2016.

Here in this example, we have a file name as Bijay.txt inside the documents document library. We will delete the file using Rest API.

The document library looks like below:

Here we have taken an HTML input box and a submit button. The user will give a name in the textbox and click on the Delete File button which will delete the file from the document library.

Below is the HTML Code:

Here let us add both the HTML and Rest API code inside a script editor web part inside a web part page.

HTML Code:

<div id="DeleteFile">
<div>
<strong>File Name to Delete:</strong>
<br />
<input type="text" id="txtDocumentTitle" />
</div>
<br />
<input type="button" id="btnSubmit" value="Delete File" />
</div>
<div id="divResults"></div>

Below is the Rest API code. Here we are calling the deleteDocument() method on the button click.

Rest API Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(function () {
bindButtonClick();
});
function bindButtonClick() {
$("#btnSubmit").on("click", function () {
deleteDocument();
});
}

function deleteDocument() {
var docTitle = $("#txtDocumentTitle").val() + ".txt";
var siteUrl = _spPageContextInfo.webAbsoluteUrl;
var webRelUrl = _spPageContextInfo.webServerRelativeUrl;
var fullUrl = siteUrl + "/_api/web/GetFileByServerRelativeUrl('" + webRelUrl +"/Shared Documents/" + docTitle +"')";
$.ajax({
url: fullUrl,
type: "POST",
headers: {
"accept": "application/json;odata=verbose",
"content-type": "application/json;odata=verbose",
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"X-HTTP-Method": "DELETE",
"IF-MATCH": "*"
},
success: onQuerySucceeded,
error: onQueryFailed
});
}

function onQuerySucceeded() {
$("#divResults").html("Document successfully deleted!");
}

function onQueryFailed(sender, args) {
alert('Error!');
}

</script>

Once you save the code and refresh the page, then you can see the page will appear like below, where user can give the file name and click on the Delete File button which will delete the file from the document library in SharePoint.

Now if we will check the document library the file is not there like below:

This is how we can delete a file using Rest API in SharePoint.

You may like following SharePoint Rest API tutorials:

• Retrieve and Display TASK status using REST API in SharePoint
• Display SharePoint list data in jQuery data table using Rest API
• Create Highcharts in SharePoint using Rest API
• Display Task List data in a table using SharePoint REST API and filter by status column
• Delete all items from SharePoint Online list using Rest API
• Create, Update and Delete SharePoint List Item using Rest API

Hope this SharePoint tutorial explains, how to create a file using Rest API in SharePoint and also we discussed how to delete a file using Rest API in SharePoint Online or SharePoint 2013/2016.