How to set image object from Javascript to Server Outsystem

How to set image object from Javascript to Server Outsystem

  
Hi guys,
On my web screen


When i use upload image set to HTML 

<canvas id=""imageCanvas""></canvas>
And Resize image by JavaScript with canvas object
<script type=""text/javascript"">
$(function(){
var imageLoader = document.getElementById('"+Upload_Image.Id+"');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        
        var img = new Image();
        var dstWidth = 120;
        var dstHeight = 120
        img.crossOrigin = ""Anonymous"";
        img.onload = function(){
        canvas.width = dstWidth;
        canvas.height = dstHeight;
        ctx.drawImage(this,0,0,this.width,         this.height,0,0,dstWidth,dstHeight);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}
});
</script>
Afer choose file



I want to know how to set Image.src to variable on Server by Upload button
For example :
Variable on server is binary data 
type 


Hi SirTom,

In Upload Screen Action you can get the binary data of the uploaded file. You just need to set you local variable on server with it. See:


Hope it helps,

Hi André 

Thank you very much for your quick response.

I understand what you're suggesting, but it's also not the answer.
I need to use an image that has been resized images. that you suggest is still the larger image.
For example, I uploading a photos that are size 4Mb when the image is resized by Javascript after that reduced to 1Mb that I need to send to the Outsystem platform's server.

If I do not use the upload file outsystem platform, but with the following command.
<input type=""file"" id=""imageLoader"" name=""imageLoader""/>

Ok, now I got it :)

You can't achieve this with upload widget, because it will always send to server the selected file. The image you are displaying has being resized but the uploaded file still is the one that you have selected.

Since you have in the img.src the risezed Bin, you can try to submit this javascript variable to server (take a look at this post).

Another way would be look for a component in the forge that resizes the Binary on serverside, perhaps Image Toolbox. The bad thing is that you'll have to upload a large file instead of a resized one...

Hope it helps