SharePoint

Attach File to List Item Error After Customizing NewForm.aspx

Background

There was a business requirement to customize a NewForm.aspx page for a list to remove some of the fields shown to a user when they enter a new item into a list.  To fulfill this requirement, SharePoint Designer was used to open the NewForm.aspx page and hide the existing ListFormWebPart and add a new DataFormWebPart that could be customized.

Issue

After customizing the NewForm.aspx (or EditPage.aspx) page and browsing to the new page in a browser, the user receives a javascript error after clicking on Attach File

clip_image001

The error is generated from form.js in the ShowPartAttachment method where it is trying to set focus on the control with an ID of fileupload0, but that control is hidden as it is part of the ListFormWebPart.  If the ListFormWebPart is completely removed from the customized page, then the user receives a more user friendly error generated from some error trapping code in the ShowPartAttachment method.

clip_image002

The issue is that although the DataFormWebPart provides the menu item and link to attach a file, it does not render the necessary client side code to support the file upload functionality.

Steps to Reproduce:

  1. Create a list on a site and add a few custom columns
  2. Using SharePoint Designer, open the NewForm.aspx page associated with the newly created list
  3. Either hide or delete the existing ListFormWebPart, depending on the desired results (see screen shots above)
  4. Insert a new DataFormWebPart
    1. Click Insert –> SharePoint Controls –> Custom List Form
    2. Choose the list to use (same list created in step 1)
    3. Under Type of Form to Create, select New item form
    4. Check the box for Show standard toolbar, if it’s not already checked
    5. Click OK
  5. Save NewForm.aspx

Navigate to the page in a browser and click on Attach File to observe the behavior described above.

Workaround:

There are two three options to work around this issue.

  1. Within the customized form, hide the Attach File functionality.  In the above case where the NewForm is modified, we would hide the Attach File, but then add a message informing the user that in order to attach a file to the item they need to edit the item after it’s saved (assuming EditForm.aspx was not also modified as described above.)
  2. I haven’t done this completely, but you can spend some time diving into the HTML code of a non-customized NewForm.aspx page to discover the missing elements from the customized NewForm.aspx page.  Then add the necessary HTML and JavaScript code to the customized page to enable the functionality.
  3. Another option was sent in to me via email by AutoSponge.  “I start the user off with NewForm as only an upload attachment page.
     Whether they upload or not, if they click ok, it creates a new item
    and they are redirected to the custom edit page.”  See the details here.

Leave a Reply

Your email address will not be published. Required fields are marked *