ASP.NET Image uploading with Resizing

Question

I have an aspx page which will upload images to server harddisk from client pc

But now i need to change my program in such a way that it would allow me to resize the

Answer 1

private void ResizeImage(FileUpload fileUpload)
{
    // First we check to see if the user has selected a file
    if (fileUpload.HasFile)
    {
        // Find the fileUpload control
        string filename = fileUpload.FileName;

        // Check if the directory we want the image uploaded to actually exists or not
        if (!Directory.Exists(MapPath(@"Uploaded-Files")))
        {
            // If it doesn't then we just create it before going any further
            Directory.CreateDirectory(MapPath(@"Uploaded-Files"));
        }
        // Specify the upload directory
        string directory = Server.MapPath(@"Uploaded-Files\");

        // Create a bitmap of the content of the fileUpload control in memory
        Bitmap originalBMP = new Bitmap(fileUpload.FileContent);

        // Calculate the new image dimensions
        int origWidth = originalBMP.Width;
        int origHeight = originalBMP.Height;
        int sngRatio = origWidth / origHeight;
        int newWidth = 100;
        int newHeight = newWidth / sngRatio;

        // Create a new bitmap which will hold the previous resized bitmap
        Bitmap newBMP = new Bitmap(originalBMP, newWidth, newHeight);

        // Create a graphic based on the new bitmap
        Graphics oGraphics = Graphics.FromImage(newBMP);
        // Set the properties for the new graphic file
        oGraphics.SmoothingMode = SmoothingMode.AntiAlias; 
        oGraphics.InterpolationMode = InterpolationMode.HighQualityBicubic;

        // Draw the new graphic based on the resized bitmap
        oGraphics.DrawImage(originalBMP, 0, 0, newWidth, newHeight);
        // Save the new graphic file to the server
        newBMP.Save(directory + "tn_" + filename);

        // Once finished with the bitmap objects, we deallocate them.
        originalBMP.Dispose();
        newBMP.Dispose();
        oGraphics.Dispose();

        // Write a message to inform the user all is OK
        label.Text = "File Name: <b style='color: red;'>" + filename + "</b><br>";
        label.Text += "Content Type: <b style='color: red;'>" + fileUpload.PostedFile.ContentType + "</b><br>";
        label.Text += "File Size: <b style='color: red;'>" + fileUpload.PostedFile.ContentLength.ToString() + "</b>";

        // Display the image to the user
        Image1.Visible = true;
        Image1.ImageUrl = @"Uploaded-Files/tn_" + filename;
    }
    else
    {
        label.Text = "No file uploaded!";
    }
}

Answer 2

Once the file has been saved to the server you can use code like this to resize. This code will take care of length/width ratio on the resize.

public static Bitmap CreateThumbnail(string lcFilename, int lnWidth, int lnHeight)
{

    System.Drawing.Bitmap bmpOut = null;

    try
    {
        Bitmap loBMP = new Bitmap(lcFilename);
        ImageFormat loFormat = loBMP.RawFormat;

        decimal lnRatio;
        int lnNewWidth = 0;
        int lnNewHeight = 0;

        if (loBMP.Width < lnWidth && loBMP.Height < lnHeight)
            return loBMP;

        if (loBMP.Width > loBMP.Height)
        {
            lnRatio = (decimal)lnWidth / loBMP.Width;
            lnNewWidth = lnWidth;
            decimal lnTemp = loBMP.Height * lnRatio;
            lnNewHeight = (int)lnTemp;
        }
        else
        {
            lnRatio = (decimal)lnHeight / loBMP.Height;
            lnNewHeight = lnHeight;
            decimal lnTemp = loBMP.Width * lnRatio;
            lnNewWidth = (int)lnTemp;
        }


        bmpOut = new Bitmap(lnNewWidth, lnNewHeight);
        Graphics g = Graphics.FromImage(bmpOut);
        g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
        g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
        g.CompositingQuality = System.Drawing.Drawing2D.CompositingQuality.HighQuality;
        g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
        g.FillRectangle(Brushes.White, 0, 0, lnNewWidth, lnNewHeight);
        g.DrawImage(loBMP, 0, 0, lnNewWidth, lnNewHeight);

        loBMP.Dispose();
    }
    catch
    {
        return null;
    }
    return bmpOut;
}

Answer 3

How to resize & Upload Image only for .jpg Extensions :
In upload.aspx page

    <asp:FileUpload ID="ProductImage" runat="server"/>
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Upload" />
 <asp:TextBox runat="server" ID="txtProductName" CssClass="form-control" />
                        <asp:RequiredFieldValidator runat="server" ControlToValidate="txtProductName" ErrorMessage="The Product name field is required." />

And upload.aspx.cs
For resize

/// <summary>
/// Created By Rajib Chowdhury Mob. 01766-306306; Web: http://onlineshoping.somee.com/
/// Complete This Page Coding On January 05, 2014
/// Programing C# By Visual Studio 2013 For Web
/// Dot Net Version 4.5
/// Database Virsion MSSQL Server 2005
/// </summary>
        public bool ResizeImageAndUpload(System.IO.FileStream newFile, string folderPathAndFilenameNoExtension, double maxHeight, double maxWidth)
        {
            try
            {
                // Declare variable for the conversion
                float ratio;
                // Create variable to hold the image
                System.Drawing.Image thisImage = System.Drawing.Image.FromStream(newFile);
                // Get height and width of current image
                int width = (int)thisImage.Width;
                int height = (int)thisImage.Height;
                // Ratio and conversion for new size
                if (width > maxWidth)
                {
                    ratio = (float)width / (float)maxWidth;
                    width = (int)(width / ratio);
                    height = (int)(height / ratio);
                }
                // Ratio and conversion for new size
                if (height > maxHeight)
                {
                    ratio = (float)height / (float)maxHeight;
                    height = (int)(height / ratio);
                    width = (int)(width / ratio);
                }
                // Create "blank" image for drawing new image
                Bitmap outImage = new Bitmap(width, height);
                Graphics outGraphics = Graphics.FromImage(outImage);
                SolidBrush sb = new SolidBrush(System.Drawing.Color.White);
                // Fill "blank" with new sized image
                outGraphics.FillRectangle(sb, 0, 0, outImage.Width, outImage.Height);
                outGraphics.DrawImage(thisImage, 0, 0, outImage.Width, outImage.Height);
                sb.Dispose();
                outGraphics.Dispose();
                thisImage.Dispose();
                // Save new image as jpg
                outImage.Save(Server.MapPath(folderPathAndFilenameNoExtension + ".jpg"), System.Drawing.Imaging.ImageFormat.Jpeg);
                outImage.Dispose();
                return true;
            }
            catch (Exception)
            {
                return false;
            }
        }

And Button1_Click Event

        string filePath = "~\\Image\\";//your normal image path
        if (Page.IsValid)
        {
            HttpPostedFile myFile = ProductImage.PostedFile;//Get Slected Image
            int nFileLen = myFile.ContentLength;//Get slected Image Size
            string myimag = txtProductName.Text;//Get user input image name
            Guid ImageName = Guid.NewGuid();//get unique id
            if ((myFile != null) && (nFileLen > 1048576))
            {
                LabelAddStatus.Text = "minimum size exceed"; //If file image size 1 MB above
            }
            else
            {
                try
                {
                    if (ProductImage.HasFile)
                    {
                        String fileExtension = System.IO.Path.GetExtension(ProductImage.FileName).ToLower();
                        String[] allowedExtensions = { ".jpg" };//Declare For Allowed Extension
                        for (int i = 0; i < allowedExtensions.Length; i++)
                        {
                            if (fileExtension == allowedExtensions[i])
                            {
                                // Read file into a data stream
                                byte[] myData = new Byte[nFileLen];
                                myFile.InputStream.Read(myData, 0, nFileLen);
                                myFile.InputStream.Dispose();
                                // Save the stream to disk as temporary file. make sure the path is unique!
                                System.IO.FileStream newFile
                                        = new System.IO.FileStream(Server.MapPath(filePath + "_temp.jpg"),
                                                                   System.IO.FileMode.Create);
                                newFile.Write(myData, 0, myData.Length);
                                bool success = ResizeImageAndUpload(newFile, filePath + ("thumbs"+myimag + ImageName), 100, 100);//Save image your thumb image path
                                success = ResizeImageAndUpload(newFile, filePath + (myimag + ImageName), 768, 1024);//Save image your normal image path
                                //delete the temp file.
                                newFile.Close();
                                System.IO.File.Delete(Server.MapPath(filePath + "_temp.jpg"));
                                LabelAddStatus.Text = "File uploaded.";
                            }
                            else
                            {
                                LabelAddStatus.Text = "Unable to accept file type..";
                            }
                        }
                    }
                }
                catch (Exception)
                {
                    //No Exception Message
                }
            }
        }

Thanks...

Answer 4

using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

public partial class admin_AddPhoto : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

        string reportPath = Server.MapPath("../picnic");

        if (!Directory.Exists(reportPath))
        {
            Directory.CreateDirectory(Server.MapPath("../picnic"));
        }
    }

    protected void PhotoForm_ItemInserting(object sender, FormViewInsertEventArgs e)
    {
        FormView uploadForm = sender as FormView;
        FileUpload uploadedFile = uploadForm.FindControl("uploadedFile") as FileUpload;

        if (uploadedFile != null)
        {
            string fileName = uploadedFile.PostedFile.FileName;
            string pathFile = System.IO.Path.GetFileName(fileName);

            try
            {
                uploadedFile.SaveAs(Server.MapPath("../picnic/") + pathFile);
            }
            catch (Exception exp)
            {
                //catch exception here
            }

            try
            {
                Bitmap uploadedimage = new Bitmap(uploadedFile.PostedFile.InputStream);

                e.Values["ImageWidth"] = uploadedimage.Width.ToString();
                e.Values["ImageHeight"] = uploadedimage.Height.ToString();
                // Make output File Name
                char[] splitter = { '.' };
                string[] splitFile = pathFile.Split(splitter);
                string OutputFilename = splitFile[0] + "s";

                System.Drawing.Image.GetThumbnailImageAbort myCallback = new System.Drawing.Image.GetThumbnailImageAbort(ThumbnailCallback);
                System.Drawing.Image thumbImage = uploadedimage.GetThumbnailImage(74, 54, myCallback, IntPtr.Zero);
                thumbImage.Save(Server.MapPath("../picnic/") + OutputFilename + ".jpg");
                e.Values["Thumbnail"] = "./picnic/" + OutputFilename + ".jpg";
            }
            catch (Exception ex)
            {
                //catch exception here
            }

            e.Values["Pic"] = "./picnic/" + pathFile;
            e.Values["Url"] = "./picnic/" + pathFile;
            e.Values["dateEntered"] = DateTime.Now.ToString();
        }
    }

    public bool ThumbnailCallback()
    {
        return false;
    }
}

This uses a FileUpload and a FormView to insert. Then I use the GetThumnailImage() method provided in System.Drawing.Imaging. You can enter any Width and Height values and it will shrink/stretch accordingly.

uploadedimage.GetThumbnailImage(W, H, myCallback, IntPtr.Zero);

Hope this helps.

Answer 5

The uploading of the image file is performed by ASP.NET 4.0 Client Callbacks. If you are not familiar with client callbacks then I suggest that you take a look at ASP.Net AJAX Control Toolkit AsyncFileUpload Control without page refresh or PostBack in ASP.Net Web Page or ASP.Net AJAX Update Panel. The callback is fired as soon as the file is selected by the user using the file field control.

Answer 6

You could resize before sending to the server using an ActiveX control. There is a free ASP.net image uploading component (I believe this is the same one that Facebook actually uses) available here:

http://forums.aurigma.com/yaf_postst2145_Image-Uploader-ASPNET-Control.aspx

Let me know if it works, I am thinking about implementing it in my projects here at work.

Edit: Looks like the wrapper for the object is free, however the actual component itself is going to run you about $200. I confirmed it is the same component Facebook is using though.