I am trying to create an SP2013 APP, the user should be able to upload an image to a SharePoint list. The image needs to be resized before it is being uploaded. I got the upload function to upload the original image but when i am trying to upload the resized image the image is corrupt(broken).

I have been using AngularJS directive for this task: http://angular-js.in/image-upload/

Here is an image of my object: enter image description here

The first red marked "dataURL" is the original image dataURL and when i send it with REST to my list it works just fine, but as the original size. The second red marked "dataURL" is the resized object, it works fine to put the dataURL into a tag and it shows the correct resized image but when i try to send that dataURL with REST to my list the image is broken(corrupt). I know it has to do with the dataURL not being binary code, i have tried to convert it but no luck. How can i send the resized image to my sharepoint list?

Here is my Perform Upload function:

function PerformUpload(imageResult) {
        console.log(imageResult); //The console.log result is seen in the uploaded picture above.
        var url;
        var libraryName = "ProfilePics";
        var fileName = imageResult.file.name;
        var folderName = "";
        var fileData = imageResult.resized.dataURL;

        // if there is no folder name then just upload to the root folder
        if (folderName == "") {
            url = appweburl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle(@TargetLibrary)/RootFolder/Files/add(url=@TargetFileName,overwrite='true')?" +
                "@TargetSite='" + hostweburl + "'" +
                "&@TargetLibrary='" + libraryName + "'" +
                "&@TargetFileName='" + fileName + "'";
        else {
            // if there is a folder name then upload into this folder
            url = appweburl + "/_api/SP.AppContextSite(@TargetSite)/web/lists/getByTitle(@TargetLibrary)/RootFolder/folders(@TargetFolderName)/files/add(url=@TargetFileName,overwrite='true')?" +
               "@TargetSite='" + hostweburl + "'" +
               "&@TargetLibrary='" + libraryName + "'" +
               "&@TargetFolderName='" + folderName + "'" +
               "&@TargetFileName='" + fileName + "'";

        // use the request executor to perform the upload
        var reqExecutor = new SP.RequestExecutor(appweburl);
            url: url,
            method: "POST",
            headers: {
                "Accept": "application/json; odata=verbose",
                "X-RequestDigest": digest
            contentType: "application/json;odata=verbose",
            binaryStringRequestBody: true,
            body: fileData,
            success: function (x, y, z) {
            error: function (x, y, z) {
  • You can try removing the data:image/png;base64; from the data. – Steve Curran Mar 4 '15 at 0:58
  • Same result after removing the data:image/png;base64. – Jenkaa Mar 5 '15 at 11:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.