Post
Ask Question

Folder Wise Document Uploading In A Document Library

Create your document library with the respective folders.

SharePoint
Create a txt file and add the below code (after making necessary changes at the highlighted areas, such as - your library name, folder name respectively) and save it in Site Assets.
  1. <html> <head> <script language="javascript" type="text/javascript" src="https://industowers.sharepoint.com/sites/LPMS/Style%20Library/LPMS/JS/1.8.1jquery.min.js">  
  2. </script>  
  3.   
  4.  <script language="javascript" type="text/javascript">    
  5.         var fileInput;    
  6.         $(document).ready(function()     
  7.         {    
  8.             fileInput = $("#getFile");    
  9.             SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);    
  10.         });    
  11.     
  12.         function registerClick()     
  13.         {    
  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.             //Read File contents using file reader    
  27.             var reader = new FileReader();    
  28.             reader.onload = function(e) {    
  29.                 uploadFile(e.target.result, fileName);    
  30.             }    
  31.             reader.onerror = function(e)     
  32.             {    
  33.                 alert(e.target.error);    
  34.             }    
  35.             reader.readAsArrayBuffer(file);    
  36.         }    
  37.         var attachmentFiles, clientContext, createInfo;    
  38.     
  39.         function uploadFile(arrayBuffer, fileName)     
  40.         {    
  41.             //Get Client Context and Web object.    
  42.             clientContext = new SP.ClientContext();    
  43.             var oWeb = clientContext.get_web();    
  44.     
  45.             //Get list and Attachment folder where the attachment of a particular list item is stored.    
  46.             var oList = oWeb.get_lists().getByTitle('CS100');    
  47.             var attachmentFolder = oWeb.getFolderByServerRelativeUrl('/sites/LPMS/CS100/Trial');    
  48.     
  49.             //Convert the file contents into base64 data    
  50.             var bytes = new Uint8Array(arrayBuffer);    
  51.             var i, length, out = '';    
  52.             for (i = 0, length = bytes.length; i < length; i += 1) {    
  53.                 out += String.fromCharCode(bytes[i]);    
  54.             }    
  55.             var base64 = btoa(out);    
  56.             //Create FileCreationInformation object using the read file data    
  57.             createInfo = new SP.FileCreationInformation();    
  58.             createInfo.set_content(base64);    
  59.             createInfo.set_url(fileName);    
  60.     
  61.             //Add the file to the list item    
  62.             attachmentFiles = attachmentFolder.get_files().add(createInfo);    
  63.     
  64.             //Load client context and execute the batch    
  65.             clientContext.load(oList);    
  66.             clientContext.load(attachmentFiles);    
  67.             clientContext.executeQueryAsync(QuerySuccess, QueryFailure);    
  68.         }    
  69.     
  70.         function QuerySuccess()     
  71.         {    
  72.             console.log("Attachment added successfuly ");    
  73.         }    
  74.     
  75.         function QueryFailure(sender, args)     
  76.         {    
  77.             console.log('Request failed with error message - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());    
  78.         }    
  79.     </script>    
  80.   
  81. </head>   
  82. <body> <input id="getFile" type="file"/><br /> <input id="addFileButton" type="button" value="Upload" /> </body> <html>   
Take the path of the file and save it.

SharePoint
Create a site page and add a CEWP to pull that file using the path saved earlier. Click "Apply" and save the site page.

SharePoint

Start uploading the attachments.

SharePoint

SharePoint
You can see the uploading of attachments happening.

SharePoint

Note

The above approach is successful on both, SharePoint Online and SharePoint On premise environments; as this is simple JavaScript client-side coding.

Keep changing the folder name and library name for your respective folder-wise documents whenever required.
Next Recommended Reading How To Upload Document In Document Library Using JSOM In Sharepoint 2013