Add Attachment to List using Jquery and Html5

In this week, I have spent lot of time with finding ways to upload attachment with list item in SharePoint 2010. Everyone knows we can achieve this very easily using Server side code. However as my blog title suggests my requirement was to accomplish this task without any server side code.

So here are steps to do this using html5 and Jquery SPService library:

1.      Create a list “Test” in your SP2010 Team site.

2.      Create a Column’s like Title, Description (Single line of text) etc.

3.       Add a tag for Html 5 in your site master page. (v4.master).

 



4.      Add Meta tag in same master page .This tag tells IE browsers to display your webpage in IE 10 mode.

5.      Create a (.aspx) page using SPD in Site Pages library.

6.      Create a html for your custom form and file upload control page will look like as below :

 

Source Code for html:

 

 

 

 Input type “File” is html5 control, it has attribute for setting multiple files selection.Also I have used output control for displaying list of files.

7.      Add a reference to Jquery library and SPServices Jquery library JavaScript files.

8.      Below is source code for event capture for displaying uploaded files  in my web page 

 

 

 

 

 

 

This code adds event receiver for file upload control and displays selected file names in output list.

 

 

9.      On Submit button click I am using Client object model (COM) for saving item in List.

After that I have used FileReader for reading uploaded files .Using SPService method I am pushing files as attachment to list item just created.

 

 

FileReader is basically asynchronous object, therefore we can use on load event .Also I have used readAsDataURL method, which is best API to read file which gives URL at the end of reading file.

 

That’s it your list item with multiple or single attachments will be saved successfully.