Reduce file size client side before uploading to server

Question

I created a web app for some of our staff who use this to fill out some details, select an image (either from the library on their device or direct from the camera) and then send it to the server. On occasion the staff report that they get a httpException Maximum length exceeded.
While I know of ways around this such as increasing the allowed size in the web.config I figured I would rather the uploaded file wasn't so big in the first place as there is no requirement for it to be so.
So the scenario would be that the staff member selects the photo (existing or from the camera) and a client side function would reduce the file size (bytes) and then uploads it.

I have been looking at this option
https://www.npmjs.com/package/browser-image-compression

But wondered if there was anything built in to .NET? The web app is currently .NET 4.7.2
If there is not then how would I adapt the example code to work on a .NET web form? The site talks about script frameworks such as angular.

Answer 1

Hi @Jay Paterson ,
As far as I think,if you need to compress images,the image will be resize to smaller size or reduce the quality of the image.
1.You could use Bitmap and Graphics to resize images.Just like this:

    string extension = Path.GetExtension(FileUpload1.FileName);    
            if (extension.ToLower() == ".png" || extension.ToLower() == ".jpg")    
            {    
                Stream strm=FileUpload1.PostedFile.InputStream;    
                using (var image = System.Drawing.Image.FromStream(strm))    
                {    
                    // Print Original Size of file (Height or Width)     
                    Label1.Text = image.Size.ToString();    
                    int newWidth = 240; // New Width of Image in Pixel    
                    int newHeight = 240; // New Height of Image in Pixel    
                    var thumbImg = new Bitmap(newWidth, newHeight);    
                    var thumbGraph = Graphics.FromImage(thumbImg);    
                    thumbGraph.CompositingQuality = CompositingQuality.HighQuality;    
                    thumbGraph.SmoothingMode = SmoothingMode.HighQuality;    
                    thumbGraph.InterpolationMode = InterpolationMode.HighQualityBicubic;    
                    var imgRectangle = new Rectangle(0, 0, newWidth, newHeight);    
                    thumbGraph.DrawImage(image, imgRectangle);    
                    // Save the file    
                    string targetPath = Server.MapPath(@"~\Images\") + FileUpload1.FileName;    
                    thumbImg.Save(targetPath, image.RawFormat);    
                    // Print new Size of file (height or Width)    
                    Label2.Text = thumbImg.Size.ToString();    
                    //Show Image    
                    Image1.ImageUrl = @"~\Images\" + FileUpload1.FileName;    
                }    

2.Use a Web.config file to add compression to a website
More details,you could refer to below article:
https://livebook.manning.com/book/fast-asp-dot-net-websites/chapter-3/96

---

If the answer is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Best regards,
Yijing Sun