How to create and modify files in the style library using a webpart?

Question

I am using SharePoint 2010 and have the following requirement: I am creating an html file from a webpart within SharePoint (ie the user pushes a button and an html text stream is created in memory). I would like to save the in memory text stream to a file in the Style Library directory (and then modify that file when the user pushes that generate button again).

I have everything working till this part. I don't know how to create and modify a file in the Style Directory through a web part. I have Googled high and low but can't find anything with regards to doing this. I figure that this should be pretty straight forward but as I am still relatively new to SharePoint, I don't know how.

What SharePoint and/or file commands do I need to use to accomplish this?

Thanks.

Answer 1

You can create a file in Style Library via JSOM using the below code

<button onclick="SP.SOD.executeFunc('sp.js', 'SP.ClientContext', createfile);" >Create file</button>

<script type="text/javascript">
function createfile() {
    var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
    oWebsite = clientContext.get_web(); 
    oList = oWebsite.get_lists().getByTitle("Style Library");  
    fileCreateInfo = new SP.FileCreationInformation();  
    fileCreateInfo.set_url("File.html");  
    fileCreateInfo.set_content(new SP.Base64EncodedByteArray());  
    fileContent = "The File Contents";
    for (var i = 0; i < fileContent.length; i++)   
    {  
    fileCreateInfo.get_content().append(fileContent.charCodeAt(i));  
    }  
    this.newFile = oList.get_rootFolder().get_files().add(fileCreateInfo);  
    clientContext.load(this.newFile);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
   alert('Created');
}

function onQueryFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + 
      '\n' + args.get_stackTrace());
} 

</script>

---

To modify the file use fileCreateInfo.set_overwrite(true); as the following:

<button onclick="SP.SOD.executeFunc('sp.js', 'SP.ClientContext', Modifyfile);" >Modify file</button>

<script type="text/javascript">
function Modifyfile() {
    var clientContext = new SP.ClientContext(_spPageContextInfo.webAbsoluteUrl);
    oWebsite = clientContext.get_web(); 
    oList = oWebsite.get_lists().getByTitle("Style Library");  
    fileCreateInfo = new SP.FileCreationInformation();  
    fileCreateInfo.set_url("File.html");  
    fileCreateInfo.set_content(new SP.Base64EncodedByteArray()); 
    fileCreateInfo.set_overwrite(true);  
    fileContent = "The File Contents";
    for (var i = 0; i < fileContent.length; i++)   
    {  
    fileCreateInfo.get_content().append(fileContent.charCodeAt(i));  
    }  
    this.newFile = oList.get_rootFolder().get_files().add(fileCreateInfo);  
    clientContext.load(this.newFile);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {
   alert('Created');
}

function onQueryFailed(sender, args) {
  alert('Request failed. ' + args.get_message() + 
      '\n' + args.get_stackTrace());
} 

</script>

---

Note: The above script is tested and worked properly on my side!

Answer 2

For those people who are still using server side web parts, this is how to this:

try
{
  using (SPSite site = new SPSite(RootURL))
  {
    using (SPWeb web = site.OpenWeb())
    {
      SPFolder folder = web.GetFolder("Style Library");

      // Check whether the file is already exists?
      string filepath = folder.Url + subDirPath + filename;
      SPFile file = web.GetFile(filepath);
      if (file.Exists)
      {
        file.CheckOut();
      }
      // Add the file
      using (Stream stream = GenerateStreamFromString(output))
      {
        SPFile newFile = folder.Files.Add(RootURL + "/" + filepath, stream, true);
        newFile.CheckIn("Check in by WebPart");
        newFile.Publish("Published by WebPart");
      }
      // display success message
    }
  }
}
catch (Exception err)
{
  // Process error
}

Where: RootURL is http://example.com, subDirPath is the sub directory path, filename is the name of the file you wish to create.