No one has responded to this discussion for at least a year, so this information may be out of date. If you're looking for information about this topic, please search for a more recent discussion or post a new question.

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;
                CreateNewItem($("#datafile").val());
                location.reload(true);
            }


            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> \

                    </Batch>";


                // The SOAP Envelope
                var soapEnv =
                    "<?xml version=\"1.0\" encoding=\"utf-8\"?> \
                    <soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" \
                        xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" \
                        xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"> \
                      <soap:Body> \
                        <UpdateListItems xmlns=\"http://schemas.microsoft.com/sharepoint/soap/\"> \
                          <listName>TestPic</listName> \
                          <updates> \
                            " + batch + "</updates> \
                        </UpdateListItems> \
                      </soap:Body> \
                    </soap:Envelope>";


                // 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.
                $.ajax({
                    url: wsURL,
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader("SOAPAction",
                        "http://schemas.microsoft.com/sharepoint/soap/UpdateListItems");
                    },
                    type: "POST",
                    dataType: "xml",
                    data: soapEnv,
                    complete: processResult,
                    contentType: "text/xml; charset=utf-8"
                });


            }


    <div>

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

    </div>

    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. 

     

    Thanks,

     

    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.

     

    Thanks,

     

    Tim Muth

    Microsoft Office 365 SharePoint Support