Add Attachments to a newForm using custom Javascript

  • 23 March 2017
  • 4 replies
  • 9 views

Badge +1

I have a use case where the user can add a new item to a list or edit an existing item.  When they do an edit, the form loads the data of the master item.  I successfully accomplished this by using two lists - one for the master data, and one as a holding list.  If the user is doing an edit, it does a lookup from the master list to load the data onto the new form.   I have successfully accomplished this with some custom buttons, custom JavaScript and a CAML query to get the specific item's data from the master list - and then a workflow that deletes the item from the master list (if edit mode), adds a new item to the master list, and then deletes the item from the holding list.

Everything is working except attachments.  I have managed to find the attachments of my master item, but how can I add them to my newForm?  I found no method to put a javascript variable on the attachments control. 

Below is a snippet of my code:  (if something obvious is missing it is because I am trying to clean it up before including.  The code does work as is, just without adding attachments to the newForm.)

var items;

function updateExisting()
{
 var ZipAtt = NWF$('#'+ jsZipDropList + ' option:selected');
 var ZipText = ZipAtt.text();
 
 var context = SP.ClientContext.get_current();
 var olist = context.get_web().get_lists().getByTitle('Permitting');
 var camlQuery = new SP.CamlQuery();
 camlQuery.set_viewXml('<view><Query><Where><Eq><FieldRef Name=""Title""/><Value  Type=""Text"">'+ZipText+'</Value></Eq></Where></Query></view>' );
 
 items = olist.getItems(camlQuery);
 context.load(items);  //requests every property
 context.executeQueryAsync(onSucceededCallback, onFailedCallback);
}

function onSucceededCallback(sender, args)
{
 var enumerator = items.getEnumerator();
 
 while (enumerator.moveNext())
 {
  var listItem = enumerator.get_current();
  NWF$('#' + jsZip).val(listItem.get_item('Title'));
  NWF$('#' + jsJurisdiction).val(listItem.get_item('Jurisdiction'));
  NWF$('#' + jsAddress).val(listItem.get_item('Jurisdiction_x0020_Address'));
  NWF$('#' + jsWebsite).val(listItem.get_item('Jurisdiction_x0020_Website'));
  NWF$('#' + jsName).val(listItem.get_item('Contact_x0020_Name'));
  NWF$('#' + jsPhone).val(listItem.get_item('Contact_x0020_Phone'));
  NWF$('#' + jsComments).val(listItem.get_item('Comments'));
  NWF$('#' + jsEmail).val(listItem.get_item('Contact_x0020_email'));


 var itemID = listItem.get_item('ID');
 var context = SP.ClientContext.get_current();
 var attachmentFolder = context.get_web().getFolderByServerRelativeUrl('Lists/Permitting/Attachments/'+itemID);
 attachmentFiles = attachmentFolder.get_files();
 context.load(attachmentFiles);
 if (attachmentFiles.get_count() > 0 ) {
  context.executeQueryAsync(onSuccessAttachments, onFailAttachments);
  }
 }
}

function onSuccessAttachments(sender, args)
{
    var i=0; for(var file in attachmentFiles) {                             
        alert(attachmentFiles.itemAt(i).get_serverRelativeUrl());
        i++;
    }
}

function onFailedCallback(sender, args)
{
 alert("Lookup failed.  Please call support.");
}
 
function onFailAttachments(sender, args)
{
 alert("Attachment Lookup failed.  Please call support.");
}
 


4 replies

Badge +8

Try using REST API to call web service Lists.asmx with method AddAttachmentCollection to add attachment to the list item.

Badge +1

using the AddAttachmentCollection is a workflow solution, correct?  I need to add the attachments to my open form - before I launch my workflow.

Badge +10

It would be better if you can explain a bit more the requirement, may be we can go for a different method. Didn't get the idea of using two lists.

Badge +8

No not in the workflow solution. One can make an ajax call in scripts too as detailed in below link:

Findings: Upload/attach files to SharePoint 2013 list items using REST based approach 

client object model - Upload list item attachment using JSOM - SharePoint Stack Exchange  

I hope this helps.

Reply