Resize images on upload

5 posts, 0 answers
  1. Jeff
    Jeff avatar
    31 posts
    Member since:
    Oct 2011

    Posted 19 Apr 2013 Link to this post

    Looking to resize images before they get sent to the server.  I know there are flash/silverlight, etc ways to do this.  Just looking for options with the KendoUI uploader.  We basically just want to enforce a max width/height.  Any suggestions?

  2. Dimo
    Dimo avatar
    8485 posts

    Posted 22 Apr 2013 Link to this post

    Hi Nick,

    I am afraid the Kendo UI Upload does not provide such capabilities.

    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Dennis
    Dennis avatar
    24 posts
    Member since:
    Oct 2012

    Posted 07 Aug 2013 Link to this post

    I belive you can implement this by yourself the select event has a raw file argument. I managed to use that in a combo with the Javascript file API to get a preview of the image before it's sent to the server. I don't know the file API very well but I belive you could use it to achive what you wanted. 
  4. Atlas
    Atlas avatar
    97 posts
    Member since:
    Jun 2009

    Posted 31 Oct 2014 Link to this post

    I am not sure if you are storing the file physically or in the database, but we are storing the file in the database by passing a stream, and this is how we did it:
    Action to process incoming file:

    public ActionResult Index(ContactPersonalPhotoModel model, HttpPostedFileBase personalPhoto)
        if (personalPhoto != null)
            var result = SaveFile(model, personalPhoto);
            if (result == VirusChecker.VirusCheckStatus.Infected)
                ViewBag.Error = "Upload was canceled due to virus detection on uploaded file";
                return View(model);
        return View(model);

    which calls file save method:
    private static VirusChecker.VirusCheckStatus SaveFile(ContactPersonalPhotoModel model, HttpPostedFileBase personalPhoto)
        var fileIsVirusFree = CheckFileForVirus(personalPhoto);
        //If a virus was detected, cancel the upload.
        if (fileIsVirusFree == VirusChecker.VirusCheckStatus.Infected)
            return VirusChecker.VirusCheckStatus.Infected;
        string fileName = CleanFileName(Path.GetFileNameWithoutExtension(personalPhoto.FileName));
        model.ContactPersonalPhoto.PersonalPhotoFileRepositoryId = UploadAndResizeHttpPostedFileBaseImage(model.ContactPersonalPhoto.PersonalPhotoFileRepositoryId, personalPhoto, 400, 400);
        model.ContactPersonalPhoto.PersonalPhotoFileName = fileName;
        return VirusChecker.VirusCheckStatus.VirusFree;

    File save method calls Upload and Resize method of base controller:
    protected static Guid UploadAndResizeHttpPostedFileBaseImage(Guid? oldFileRepositoryId, HttpPostedFileBase file, int height, int width)
        Guid fileRepositoryId;
        using (TransactionScope scope = TransactionLogic.GetTransactionScope())
            if (oldFileRepositoryId != null)
            fileRepositoryId = ServiceFactory.GetService<IFileRepositoryService>().StoreFile(ResizeImage(file.InputStream, height, width));
        return fileRepositoryId;

    And here is the resize method:
    private static Stream ResizeImage(Stream stream, int height, int width)
        Image originalImage = Image.FromStream(stream);
        double ratio = Math.Min(originalImage.Width, originalImage.Height) /
                       (double)Math.Max(originalImage.Width, originalImage.Height);
        if (originalImage.Width > originalImage.Height)
            height = Convert.ToInt32(height * ratio);
            width = Convert.ToInt32(width * ratio);
        var scaledImage = new Bitmap(width, height);
        using (Graphics g = Graphics.FromImage(scaledImage))
            g.InterpolationMode = InterpolationMode.HighQualityBicubic;
            g.DrawImage(originalImage, 0, 0, width, height);
            var ms = new MemoryStream();
            scaledImage.Save(ms, ImageFormat.Png);
            ms.Position = 0;
            return ms;

  5. Dimiter Madjarov
    Dimiter Madjarov avatar
    2312 posts

    Posted 03 Nov 2014 Link to this post


    Thanks for sharing the approach with the community!

    Dimiter Madjarov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top