Create a File in a Document Library in SharePoint 2013 Using CSOM-JavaScript

Veda Bs
Mar 04, 2014
19.5k
0
0
Article

Introduction

This article explains how to create a file in a Document Library in SharePoint 2013 using CSOM-JavaScript.

Prerequisites

Ensure you have access to the Office 365 online.
Ensure the Napa Tool is available in your site.

Use the following procedure

Create an app for SharePoint using Office 365 Tools. If you have missed out on how to create an app in SharePoint 2013, then Click here.
Create a Docment Library and name it “MyDocumentLibrary”. Refer to my article if you want to learn how to create Document Library in SP2013. Click Here
Click on the Default.aspx page.
Add 2 TextBoxes to capture the file name and file content details respectively.
Add a button to create a file in the Document Library and place it inside the "PlaceHolderMain" tag.

Enter File Name: <input type="text" id="txtFileName" name="txtFileName"></input>

Enter File Content: <input type="text" id="txtFileContent" name="txtFileContent"/>

<button id="btnDeleteFolder" onclick="createFile()">Create File</button>
Click on the App.js file.
Globally declare the content, web and list objects as shown below.

    var context = SP.ClientContext.get_current(); //gets the current context

    var web = context.get_web(); //gets the web object

    var list = web.get_lists(); //gets the list collection object

    var targetList;

    var fileCreation;

    var fileContent;
Now write the function to create a file in a Document Library.

    function createFile() {

        targetList = list.getByTitle("MyDocumentLibrary");

        fileCreation = new SP.FileCreationInformation();

        var fileName = document.getElementById("txtFileName").value; //gets the file name

        fileName = fileName + ".txt";

        fileCreation.set_url(fileName);

        fileCreation.set_content(new SP.Base64EncodedByteArray());

        fileContent = document.getElementById("txtFileContent").value;

        //gets the file contents.

        for (var content = 0; content < fileContent.length; content++) {

            fileCreation.get_content().append(fileContent.charCodeAt(content)); //add the text content to the file.

        }

        //create a new file instance

        var newFile = targetList.get_rootFolder().get_files().add(fileCreation);

        context.load(newFile);

        context.executeQueryAsync(onFileCreationSuccess, onFileCreationFail);

    }
Here in this example we are creating a file in a Document Library.
We are using a “FileCreationInformation” object to create the file in a Document Library.
Set the URL and content attribute using the FileCreationInformation object and then add this object to the Document Library using the add method.
Load the new file object and execute the code by calling executeQueryAsync ().

    function onFileCreationSuccess() {

        alert("file Created");

    }

    function onFileCreationFail(sender, args) {

        alert('Failed to create a file. Error:' + args.get_message());

    }
That's it!! Now let's start testing.

Testing

Now to run the app click on the "Play" button available towards the left-most corner.
The app is packaged, deployed and installed on your Office 365 Site.
Now you will be able to see the following page.
Enter the file name as “MyTextFile” and file content as “This is my custom content added through code.” in the respective text boxes and click on "Create File" button.
Now to check the file that was created recently, let's navigate to the following URL.

Syntax: https://yoursite/DocumentLibraryName
Example: https://mysite/MyDocumentLibrary
You will be able to see the text file that you created recently.
Click on "…" and click on "Edit".
Now let's go and check the content that we added.