For a project I've just finished I needed to be able to upload and resize (within certain parameters) an image. The code I was working with was a patch of Classic ASP to make it work in an ASP.NET environment and remove the reliance on some third party components that where not supported inthe new environment.

As usual I googled to find some samples (why reinvent the wheel) but most of them didn't quite fit my requirements (either problems with maintaining aspect ratio, not placing upper limits on the width or height of the thumbnail or - the most persistant problem - ending up giving me thumbnails that where bigger than the original image)

So I ended up having to roll my own (it's good for the soul anyway) ... hopefully to save anyone else the pain I've added some comments and made it available for you do use how you like.... just click here for the ASP.NET File Upload and Resize Sample (live demo and source download).

...or you can just grab the code from here.

  1: <%@ Page Trace="False" Language="vb" aspcompat="false" debug="true" validateRequest="false"%>
  2: <%@ Import Namespace=System.Drawing %>
  3: <%@ Import Namespace=System.Drawing.Imaging %>
  4: <%@ Import Namespace=System %>
  5: <%@ Import Namespace=System.Web %>
  6: <SCRIPT LANGUAGE="VBScript" runat="server">
  7: const Lx = 200 ' max width for thumbnails
  8: const Ly = 240 ' max height for thumbnails
  9: const upload_dir = "/upload_resize_test/" ' directory to upload file
 10: const upload_original = "sample" ' filename to save original as (suffix added by script)
 11: const upload_thumb = "thumb" ' filename to save thumbnail as (suffix added by script)
 12: const upload_max_size = 25 ' max size of the upload (KB) note: this doesn't override any server upload limits
 13: dim fileExt ' used to store the file extension (saves finding it mulitple times)
 14: dim newWidth, newHeight as integer ' new width/height for the thumbnail
 15: dim l2 ' temp variable used when calculating new size
 16: dim fileFld as HTTPPostedFile ' used to grab the file upload from the form
 17: Dim originalimg As System.Drawing.Image ' used to hold the original image
 18: dim msg ' display results
 19: dim upload_ok as boolean ' did the upload work ?
 20: </script>
 21: <%
 22: randomize() ' used to help the cache-busting on the preview images
 23: upload_ok = false
 24: if lcase(Request.ServerVariables("REQUEST_METHOD"))="post" then
 25:  fileFld = request.files(0) ' get the first file uploaded from the form (note:- you can use this to itterate through more than one image)
 26:  if fileFld.ContentLength > upload_max_size * 1024 then
 27:   msg = "Sorry, the image must be less than " & upload_max_size & "Kb"
 28:  else
 29:   try
 30:    originalImg = System.Drawing.Image.FromStream(fileFld.InputStream)
 31:    ' work out the width/height for the thumbnail. Preserve aspect ratio and honour max width/height
 32:    ' Note: if the original is smaller than the thumbnail size it will be scaled up
 33:    If (originalImg.Width/Lx) > (originalImg.Width/Ly) Then
 34:     L2 = originalImg.Width
 35:     newWidth = Lx
 36:     newHeight = originalImg.Height * (Lx / L2)
 37:     if newHeight > Ly then
 38:      newWidth = newWidth * (Ly / newHeight)
 39:      newHeight = Ly
 40:     end if
 41:    Else
 42:     L2 = originalImg.Height
 43:     newHeight = Ly
 44:     newWidth = originalImg.Width * (Ly / L2)
 45:     if newWidth > Lx then
 46:      newHeight = newHeight * (Lx / newWidth)
 47:      newWidth = Lx
 48:     end if
 49:    End If
 50: 
 51:             Dim thumb As New Bitmap(newWidth, newHeight)
 52: 
 53:             'Create a graphics object
 54:             Dim gr_dest As Graphics = Graphics.FromImage(thumb)
 55: 
 56:    ' just in case it's a transparent GIF force the bg to white
 57:    dim sb = new SolidBrush(System.Drawing.Color.White)
 58:    gr_dest.FillRectangle(sb, 0, 0, thumb.Width, thumb.Height)
 59: 
 60:             'Re-draw the image to the specified height and width
 61:    gr_dest.DrawImage(originalImg, 0, 0, thumb.Width, thumb.Height)
 62: 
 63:    try
 64:     fileExt = System.IO.Path.GetExtension(fileFld.FileName).ToLower()
 65:     originalImg.save(Server.MapPath(upload_dir & upload_original & fileExt), originalImg.rawformat)
 66:     thumb.save(Server.MapPath(upload_dir & upload_thumb & fileExt), originalImg.rawformat)
 67:     msg = "Uploaded " & fileFld.FileName & " to " & Server.MapPath(upload_dir & upload_original & fileExt)
 68:     upload_ok = true
 69:    catch
 70:     msg = "Sorry, there was a problem saving the image."
 71:    end try
 72:    ' Housekeeping for the generated thumbnail
 73:    if not thumb is nothing then
 74:     thumb.Dispose()
 75:     thumb = nothing
 76:    end if
 77:   catch
 78:    msg = "Sorry, that was not an image we could process."
 79:   end try
 80:  end if
 81: 
 82:  ' House Keeping !
 83:  if not originalImg is nothing then
 84:   originalImg.Dispose()
 85:   originalImg = nothing
 86:  end if
 87: 
 88: end if
 89: %>
 90: <html>
 91: <head>
 92: <title>ASP.NET File Upload and Resize Sample</title>
 93: <META NAME="Description" CONTENT="ASP.NET File Upload and Resize Sample (Hybrid VB.NET)">
 94: <META NAME="Keywords" CONTENT="ASP.NET, ASP, NET, VB, VBScript, Image, Upload, Resize, Thumbnail, Constrain, Filesize, File, Size, Free">
 95: <META NAME="Copyright" CONTENT="Rufan-Redi Pty Ltd 2005">
 96: <META NAME="Author" CONTENT="System developed by Jeremy at http://www.Rufan-Redi.com">
 97: </head>
 98: <body>
 99: 
100: <p><b>Hybrid ASP.NET File Upload and Resize Sample (VB.NET)</b>
101: <br>Upload and resize a GIP/JPG/PNG images, ensuring filesizes are optimum.</p>
102: 
103: <form enctype="multipart/form-data" method="post" runat="server">
104: <table>
105: <tr><td>Select the file to upload:</td><td><input type="file" name="upload_file"></td></tr>
106: <tr><td colspan=2>Max upload size <%=upload_max_size%>Kb, gif/jpg/png only</td></tr>
107: <tr><td colspan=2><input type="submit" value="Upload"></td></tr>
108: </table>
109: </form>
110: 
111: <%
112: if upload_ok then
113: %>
114: <table>
115: <tr>
116: <td valign=top><img src="<%=upload_dir & upload_original & fileExt & "?" & rnd()%>"></td>
117: <td valign=top><img src="<%=upload_dir & upload_thumb & fileExt & "?" & rnd()%>"></td>
118: </tr>
119: </table>
120: <%
121: else
122:  response.write(msg)
123: end if
124: %>
125: </body>
126: </html>