[Last Call] Learn about multicloud storage options and how to improve your company's cloud strategy. Register Now

x
?
Solved

Resize an Image Before Upload to SharePoint List using REST API

Posted on 2016-08-11
1
Medium Priority
?
196 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
A recent project that involved parsing Tableau Desktop and Server log files to extract reusable user queries for use in other systems. I chose to use PowerShell to gather the data, and SharePoint to present it...
The viewer will learn how to dynamically set the form action using jQuery.
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…

656 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