Post
Ask Question

How To Upload Document In Document Library Using JSOM In Sharepoint 2013

Steps
  • Create SharePoint page in pages library.
  • Add Content Editor Web part in SharePoint page.
  • Create a .txt file and save the code given below in txt file. Ex- "fileUpload.txt"
  • Upload fileUpload.txt in Site Assets library. 
  • Refer the script file from CEWP and save the page.

     
fileUpload.txt - Code 
  1. <html>  
  2.   
  3.     <head>  
  4.         <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>  
  5.         <script language="javascript" type="text/javascript">  
  6. var fileInput;  
  7. $(document)  
  8.     .ready(function () {  
  9.         fileInput = $("#getFile");  
  10.         SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);  
  11.     });  
  12.   
  13. function registerClick() {  
  14.     //Register File Upload Click Event   
  15.     $("#addFileButton").click(readFile);  
  16. }  
  17. var arrayBuffer;  
  18.   
  19. function readFile() {  
  20.     
  21.     //Get File Input Control and read th file name  
  22.     var element = document.getElementById("getFile");  
  23.     var file = element.files[0];  
  24.     var parts = element.value.split("\\");  
  25.     var fileName = parts[parts.length - 1];  
  26.     
  27.     //Read File contents using file reader  
  28.     var reader = new FileReader();  
  29.     reader.onload = function (e) {  
  30.         uploadFile(e.target.result, fileName);  
  31.     }  
  32.     reader.onerror = function (e) {  
  33.         alert(e.target.error);  
  34.     }  
  35.     reader.readAsArrayBuffer(file);  
  36. }  
  37. var attachmentFiles;  
  38.   
  39. function uploadFile(arrayBuffer, fileName) {  
  40.     //Get Client Context,Web and List object.  
  41.     var clientContext = new SP.ClientContext();  
  42.     var oWeb = clientContext.get_web();  
  43.     var oList = oWeb.get_lists().getByTitle('Documents');  
  44.     
  45.     //Convert the file contents into base64 data  
  46.  var bytes = new Uint8Array(arrayBuffer);  
  47.     var i, length, out = '';  
  48.     for (i = 0, length = bytes.length; i < length; i += 1) {  
  49.         out += String.fromCharCode(bytes[i]);  
  50.     }  
  51.     var base64 = btoa(out);  
  52.     //Create FileCreationInformation object using the read file data  
  53.     var createInfo = new SP.FileCreationInformation();  
  54.     createInfo.set_content(base64);  
  55.     createInfo.set_url(fileName);  
  56.     
  57.     //Add the file to the library  
  58.     var uploadedDocument = oList.get_rootFolder().get_files().add(createInfo)  
  59.     //Load client context and execcute the batch  
  60.     clientContext.load(uploadedDocument);  
  61.     clientContext.executeQueryAsync(QuerySuccess, QueryFailure);  
  62. }  
  63.   
  64. function QuerySuccess() {  
  65.     console.log('File Uploaded Successfully.');  
  66.     alert("File Uploaded Successfully.").  
  67. }  
  68.   
  69. function QueryFailure(sender, args) {  
  70.     console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());  
  71. alert("Request failed with error message - " + args.get_message() + " . Stack Trace - " + args.get_stackTrace());  
  72. }  
  73.   
  74.         </script>  
  75.     </head>  
  76.   
  77.     <body>  
  78.         <input id="getFile" type="file" /><br /> <input id="addFileButton" type="button" value="Upload" />  
  79.     </body>  
  80.     <html>  
 Now, refresh the page.
 
 
 
Select the file and click upload.

Now, go to Document library and verify your uploaded document.