Resize images on upload

[Jeff]

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?

  Nick

[Dimo]

Hi Nick,

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

Regards,
Dimo
the Telerik team

[Dennis]

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. 

[Atlas]

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:

[ValidateAntiForgeryToken]
[AcceptVerbs(HttpVerbs.Post)]
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;
    ServiceFactory.GetService<IAtlasWebService>().ContactPersonalPhotoUpdate(model.ContactPersonalPhoto);
    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)
            ServiceFactory.GetService<IFileRepositoryService>().DeleteFile(oldFileRepositoryId.GetValueOrDefault());

        fileRepositoryId = ServiceFactory.GetService<IFileRepositoryService>().StoreFile(ResizeImage(file.InputStream, height, width));

        scope.Complete();
    }

    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);
    }
    else
    {
        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;
    }
}

[Dimiter Madjarov]

Hello,

Thanks for sharing the approach with the community!

Regards,
Dimiter Madjarov
Telerik