How to resize thumbnails generated by Uploadfy? ASP.NET c# MVC 4

Question

Hello, I would like to know how to resize the thumbnails generated by jQuery Uploadfy plugins. As shown in the print below, it generates the thumbnails according to the actual size of the images, it is a good practice to resize them only in the sample or resize the file itself?

Answer 1

The ideal would be to generate a thumbnail file beyond the original upload, in which there will be data saving. When uploading the image, you can upload a smaller file, which opens faster, and use the original file only when needed.

Use the Nuget Imageresizer plugin:

https://www.nuget.org/packages/ImageResizer/

Example of use:

Model

public class ProductPicture
{
    [Key]
    public int ProductPictureID { get; set; }
    public int ProductID { get; set; }

    [Required]
    public String FileName { get; set; }
    public String Thumbnail { get; set; }

    public virtual Product Product { get; set; }

    [NotMapped]
    public HttpPostedFileBase File { get; set; }

    public ProductPicture() { }

    public ProductPicture(int _ProductID) {
        this.ProductID = _ProductID;
    }
}

Controller

[HttpPost]
public ActionResult Create(ProductPicture productpicture)
{
    // Original Image
    if (productpicture.File != null && productpicture.File.ContentLength > 0)
    {
        // extract only the fielname
        var fileName = Path.GetFileName(productpicture.File.FileName);

        var path = Path.Combine(Server.MapPath(imagesDirectory), fileName);
        productpicture.File.SaveAs(path);
        productpicture.FileName = fileName;
        ModelState.Remove("FileName");

        // Thumbnails
        if (productpicture.File.ContentLength > 0)
        {
                //The resizing settings can specify any of 30 commands.. See http://imageresizing.net for details.
                //Destination paths can have variables like <guid> and <ext>, or 
                //even a santizied version of the original filename, like <filename:A-Za-z0-9>
            ImageResizer.ImageJob i = new ImageResizer.ImageJob(productpicture.File, 
                imagesDirectory + "/Thumbnails/<guid>.<ext>", new ImageResizer.ResizeSettings(
                                        "width=250;height=250;format=jpg;mode=pad"));
            i.CreateParentDirectory = true; //Auto-create the uploads directory.
            i.Build();
            productpicture.Thumbnail = i.FinalPath.Split('\\').Last();
        }
    }

    if (ModelState.IsValid)
    {
        context.ProductPictures.Add(productpicture);
        context.SaveChanges();
        return RedirectToAction("Index");  
    }
}