2

I'm uploading an image to a SharePoint list using the REST API based on documentation here. My function looks like:

function uploadFile(FormDigest, FileInput, fileName) {
var serverRelativeUrlToFolder = 'Lists/Pictures';
var fileInput = jQuery(FileInput);

var serverUrl = myURL + "PunchlistTracking";

var getFile = getFileBuffer();

getFile.done(function (arrayBuffer) {

    var addFile = addFileToFolder(arrayBuffer);
    addFile.fail(onError);
});

getFile.fail(onError);

function getFileBuffer() {
    var deferred = jQuery.Deferred();
    var reader = new FileReader();
    reader.onloadend = function (e) {
        deferred.resolve(e.target.result);
    }
    reader.onerror = function (e) {
        deferred.reject(e.target.error);
    }
    reader.readAsArrayBuffer(fileInput[0].files[0]);
    return deferred.promise();
}   //  getFileBuffer

function addFileToFolder(arrayBuffer) {

    var fileCollectionEndpoint = String.format(
            "{0}/_api/web/getfolderbyserverrelativeurl('{1}')/files" +
            "/add(overwrite=true, url='{2}')",
            serverUrl, serverRelativeUrlToFolder, fileName);

    return jQuery.ajax({
        url: fileCollectionEndpoint,
        type: "POST",
        data: arrayBuffer,
        processData: false,
        headers: {
            "accept": "application/json;odata=verbose",
            "X-RequestDigest": FormDigest,
            "content-length": arrayBuffer.byteLength
        },
        success: function () {
            $('#ajaxBusy').hide();
            $("#addNewItemButton").show();
            $("#cancelButton").show();
            addNewPunchlistItem();
        }
    });
}   //  addFileToFolder

function onError(error) {
    alert(error.responseText);
}   //  onError
}   //  uploadFile

This works great except I'd like to resize the image before uploading, because users will be uploading from mobile and don't need the default resolution iPhone and Galaxy provides. I've looked at HTML5 canvas resizing (e.g. here) but am not sure the SharePoint backend can accept data URL.

What's the best way to do resize the image before posting to the SharePoint list?

0

After resizing the image you can it as ArrayBuffer instead of toDataURL.

var imageData = context.getImageData(x, y, w, h);
var buffer = imageData.data.buffer;

Reference

Serialize canvas content to ArrayBuffer and deserialize again

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.