Solved

Resize an Image Before Upload to SharePoint List using REST API

Posted on 2016-08-11
1
82 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 500 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

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Show confirmation alert in Jquery 14 43
Apply tab index in forms 6 33
Randomize in Owl Carousel v1.3.2 6 20
Sorting a string 1 13
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

920 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now