Sign up ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I need to upload image file to SharePoint 2010 picture library using javascript.

The requirement is:

  1. We have File Upload control

  2. Ee have to upload image file from that file upload control

My code is attached below, but does not work.

If anybody has a better solution that would be nice.


function updateListItem() 
var clientContext = new SP.ClientContext.get_current();
var oList = clientContext.get_web().get_lists().getByTitle('Test');
var itemCreateInfo = new SP.ListItemCreationInformation();
this.oListItem = oList.addItem(itemCreateInfo);
oListItem.set_item('Title', My Image);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));


function onQuerySucceeded() 

alert('Item updated!');


function onQueryFailed(sender, args) 

alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());



<input id="FileUpload" type="File" /><br />
<br />
<input onclick="updateListItem()" id="UploadImage" type="submit" value="Upload" />
share|improve this question

1 Answer 1

Uploading files in general is not easy in JavaScript as far as I know.

You could use the FileReader API with a polyfill, Jahdrien/FileReader.

Or you could attach an ajax uploader such as valums/ajax-upload to the existing picture gallery upload form (/_layouts/Upload.aspx?IsDlg=1&List=<your list guid>).

share|improve this answer
I am able to add an item to the custom list but not able to upload a file into it.I have written following code for reading a file in java script but got "Undefined object" exception for 'File' -- var oList = clientContext.get_web().get_lists().getByTitle('Test'); var fStream = File.OpenRead(uploadimagepath); var newPic = oList.RootFolder.Files.Add(phototitle, fStream); – Lalit Kumar Mishra Sep 27 '12 at 7:05
You get that because you don't have the native function File on window (global object), you can see which browsers support this on caniuse. This is why I mentioned polyfills. – eirikb Sep 27 '12 at 7:08
I can not use build in API... – Lalit Kumar Mishra Sep 27 '12 at 7:11
If you have any other approach using java script then it might be helpful. – Lalit Kumar Mishra Sep 27 '12 at 7:13

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.