Change filename of existing file on SharePoint Document library using REST API

Question

I have a question on how to change an existing file on SharePoint document library using REST API. I have a couple of files in the location http://site url/<RootFolder>/<SubFolder>/File.docx. I have a UI where it lists all the files from this subfloder location. When the user clicks on edit i am enabling the file name as textbox where the user can change the name of the file.

After doing some research i found that Constructing an endpoint that looks like this: https://<site url>/_api/web/lists/getbytitle('Documents')/items(<item id>) we can edit the file metadata properties. But i could not able to figure out the best way to update the filename of existing document that resides on SharePoint Doc library.

Could someone please help me with the REST API query to fetch the file and the approach to update the filename?

Answer 1

You could consider at least two options to rename a file.

Option 1. Rename file name

You could update the name of the existing list item as demonstrated below

Example

function rename(webUrl,listTitle,itemId,fileName){
   var endpointUrl = webUrl + "/_api/web/lists/getbytitle('" + listTitle + "')/items(" + itemId +  ")";
   return executeJson(endpointUrl)
   .then(function(data){                 
      var itemPayload = {};
      itemPayload['__metadata'] = {'type': data.d['__metadata']['type']};
      itemPayload['Title'] = fileName;
      itemPayload['FileLeafRef'] = fileName;
      var itemUrl = data.d['__metadata']['uri'];
      var headers = {};
      headers["X-HTTP-Method"] = "MERGE";
      headers["If-Match"] =  "*";
      return executeJson(itemUrl,"POST",headers,itemPayload);
   });
}

var webUrl = _spPageContextInfo.webAbsoluteUrl; // web url
var listTitle = "Documents";  //list title
var itemId = 1;  //list item id
var fileName = "SP User Guide.docx"; //new file name

rename(webUrl,listTitle,itemId,fileName)
.done(function(item){
   console.log('Renamed');
})
.fail(function(error){
    console.log(error);
});

Option 2. Use MoveTo REST endpoint

File could be renamed via MoveTo REST endpoint endpoint:

/_api/web/getfilebyserverrelativeurl('/Documents/filename.docx')/moveto(newurl='/Documents/newfilename.docx',flags=1)

Example

function moveTo(webUrl,sourceFileUrl,targetFileUrl){
   var endpointUrl = webUrl + "/_api/web/getfilebyserverrelativeurl('" + sourceFileUrl + "')/moveto(newurl='" + targetFileUrl + "',flags=1)";
   return executeJson(endpointUrl,"POST");
}

var webUrl = _spPageContextInfo.webAbsoluteUrl; // web url
var sourceFileUrl = "/Documents/SP2010.docx";
var targetFileUrl = "/Documents/SP2013.docx";

moveTo(webUrl,sourceFileUrl,targetFileUrl)
.done(function(item){
   console.log('Done');
})
.fail(function(error){
    console.log(error);
});

---

executeJson function:

function executeJson(url,method,headers,payload) 
{
    headers = headers || {};
    method = method || 'GET';
    headers["Accept"] = "application/json;odata=verbose";
    if(method == "POST") {
        headers["X-RequestDigest"] = $("#__REQUESTDIGEST").val();
    }   

    var ajaxOptions = 
    {       
       url: url,   
       type: method,  
       contentType: "application/json;odata=verbose",
       headers: headers
    };
    if(method == "POST") {
      ajaxOptions.data = JSON.stringify(payload);
    }  
    return $.ajax(ajaxOptions);
}

Answer 2

So a couple of things you are going to need to do here is to make sure you get the form digest before you can update the list. To find this information take a look at Wictor Wilen's blog. In the section under "How to refresh Token" you can see how to get the form digest.

Once you have that, you need to update the list item. It's pretty straight forward. I haven't used the rest API before to do this, and I don't have my dev environment handy to test, but this should work. When you access a list item, you also have have access to the fields, including the name field which you should be able to change the filename with. The following code should work, but you may need to modify it to meet your needs:

$.ajax({
   url: "http://<siteurl>/_api/web/lists/GetByTitle('ListTitle')/items('itemID'),
type: "POST",
   dataType: "json",
   Body: { '__metadata': { 'type': 'SP.Data.<ListName>ListItem' }, 'Name': 'NewName.docx'}
   headers: { 
          "Accept": "application/json;odata=verbose",
          "X-RequestDigest" : $("#__REQUESTDIGEST").val(),
          "X-HTTP-Method": "MERGE",
           "If-Match": "*"
       },
 Success: DoSuccess,
 Error: DoError,
});

Hope this helps.