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>
  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. });
  12. function registerClick()
  13. {
  14. //Register File Upload Click Event
  15. $("#addFileButton").click(readFile);
  16. }
  17. var arrayBuffer;
  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;
  39. function uploadFile(arrayBuffer, fileName)
  40. {
  41. //Get Client Context and Web object.
  42. clientContext = new SP.ClientContext();
  43. var oWeb = clientContext.get_web();
  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');
  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);
  61. //Add the file to the list item
  62. attachmentFiles = attachmentFolder.get_files().add(createInfo);
  64. //Load client context and execute the batch
  65. clientContext.load(oList);
  66. clientContext.load(attachmentFiles);
  67. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
  68. }
  70. function QuerySuccess()
  71. {
  72. console.log("Attachment added successfuly ");
  73. }
  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>
  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.