?
Solved

Resize an Image Before Upload to SharePoint List using REST API

Posted on 2016-08-11
1
Medium Priority
?
246 Views
Last Modified: 2016-09-10
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

Open in new window


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 if the SharePoint backend can accept data URL.

What's the best way to do resize the image before posting to the SharePoint list?
0
Comment
Question by:Michael Vasilevsky
1 Comment
 
LVL 63

Accepted Solution

by:
Zvonko earned 2000 total points
ID: 41788059
I can confirm that it is possible to resize Images trough HTML5 Canvas before sending them to SharePoint REST API: I do exactly that.
In my scenario I capture the browser Image Paste events and transform the images in Canvas with an overlay before sending them as reduced screenshot Icons to SharePoint REST API.

So the answer is: Yes, it works.

Small side note: for IE11 you have to trick SharePoint not to go into Compatibility mode if your scripting page is SharePoint page and you need HTML5 features.
1

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

These days socially coordinated efforts have turned into a critical requirement for enterprises.
Read this article to learn how to migrate data from SharePoint to SharePoint Online account. The entire process of SharePoint migration is described in detail.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Watch the video of Kernel Migrator for SharePoint, which demonstrate the process easily of migration from SharePoint to SharePoint, OneDrive for Business & Google Drive servers, Public Folder to SharePoint, File Server to SharePoint. The tool has va…

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question