Upload File Attachment Sharepoint List With Javascript

• 
• Updated date Jun 28, 2016

• 43.8k
• 2

In this article, you will learn how to upload files to List particular in Office 365 equally an attachment, using JavaScript Object Model.

It is rather a common scenario, where we might have a requirement to upload a file to a SharePoint List as an attachment. SharePoint provides the flexibility to upload multiple attachments to a specific list detail, contrary to the library functionality of a single document upload per item. Nosotros can add an attachment to the list detail out of the box, if the list settings permits the user to do then.

If enabled, nosotros tin can adhere the multiple attachments to a particular list particular.

Whenever an attachment is added, internally, SharePoint creates an zipper folder for each item it is attached to. If there is no zipper for a listing item, it won't have an attachment folder. The attachment folder for a particular item will exist located at the URL given below:

https://SiteURL/sites/Playground/Lists/ListName/Attachments/1

ListName is the proper name of the list. '1' is the folder proper name that is created with the proper name as List item ID.

Let's see how nosotros can implement uploading of the attachments to the list item, using JavaScript Object Model,

• Add reference to jQuery file.
  
  1. <script language= "javascript"  type= "text/javascript"  src= "//ajax.googleapis.com/ajax/libs/jquery/1.viii.1/jquery.min.js" ></script>
  2. <script language="javascript"  type= "text/javascript" >
• Within the document, call ready office SP.SOD.executeFunc, so as to load the on demand script SP.js . Since we are trying to upload a file from the local machine, we will use HTML 5 input control to read the file contents and upload it as an zipper.

  Call the primary starting point function say: registerClick.

  1. SP.SOD.executeFunc( 'sp.js' , 'SP.ClientContext' , registerClick);
• Instantiate FileReader object and read the contents of the local file.
  
  1. var reader = new  FileReader();
  2. reader.onload = function(e)
  3. {
  4.     uploadFile(e.target.outcome, fileName);
  5. }
  6. reader.onerror = function(e)
  7. {
  8.     alert(due east.target.fault);
  9. }
  10. reader.readAsArrayBuffer(file);
• Instantiate the client context and get the list case.
  
  1. clientContext = new  SP.ClientContext();
  2. var oWeb = clientContext.get_web();
  4. var oList = oWeb.get_lists().getByTitle('NewList' );
  5. var attachmentFolder=oWeb.getFolderByServerRelativeUrl('Lists/NewList/Attachments/1' );
• Convert the file contents into base64 data,
  
  1. var bytes = new  Uint8Array(arrayBuffer);
  2. var i, length,out  = '' ;
  3. for  (i = 0, length = bytes.length; i < length; i += 1)
  4. {
  5. out  += String.fromCharCode(bytes[i]);
  6. }
  7. var base64 = btoa(out );
• Create FileCreationInformation object, using the read file information,
  
  1. createInfo = new  SP.FileCreationInformation();
  2. createInfo.set_content(base64);
  3. createInfo.set_url(fileName);
  5. attachmentFiles = attachmentFolder.get_files().add(createInfo);
• Load the client context and execute the batch, which will send the request to the Server and perform the entire JavaScript object model operations as a batch.
  
  1. clientContext.load(oList);
  2. clientContext.load(attachmentFiles);
  3. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);

We can test this in SharePoint by adding it to the Content Editor Web office.

• Save the code given beneath to a text file and salvage it into i of the SharePoint libraries say: Site Assets
  
  1. < html >
  2. < head >
  3. < script language = "javascript" blazon = "text/javascript" src = "//ajax.googleapis.com/ajax/libs/jquery/1.eight.one/jquery.min.js" > </ script >
  4. < script linguistic communication = "javascript" type = "text/javascript" >
  5.         var fileInput;
  6.         $(document).set up(office()
  7.         {
  8. fileInput  = $("#getFile");
  9.             SP.SOD.executeFunc('sp.js', 'SP.ClientContext', registerClick);
  10.         });
  12.         function registerClick()
  13.         {
  14.             //Annals 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.             varchemical element  = certificate .getElementById("getFile");
  23.             varfile  = chemical element .files[0];
  24.             varparts  = chemical element .value.split("\\");
  25.             varfileName  = parts [parts.length - 1];
  26.             //Read File contents using file reader
  27.             varreader  = new  FileReader();
  28. reader.onload  = function (e) {
  29.                 uploadFile(eastward.target.result, fileName);
  30.             }
  31. reader.onerror  = part (eastward)
  32.             {
  33.                 alarm(e.target.error);
  34.             }
  35.             reader.readAsArrayBuffer(file);
  36.         }
  37.         var attachmentFiles, clientContext, createInfo;
  39.         office uploadFile(arrayBuffer, fileName)
  40.         {
  41.             //Get Customer Context and Spider web object.
  42. clientContext  = new  SP.ClientContext();
  43.             varoWeb  = clientContext .get_web();
  45.             //Get list and Zipper binder where the zipper of a particular listing item is stored.
  46.             varoList  = oWeb .get_lists().getByTitle('NewList');
  47.             varattachmentFolder  = oWeb .getFolderByServerRelativeUrl('Lists/NewList/Attachments/1');
  49.             //Catechumen the file contents into base64 data
  50.             varbytes  = new  Uint8Array(arrayBuffer);
  51.             var i, length,out  = '' ;
  52.             for (i  = 0 , length  = bytes .length; i < length ; i += i) {
  53.                 out += String.fromCharCode(bytes[i]);
  54.             }
  55.             varbase64  = 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 together the file to the listing item
  62. attachmentFiles  = attachmentFolder .get_files().add(createInfo);
  64.             //Load customer 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 bulletin - ' + args.get_message() + ' . Stack Trace - ' + args.get_stackTrace());
  78.         }
  79. </ script >
  80. </ head >
  82. < torso >
  83. < input id = "getFile" type = "file" /> < br />
  84. < input id = "addFileButton" type = "push button" value = "Upload" />
  85. </ torso >
  86. < html >
• Go to the edit settings of the SharePoint page and click Web part from the Insert tab.

  

• Add together Content Editor Web part.

  

• Click Edit Web fine art from Content Edit Web part. Assign the URL of the script text file and click Utilize.

  

• Now Click Apply. Information technology gives u.s.a. a UI from where nosotros can upload the file as an attachment to SharePoint Llst particular.

  

In one case we browse and click on upload it volition upload the attachment file to the specified List Item.

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

PitfallHowever, there is a limitation for this method. JavaScript object model allows merely the upload of the files, which are less than or equal to v MB in size. Whatsoever file higher up the file limit cannot be uploaded using JSOM. Instead, we volition have to utilize REST to perform the upload, which will exist covered in an upcoming article.

leonardmemmar.blogspot.com

Source: https://www.c-sharpcorner.com/article/upload-file-to-listitem-in-office-365-as-an-attachment-using-javascript-object-m/

Share this post