How to upload new images to picture library using Javascript

  • I create a picture library, TestPic, in a SharePoint site and  try upload a new Images using list.asmx and JQuery.


    My coding is below:

    function AddListItem() {
    if(!check()) return;

            function CreateNewItem(title) {
                // The CAML to create a new item and set the Title field.
                var batch =
                    "<Batch OnError=\"Continue\"> \
                        <Method ID=\"1\" Cmd=\"New\"> \
                            <Field Name=\"Title\">" + title + "</Field> \
                            <Field Name=\"Name\">" + title + "</Field> \

                        </Method> \


                // The SOAP Envelope
                var soapEnv =
                    "<?xml version=\"1.0\" encoding=\"utf-8\"?> \
                    <soap:Envelope xmlns:xsi=\"\" \
                        xmlns:xsd=\"\" \
                        xmlns:soap=\"\"> \
                      <soap:Body> \
                        <UpdateListItems xmlns=\"\"> \
                          <listName>TestPic</listName> \
                          <updates> \
                            " + batch + "</updates> \
                        </UpdateListItems> \
                      </soap:Body> \

                // Build the URL of the Lists.asmx web service.
                // This is done by stripping the last two parts (/doclib/page) of the URL.
                var hrefParts = window.location.href.split('/');
                var wsURL = "";
                for (i = 0; i < (hrefParts.length - 2); i++) {
                    if (i > 0)
                        wsURL += "/";
                    wsURL += hrefParts[i];
                wsURL += "/_vti_bin/lists.asmx";

                // Make the call by posting the SOAP Envelope.
                    url: wsURL,
                    beforeSend: function(xhr) {
                    type: "POST",
                    dataType: "xml",
                    data: soapEnv,
                    complete: processResult,
                    contentType: "text/xml; charset=utf-8"



            Please specify a file, or a set of files:<br/>
            <input type="file" id="datafile" name="datafile" size="40"/>


    but I can not upload the file to picture library.  How to change the code?

  • Hello Dennis,

    Did any error message occur when uploading the file the picture library?

  • No more

  • Hi Dennis,

    I am not sure if this is even possible. There might be ways to solve this in .NET (even there I am not sure), but with JavaScript it is as far as I can see not possible.

    As for your code, what happens is that you get the value of the input field (CreateNewItem($("#datafile").val());) and not the file itself, so it won't work. All that your code does is try to add a new item to the Pictures Library with the Title and Name fields populated with the value of the input field, but without the file.

  • Hi Dennis,


    From looking at the code, Rene is correct. 




    Tim Muth

    Microsoft Office 365 SharePoint Support

  • Hi Dennis,


    Were you able to correct your code so that you can  upload images to a slide library using Javascript?


    Please let us know.




    Tim Muth

    Microsoft Office 365 SharePoint Support