Retrieve and Delete Attachment Files In SharePoint 2016 And Office 365 Using JavaScript Object Model

Delete Attachment file

Once the list attachment object is retrieved, the list attachments can be deleted, using the ‘deleteObject’ method in JavaScript Object Model.

• Get the file attachment folder object and the attachment file collection within it.
  
  1. var attachmentFolder=
  2. oWeb.getFolderByServerRelativeUrl('Lists/Custom/Attachments/1');
  3. attachmentFiles= attachmentFolder.get_files();
• Load the client context and execute the batch so that the file collection can be retrieved from the server.
  
  1. clientContext.load(attachmentFiles);
  2. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
• Get the attachment file enumerator and loop through it. Use deleteObject to delete the attachment file.
  
  1. var attachmentEnumerator = attachmentFiles.getEnumerator();
  2. while (attachmentEnumerator.moveNext())
  3. var fileName = attachmentEnumerator.get_current().get_name();
  4. if (fileName == "Fields.docx")
  5. {
  6. deleteAttachment = attachmentEnumerator.get_current();
  7. }
  8. deleteAttachment.deleteObject();
• Call clientContext.executeQueryAsync once again to execute the batch.
  
  Full Code
  
  1. <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  2. <script language="javascript" type="text/javascript">
  3. $(document).ready(function()
  4. {
  5. SP.SOD.executeFunc('sp.js', 'SP.ClientContext', deleteFileAttachment);
  6. });
  7. var attachmentFiles, clientContext;
  9. function deleteFileAttachment()
  10. {
  12. //Get the clientcontext and web object
  13. clientContext = new SP.ClientContext();
  14. var oWeb = clientContext.get_web();
  16. //Get attachment folder for the list item
  17. var attachmentFolder = oWeb.getFolderByServerRelativeUrl('Lists/Custom/Attachments/1');
  18. attachmentFiles = attachmentFolder.get_files();
  20. //Load clientcontext and execute the batch
  21. clientContext.load(attachmentFiles);
  22. clientContext.executeQueryAsync(QuerySuccess, QueryFailure);
  23. }
  25. function QuerySuccess()
  26. {
  27. var deleteAttachment;
  28. //Loop through the attachments and delete the attachments
  29. var attachmentEnumerator = attachmentFiles.getEnumerator();
  30. while (attachmentEnumerator.moveNext())
  31. {
  32. var fileName = attachmentEnumerator.get_current().get_name();
  33. if (fileName == "Fields.docx")
  34. {
  35. deleteAttachment = attachmentEnumerator.get_current();
  36. }
  37. }
  38. deleteAttachment.deleteObject();
  39. //Execute the batch
  40. clientContext.executeQueryAsync(SecondQuerySuccess, SecondQueryFailure);
  41. }
  43. function QueryFailure(sender, args)
  44. {
  45. console.log('Request failed - ' + args.get_message());
  46. }
  48. function SecondQuerySuccess()
  49. {
  50. console.log("Attachment Deleted.");
  51. }
  53. function SecondQueryFailure(sender, args)
  54. {
  55. console.log('Request failed - ' + args.get_message());
  56. }
  57. </script>

We can test this in SharePoint by adding it to the Content Editor Web part as shown below:

• Save the code given above to a text file and save it into one of the SharePoint libraries, say : Site Assets
  
• Go to the edit settings of the SharePoint page and click the Web part from the Insert tab.
  
  
  
  
• Add Content Editor Web part, shown below:
  
  
  
  
• Click Edit Web art from Content Edit Web part. Assign the URL of the script text file and click apply.
  
  
  

Now, click apply. This will delete the attachment files. We can use the script to fetch and retrieve the attachment files in a similar way to get the list of the attachment files in the console.

Thus, we have seen how to retrieve the attachment files of a SharePoint list item as well as to delete the specific attachment files, using JavaScript Object Model. This has been tested with SharePoint 2016 and Office 365.