?
Solved

Resize an Image Before Upload to SharePoint List using REST API

Posted on 2016-08-11
1
Medium Priority
?
174 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

Question has a verified solution.

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

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 …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
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)
Suggested Courses

777 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