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>
  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. });
  13. function registerClick() {
  14. //Register File Upload Click Event
  15. $("#addFileButton").click(readFile);
  16. }
  17. var arrayBuffer;
  19. function readFile() {
  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];
  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;
  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');
  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);
  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. }
  64. function QuerySuccess() {
  65. console.log('File Uploaded Successfully.');
  66. alert("File Uploaded Successfully.").
  67. }
  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. }
  74. </script>
  75. </head>
  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.