I cover this and more in SharePoint REST API and Lists with Folders.
When you add a folder in SharePoint using the Web UI it actually adds two things: the folder and a list item. It's the list item that shows up in the List View. Also, there are two names. The name of the list item and the name of the folder. You set the name of the list item by setting the Title field value and you set the name of the folder by setting the FileLeafRef field value. When you add a folder using the REST API, it just adds the folder. The workaround is to add the list item and set the content type to folder. This adds the list item and the folder. The problem is that trying to set the name of the folder on creation does not work. You need to create the list item and then set the name of the folder as a second step.
In the sample below we are creating a new folder with the Title 'Folder 99'. This folder will be a child of the root folder.
function addFolder() { var appUrl = GetUrlKeyValue("SPAppWebUrl"); var hostUrl = GetUrlKeyValue("SPHostUrl"); function addFolderInternal() { var addFolderUrl = appUrl + "/_api/SP.AppContextSite(@target)" + "/Web/Lists/getByTitle('FolderTest')/Items?" + "@target='" + hostUrl + "'"; var addFolderCall = jQuery.ajax({ url: addFolderUrl, type: "POST", data: JSON.stringify({ "__metadata": { type: "SP.Data.FolderTestListItem" }, Title: "Folder 99", FileLeafRef: "Folder 99", // No effect here FileSystemObjectType: SP.FileSystemObjectType.folder, ContentTypeId: "0x0120" }), headers: { Accept: "application/json;odata=verbose", "Content-Type": "application/json;odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val() } }); return addFolderCall; } function renameFolder(data) { var renameFolderUrl = appUrl + "/_api/SP.AppContextSite(@target)" + "/Web/Lists/getByTitle('FolderTest')/Items('" + data.d.Id + "')?" + "@target='" + hostUrl + "'"; var renameFolderCall = jQuery.ajax({ url: renameFolderUrl, type: "POST", data: JSON.stringify({ "__metadata": { type: "SP.Data.FolderTestListItem" }, Title: "Folder 99", FileLeafRef: "Folder 99" }), headers: { Accept: "application/json;odata=verbose", "Content-Type": "application/json;odata=verbose", "X-RequestDigest": jQuery("#__REQUESTDIGEST").val(), "IF-MATCH": "*", "X-Http-Method": "PATCH" } }); return renameFolderCall; } var message = jQuery("#message"); message.text("Working on it..."); var call = addFolderInternal().then(renameFolder); call.done(function (data, textStatus, jqXHR) { message.text("Folder 99 added"); }); call.fail(failHandler); }
Another option is to use the SharePoint 2010 REST API to add the folder. In the request the ContentTypeID property of the message body indicates that you want to create a folder and the Path property of the message body identifies the parent folder by its server relative URL.
function addFolder() { var call = jQuery.ajax({ url: _spPageContextInfo.webAbsoluteUrl + "/_vti_bin/ListData.svc/FolderTest", type: "POST", data: JSON.stringify({ ContentTypeID: "0x0120", Title: "Folder 99", Path: _spPageContextInfo.webServerRelativeUrl + "/Lists/FolderTest" }), dataType: "json", headers: { Accept: "application/json", "Content-Type": "application/json" } }); call.done(function (data, textStatus, jqXHR) { var message = container.find("#message"); message.text("Folder 99 added"); }); call.fail(function (jqXHR, textStatus, errorThrown) { failHandler(jqXHR, textStatus, errorThrown, this.type, this.url, this.data); }); }