This is a migrated thread and some comments may be shown as answers.

Compress or resize Image before upload

11 Answers 591 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
Pawan
Top achievements
Rank 1
Pawan asked on 05 Sep 2013, 09:30 AM
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.

11 Answers, 1 is accepted

Sort by
0
Genady Sergeev
Telerik team
answered on 09 Sep 2013, 08:33 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
İlter
Top achievements
Rank 1
answered on 16 Apr 2014, 07:28 PM
Hi Genady,

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

Regards...
0
Hristo Valyavicharski
Telerik team
answered on 21 Apr 2014, 01:43 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
İlter
Top achievements
Rank 1
answered on 21 Apr 2014, 04:01 PM
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

0
Hristo Valyavicharski
Telerik team
answered on 24 Apr 2014, 12:20 PM
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
}

I hope this helps.

Regards,
Hristo Valyavicharski
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Russ
Top achievements
Rank 1
answered on 20 Aug 2014, 07:15 PM
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
0
Hristo Valyavicharski
Telerik team
answered on 26 Aug 2014, 08:37 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
David Apelt
Top achievements
Rank 1
answered on 11 May 2015, 05:44 AM
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.
0
Hristo Valyavicharski
Telerik team
answered on 13 May 2015, 02:45 PM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Victor
Top achievements
Rank 1
answered on 14 Apr 2017, 02:00 PM
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. 
0
Vessy
Telerik team
answered on 19 Apr 2017, 10:50 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
AsyncUpload
Asked by
Pawan
Top achievements
Rank 1
Answers by
Genady Sergeev
Telerik team
İlter
Top achievements
Rank 1
Hristo Valyavicharski
Telerik team
Russ
Top achievements
Rank 1
David Apelt
Top achievements
Rank 1
Victor
Top achievements
Rank 1
Vessy
Telerik team
Share this question
or