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.
Next Recommended Reading Share documents with other users in SharePoint 2013 document library