Compress or resize Image before upload

10 posts, 0 answers
  1. Pawan
    Pawan avatar
    2 posts
    Member since:
    Sep 2013

    Posted 05 Sep 2013 Link to this post

    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.

  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 09 Sep 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. İlter
    İlter avatar
    19 posts
    Member since:
    Feb 2013

    Posted 16 Apr 2014 in reply to Genady Sergeev Link to this post

    Hi Genady,

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

    Regards...
  5. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 21 Apr 2014 Link to this post

    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.

     
  6. İlter
    İlter avatar
    19 posts
    Member since:
    Feb 2013

    Posted 21 Apr 2014 in reply to Hristo Valyavicharski Link to this post

    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

  7. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 24 Apr 2014 Link to this post

    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.

     
  8. Russ
    Russ avatar
    49 posts
    Member since:
    Sep 2006

    Posted 20 Aug 2014 in reply to Hristo Valyavicharski Link to this post

    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
  9. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 26 Aug 2014 Link to this post

    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.

     
  10. David Apelt
    David Apelt avatar
    27 posts
    Member since:
    May 2007

    Posted 11 May 2015 Link to this post

    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.
  11. Hristo Valyavicharski
    Admin
    Hristo Valyavicharski avatar
    975 posts

    Posted 13 May 2015 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017