Can't Upload Image via REST - File Type is Correct but File is Corrupt

Hi all,

I have been beating my head against the wall for weeks on this one. See my two posts here, but using REST I am able to upload an image file, but once it hits SharePoint, its corrupted. I don't know what I am missing/and have tried the very basic of examples. Please assist.

Here are the posts with details on the code:

http://stackoverflow.com/questions/30824211/upload-properly-encoded-base64-image-to-sharepoint-with-angularjs

http://sharepoint.stackexchange.com/questions/146301/image-file-corrupted-upon-upload-via-rest

Thanks,

K.

June 18th, 2015 12:27am

Hi Kelly,

To upload an Image file using REST API, here is a working demo for your reference:

<script type="text/javascript" src="../SiteAssets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

//Function attached to the html fileupload tag (<input type="file">)
function uploadFile(){
    if (document.getElementById("file").files.length === 0) {
        alert('No file was selected');
        return;
    }
    var parts = document.getElementById("file").value.split("\\");
    var filename = parts[parts.length - 1];
    var file = document.getElementById("file").files[0];
    uploadFileSync("https://yourtenant.sharepoint.com/sites/patrick", "Documents", filename, file);
}

//Upload file synchronously
function uploadFileSync(spWebUrl , library, filename, file) 
{
    var reader = new FileReader();
    reader.onloadend = function(evt) 
    {
      if (evt.target.readyState == FileReader.DONE) 
      {
         var buffer = evt.target.result;
         var completeUrl = spWebUrl
           + "/_api/web/lists/getByTitle('"+ library +"')"
           + "/RootFolder/Files/add(url='"+ filename +"',overwrite='true')?"
           + "@TargetLibrary='"+library+"'&@TargetFileName='"+ filename +"'";

          $.ajax({
                url: completeUrl,
                type: "POST",
                data: buffer,
                async: false,
                processData: false,
                headers: {
                    "accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val(),
                    "content-length": buffer.byteLength
                },
                complete: function (data) {
                    //uploaded pic url
                    console.log(data.responseJSON.d.ServerRelativeUrl);
                },
                error: function (err) {
                     alert('failed');
                }
            });
        
      }
    };
    reader.readAsArrayBuffer(file);
}


</script>
<input type="file" id='file' onchange="uploadFile()"/>


Thanks 

Patrick Liang

Free Windows Admin Tool Kit Click here and download it now
June 18th, 2015 2:49am

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics