Compress or resize Image before upload

[Pawan]

Hi,

I am using radasyncupload customhttphandler in my application, i want to compress or resize images before uploading to server.

Onfileselect method is also not provide the complete path of image, so we can resize image using javascript and then upload to server.


Please provide possible options by which we can compress and reduce image before uploading to server.

[Genady Sergeev]

Hello Pawan,

At this time we don't provide client-side compression nor image resizing on the client. However, we plan to add a client-side image resizing demo in the very near future. I will update this thread when ready.

Regards,
Genady Sergeev
Telerik

[İlter]

Hi Genady,

I just read your post. It's been about 6 months now. Any news about client side image resizing before upload?

Regards...

[Hristo Valyavicharski]

Hi,

Please look at the RadImageEditor control. It allows you to resize, crop, rotate and edit images. After you finish the editing picture can be downloaded or uploaded on the server/db.

Regards,
Hristo Valyavicharski
Telerik

 

 

[İlter]

Hi,

What I meant on my previous post was that I would like to resize images automatically before the upload proccess begins, so that let's say a 18mpixels of image will be compressed (resized) to a 800x600 pixels image in order to upload the image faster and save bandwidth.

Can you confirm that this is possible with RadImageEditor? If yes, could you please send an example of how that can be done using telerik rad controls?

Thank you very much in advance!
Regards...

İlter

[Hristo Valyavicharski]

Hi İlter,

The ImageEditor requires to load image from the server. This means that it must be uploaded before you open it for editing.

If you want to resize image on the client before it is uploaded you will have to get the Blob and resize it with JavaScript. This would be possible only on the newer browsers, which support HTML5 File Api (IE10+, Chrome, Firefox).

<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
    MultipleFileSelection="Disabled"
    OnClientFileSelected="OnClientFileSelected">
</telerik:RadAsyncUpload>

function OnClientFileSelected(sender, args) {
    var file = args.get_fileInputField().files[0];
    var blob = file.mozSlice();

    //Resize the image
   //http://stackoverflow.com/questions/2303690/resizing-an-image-in-an-html5-canvas
}

I hope this helps.

Regards,
Hristo Valyavicharski
Telerik

 

 

[Russ]

Hristo,

Thanks for your help on this topic. However, I have attempted to use the code in the StackOverflow answer to implement client-side image compression and have run into the following problems:

1. The image compression must be done on the "onload" event of the image created from the uploaded file so the compression function actually has something complete to compress. Because this event happens asynchronously, the upload from the control begins prior to the onload event firing. Once the image is compressed, saving it back to the args.get_fileInputField().files array has no effect because the upload has already begun. I attempted to solve this by overriding the default _onFileSelected function from the RadAsyncUpload's prototype object but I ran into the second problem.

2. The args.get_fileInputField().files array is populated with JavaScript File objects which have had additional properties added to them. It appears the only way to create a true File object is to append a blob to a FormData object but I don't know how to get it back out. If you have a solution to this problem, please let me know.

Thanks,

Russ

[Hristo Valyavicharski]

Hi Russ,

Can you paste your code here, so we can look into it?

You should be able to read the selected image in the OnClientFileSelected event, however it is not possible to set the resized image back to the AsyncUpload. That's why you will have to use another approach. You can resize the image on the server otherwise you will have to sent it to a web service or handler in order save it into the DB.

Regards,
Hristo Valyavicharski
Telerik

 

 

[David Apelt]

ok.... so it is now May 2015.   Is this functionality ever going to be written?  We are using jQuery File Upload that does it out of the box - but we prefer to stay pure Telerik wherever possible.  Telerik are trailing the competition by several years on this one and have really dropped the ball.

[Hristo Valyavicharski]

Hi David,

At the moment we don't have client library which can compress files in the browser. It is possible to compress files on the server using ZipLibrary, but this can be done after files are uploaded.

Regards,
Hristo Valyavicharski
Telerik

[Victor]

Has anyone made any progress on this issue?   I am trying to find a way to do this every exact thing on an asynchronous POST. Out of the box the Telerik upload is great, and it got my company to invest the money on this product.  Now we are looking for it to do more for us. I am having to look at piece milling and adding on functionality that other products can do.  I really do not want to have mostly Telerik and mostly 3rd party jQuery libraries in my web project. But judging by the date stamps on this thread it looks like Telerik has no interest in providing a solution. 

[Vessy]

Hi Victor,

You can see a sample on how to resize the uploaded image by utilizing the EditableImage class functionality in the following help article:
http://www.telerik.com/forums/load-image-resize-and-save-automatically#DQ3hGoIKgEa34GknMmtlZA

Regards,
Vessy
Telerik by Progress