Change log

I got this request from Rudolf:

Hi Alexander,

Do you have any idea to solve the following problem I have?

We would like to upload formatted text or binary data from a file as an attachment to with an on the fly create form to enter the comment.
I read your blog to spjs-upload-for-sharepoint-custom-upload-page- ….

We would like to send this the comment and the attachments via a WebService to a SharePoint list to create a list item with attachments loaded.

Best Regards

The solution

I have created this solution that lets you add a list item with one or more attachments from a custom form that you can place anywhere in your SharePoint site.

You may also be interested in this solution SPJS Upload for SharePoint: Custom upload page for uploading documents to various document libraries in a site collection.

How to add this solution to a page

1. Download jQuery from here. Please note that you should use v1.x as v2.x does NOT support IE versions below 9.
2. Download spjs_utility.js from here
3. Download the files spjs_addItemWithAtt.css, spjs_addItemWithAtt.js and spjs_addItemWithAtt_CEWP.txt from here.
4. Upload all the files but spjs_addItemWithAtt_CEWP.txt to a document library in the site collection, or a folder created using SharePoint Designer on the root of the site collection.
5. Edit the file spjs_addItemWithAtt_CEWP.txt
   A. Update the path to the files you have uploaded
   
   B. Edit the argument object (starting at spjs.addItemWithAttachment.init({) to create the framework of your form using the guide described below.
   C. Save and Upload the file to the same location as the other files.
   D. Create a CEWP and refer the URL for the .txt file you just edited using the “Content link” option in the CEWP. DO NOT ADD THE CODE DIRECTLY IN THE CEWP AS HTML. You can also use the code directly in a HTML form Web Part in the page where you want the form to appear.

The arguments for the function

You call the function from the CEWP or the HTML Form Web Part using code like this:

spjs.addItemWithAttachment.init({
	"instanceID":"1",
	"listName":"{1a2bb561-c557-4a28-938f-0fb600b136d7}",
	"listBaseUrl":"",
	"header":"Add a comment",
	"text":{
		"saveBtn":"Save",
		"successMsg":"Saved successfully",
		"browserNotSupported":"Your browser is not supported."
	},
	"fields":
		[
			{
				"fin":"Title",
				"label":"Title",
				"type":"text",
				"required":true
			},
			{
				"fin":"Comment",
				"label":"Comment",
				"type":"note",
				"height":"100px",
				"required":true
			},
			{
				"fin":"Priority",
				"label":"Priority",
				"type":"choice",
				"required":true,
				"emptyLabel":"Set priority",
				"choices":[
					{"v":"0","f":"Priority = low"},
					{"v":"1","f":"Priority = med"},
					{"v":"2","f":"Priority = high"}
				]
			}
		],
	"attachements":true,
	"attLabel":"Attachments",
	"multiple":true
});

instanceID

An uniquer id for this instance. If you add more than one form the same page you must change this so that each instance is unique. In the CEWP code you find this div:

<div id="spjs_addItemWithAttachment_instanceID_1"></div>

This corresponds with the instanceID to form an unique placeholder where the custom form will be inserted.

listName

The list GUID or display name of the list to add the list item to.

listBaseUrl

The baseUrl of the site where the list is located. Use “” for the root site, or “/Sites/MySite” for a site named “MySite” on a managed path. This is NOT the URL of the list.

header

This is the text that goes above the form.

text

Various text used in the solution.

fields

Array of objects in this format:

{
"fin":"Title",
"label":"Title",
"type":"text",
"required":true
}

“fin”: The FieldIntenalName of the field in the list you are adding the items to.
“label”: The form label in the custom form you are creating.
“type”: Type of field. Supported types are “text”, “note” and “choice”.
“required”: true or false to control whether the field must be filled or not.

“height”: Sets the height of the textarea in pixels.

“emptyLabel”: Sets the default value in the dropdown select.
“choices”: Object format like this:

"choices":[
{"v":"0","f":"Priority = low"},
{"v":"1","f":"Priority = med"},
{"v":"2","f":"Priority = high"}
]

“v” is the value to store in the list and “f” is the displayed value in the dropdown select. These two can be the same.

attachements

true or false to allow or disallow attachments.

attLabel

The form label for the attachments.

multiple

true or false to allow for selecting multiple files.

Multiple forms in the same page

To have multiple forms in the same page, repeat the call to “spjs.addItemWithAttachment.init” and change the “instanceID”.

Let me know if you find any bugs, or you have any comments.

Alexander