0

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.

2

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!

  • Wow! Thanks for posting such a detailed answer - I definitely wasn't expecting that! You rock. – user5013 Nov 10 '17 at 21:17
  • You are welcome, by the way, I have added to SP.SOD.executeFunc to make sure the code will be run after loading SP.js and to work properly with publishing page :) Please if you face any issue with running this code please don't hesitate to inform us! – Mohamed El-Qassas MVP Nov 10 '17 at 21:36
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.