none
using file upload control to upload jpeg images using javascript in list new form RRS feed

  • Question

  • Hi,

    i have customized newform.aspx page for list and i added file upload control in that newform page.Now i wanted to save the uploaded image into sharepoint library using javascript or jquery.Please share me the code and where i need to put this javascript in customized newform page.Thanks in advance.

    Regards,

    Praveen

    Sunday, June 18, 2017 2:03 PM

All replies

  • why don't you use a picture library to do this?

    顺其自然地勇往直前!—Justin Liu

    Monday, June 19, 2017 1:42 AM
  • Hi,

    Try to upload image to library via Rest API:

    function ProcessUploadPic() { 
    if (document.getElementById("inputPic").files.length === 0) { 
    alert("Select a file!"); 
    return; 
    } 
    var parts = document.getElementById("inputPic").value.split("\\"); 
    var filename = parts[parts.length - 1]; 
    var fileInput = document.getElementById("inputPic").files[0]; 
    var picReader = new FileReader(); 
    picReader.addEventListener("load", function (event) { 
    var picFile = event.target; 
    var div = document.createElement("div"); 
    div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" + "title='" + picFile.name + "'/>"; 
    PerformUploadPic(filename, div) 
    }); 
    picReader.readAsDataURL(fileInput); 
    } 
    function PerformUploadPic(filename, fileData) { 
    var url = document.URL.split('/'); 
    url = url[0] + "//" + url[2] + "/" + url[3] + "/"; 
    $.ajax({ 
    url: url + "_api/web/getfolderbyserverrelativeurl('Image')/files/add(url='" + filename + "', overwrite=true)", 
    method: "POST", 
    binaryStringRequestBody: true, 
    body: fileData, 
    headers: { 
    "accept": "application/json; odata=verbose", 
    "X-RequestDigest": $("#__REQUESTDIGEST").val(), 
    "content-length": fileData.byteLength 
    }, 
    success: function (data) { 
    alert("Success! Your Picture was uploaded to SharePoint."); 
    }, 
    error: function onQueryErrorAQ(xhr, ajaxOptions, thrownError) { 
    alert('Error:\n' + xhr.status + '\n' + thrownError + '\n' + xhr.responseText); 
    }, 
    state: "Update" 
    }); 
    }
    

    More information:

    Upload image to picture library using REST

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, June 19, 2017 9:38 AM