Upload File To List Item In Office 365 As An Attachment Using JavaScript Object Model

• Save the code given below to a text file and save it into one of the SharePoint libraries say: Site Assets
  
  1. <html>
  2. <head>
  3. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></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('NewList');
  47. var attachmentFolder = oWeb.getFolderByServerRelativeUrl('Lists/NewList/Attachments/1');
  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>
  80. </head>
  82. <body>
  83. <input id="getFile" type="file" /><br />
  84. <input id="addFileButton" type="button" value="Upload" />
  85. </body>
  86. <html>
• Go to the edit settings of the SharePoint page and click Web part from the Insert tab.
  
  
  
  
• Add Content Editor Web part.
  
  
  
  
• Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click Apply.
  
  
  
  
• Now Click Apply. It gives us a UI from where we can upload the file as an attachment to SharePoint Llst item.
  
  
  

Once we browse and click on upload it will upload the attachment file to the specified List Item.



Thus, we have seen how we can upload a list item as an attachment to a SharePoint list Item.

Pitfall

However, there is a limitation for this method. JavaScript object model allows only the upload of the files, which are less than or equal to 5 MB in size. Any file above the file limit cannot be uploaded using JSOM. Instead, we will have to use REST to perform the upload, which will be covered in an upcoming article.