Click here to Skip to main content
Click here to Skip to main content
Go to top

Add .NET thumbnailing to a classic ASP Multi-upload image gallery

, 9 May 2014
Rate this:
Please Sign up or sign in to vote.
Part II of an article describing an ASP based multi-image uploading tool. We add a .NET thumbnailer and free ourselves from the DLL registration for image manipulation.

Introduction

In my original article, I explained the methodology for creating an asynchronous upload mechanism for images, along with a full featured image gallery manager that displayed the galleries using SimpleViewer, a flexible freeware Flash image gallery. While functional, the original solution had a serious limitation for widespread use: it relied on on a DLL for image manipulation. This precludes the solution from deployment on most hosting solutions, because most hosts don't allow you to register DLLs unless you have a virtual or dedicated server.

This article explains how to remove that restriction using .NET. Most hosting providers allow you to use both .NET and classic ASP in their Windows Server packages. So this solution should be more "hosting friendly". The thumbnailer I setup can be found in thumbnail.aspx.

Changes

I'll focus on the changes I made to the original code so this part won't be nearly as lengthy as it was in the original article.

The call to .NET was very simple to alter. Let's take a glossed over look at the original flow.

In the original code, the upload module handles the file upload and the thumbnailing. To split out the thumbnailing, add two new steps to the flow. One that makes a call to the .NET thumbnailer, and one that reads the return JSON and reacts. The revised flow looks like this:

The Code

Read the first article ("Classic ASP Multi Upload image Gallery") for a description of the full functionality of the upload tools. I'll focus on the changes you need to make.

Changes to upload_files.js

In the original code, each time an image is uploaded, the IFrame makes a call to the function uploadDone2() on the parent (top) page and passes the return JSON as a parameter. I renamed the old uploadDone2() to thumbnailDone(), and created a new uploadDone2 as follows:

// File is uploaded, read JSON and use it to call the thumbnailer
function uploadDone2(ret) {
    var data = eval("("+ret+")"); // Read the return values from the iframe
    
    if (!data.failure) {
        var url="";
        // Assemble URL to make thumbnail.aspx call
        url += "thumbnail.aspx";
        url += "?gallery_id=" + gallery_id;
        url += "&size=" + data.size;
        url += "&file=" + data.file_name;
        //now set our IFrame target to the thumbnail page
        $("upload_target").src = url;
    }
    else if (data.failure) { //Upload failed - show user the reason.
  alert("Upload Failed: " + data.failure);
        $("uploaded_image0" + upload_counter).src = "nosign.gif";
        handleForm();
 }     
}

That's it! Our Thumbnail.aspx page is already coded to call thumbnailDone() when it completes. Here's what the code looks like:

<script type='text/javascript'>
function init() {
   if ( top.thumbnailDone )
       top.thumbnailDone( document.getElementsByTagName("body")[0].innerHTML );  
}

window.onload=init;

</script>

And here is the complete thumbnail.aspx page code:

<%@ Page Language="vb" Debug="false" Trace="false" %>
<%@ import Namespace="System.Data" %>
<%@ Import Namespace="Microsoft.VisualBasic" %>
<%@ Import Namespace="System.Drawing" %>
<%@ Import Namespace="System.Drawing.Drawing2D" %>
<%@ Import Namespace="System.IO" %>
<script runat="server">
    
    function HandleThumbs() as string
        Dim galleryid As String = Request.QueryString("gallery_id")
        Dim f As String = Request.QueryString("file")
        Dim path As String = Server.MapPath(".") & "\images\" & galleryid & "\"
        Dim filepath As String = path & f
        Dim thumbroot As String = path & "thumb\"
        Dim lSize As Long = 0
        Dim Q as string = chr(34)
        Dim s as string
        
        
        '' old calls
        ''Call ThumbNail(strFileName, 32, 32, 1, 80)
        ''Call ThumbNail(strFileName, 64, 64, 1, 80)
        ''Call Thumbnail(strFileName, 96, 96, 1, 80)
        ''Call ThumbNail(strFileName, 120, 120, 1, 80)
        ''Call ThumbNail(strFileName, 240, 240, 1, 80)
        ''Call ThumbNail(strFileName, 480, 480, 1, 80)
        ''Call ThumbNail(strFileName, 640, 640, 1, 80)
        ''Call ThumbNail(strFileName, 800, 800, 1, 80)
        ''Call ThumbNail(strFileName, 960, 960, 1, 80)
        If System.IO.File.Exists(filepath) Then
            '' Generate a bunch of thumbnails, edit to suit your needs

            lSize = 32
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 48
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 64
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 70
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 96
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 120
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 240
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 480
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 640
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 760
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
            lSize = 960
            SavePhoto(filepath, thumbroot & f & "." & lSize & "x" & lSize & ".jpg", lSize)
                
                
            s = ""
            s = s & "{ "
            s = s & Q & "message" & Q & ":" & Q & "Thumbnails Complete!" & Q & ", "
            s = s & Q & "failure" & Q & ": false, " 
            s = s & Q & "file_name" & Q & ":" & Q & request.querystring("file") & Q & ", "
            s = s & Q & "size" & Q & ":" & Q & request.querystring("size") & Q & ", "
            s = s & Q & "title" & Q & ":" & Q & "" & Q & ", "
            s = s & Q & "description" & Q & ":" & Q & "" & Q & ", "
            s = s & Q & "complete" & Q & ":" & Q & "yes" & Q & " "
            s = s & "}"
        Else
            s = ""
            s = s & "{ "
            s = s & Q & "message" & Q & ":" & Q & "Path does not exist!" & Q & ", "
            s = s & Q & "failure" & Q & ": true, " 
            s = s & Q & "file_name" & Q & ":" & Q & request.querystring("file") & Q & ", "
            s = s & Q & "size" & Q & ":" & Q & request.querystring("size") & Q & ", "
            s = s & Q & "title" & Q & ":" & Q & "" & Q & ", "
            s = s & Q & "description" & Q & ":" & Q & "" & Q & ", "
            s = s & Q & "complete" & Q & ":" & Q & "yes" & Q & " "
            s = s & "}"
        End If
        
        
        HandleThumbs = s
    End Function
    '' Function lifted from 
    '' CM Image Helper Class, creates high quality images
    '' Source: <a href="http://www.aboutmydot.net/index.php/high-quality-thumbnails-vbnet">http://www.aboutmydot.net/index.php/high-quality-thumbnails-vbnet
    Public Function SavePhoto(ByVal src As String, _
           ByVal dest As String, ByVal w As Integer) As Boolean
        Dim imgTmp As System.Drawing.Image
        Dim sf As Double
        Dim imgFoto As System.Drawing.Bitmap
        imgTmp = System.Drawing.Image.FromFile(src)
        If (imgTmp.Width > w) Then
            sf = imgTmp.Width / w
            imgFoto = New System.Drawing.Bitmap(w, CInt(imgTmp.Height / sf))
            Dim recDest As New System.Drawing.Rectangle(0, 0, w, imgFoto.Height)
            Dim gphCrop As System.Drawing.Graphics = _
                        System.Drawing.Graphics.FromImage(imgFoto)
            gphCrop.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality
            gphCrop.CompositingQuality = _
                    System.Drawing.Drawing2D.CompositingQuality.HighQuality
            gphCrop.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High
            gphCrop.DrawImage(imgTmp, recDest, 0, 0, imgTmp.Width, 
                    imgTmp.Height, System.Drawing.GraphicsUnit.Pixel)
        Else
            imgFoto = imgTmp
        End If
        'Dim myImageCodecInfo As System.Drawing.Imaging.ImageCodecInfo
        Dim myEncoder As System.Drawing.Imaging.Encoder
        Dim myEncoderParameter As System.Drawing.Imaging.EncoderParameter
        Dim myEncoderParameters As System.Drawing.Imaging.EncoderParameters
        Dim arrayICI() As System.Drawing.Imaging.ImageCodecInfo = 
                 System.Drawing.Imaging.ImageCodecInfo.GetImageEncoders()
        Dim jpegICI As System.Drawing.Imaging.ImageCodecInfo = Nothing
        Dim x As Integer = 0
        For x = 0 To arrayICI.Length - 1
            If (arrayICI(x).FormatDescription.Equals("JPEG")) Then
                jpegICI = arrayICI(x)
                Exit For
            End If
        Next
        myEncoder = System.Drawing.Imaging.Encoder.Quality
        myEncoderParameters = New System.Drawing.Imaging.EncoderParameters(1)
        myEncoderParameter = New System.Drawing.Imaging.EncoderParameter(myEncoder, 60L)
        myEncoderParameters.Param(0) = myEncoderParameter
        imgFoto.Save(dest, jpegICI, myEncoderParameters)
        imgFoto.Dispose()
        imgTmp.Dispose()
        Return True
    End Function
</script>
<html>
<head>
<script type='text/javascript'>
function init() {
   if ( top.thumbnailDone )
       top.thumbnailDone( document.getElementsByTagName("body")[0].innerHTML );  
   
}

window.onload=init;

</script>
</head>
<body id="body">
<%
if request.querystring("gallery_id")&""<>"" and request.querystring("file")<>"" then
    response.write( HandleThumbs() )
else 
    response.write( "{ 'message':'Gallery and File are required', 
                       'file':'', 'failure':true }" )
end if    
%>
</body>
</html>

Please take the time to vote and comment on this article. Thanks.

Version History

07/19/2010 gallery3.zip - Original File

05/09/2014 gallery3.a.zip - Fixed a bug in the gallery info editor.

License

This article, along with any associated source code and files, is licensed under The Common Development and Distribution License (CDDL)

Share

About the Author

Larry Boeldt
Software Developer (Senior)
United States United States
I've been in development since the late eighties. Although I've picked up many languages over the years and will likely pick up many more I have been a Microsoft BASIC programmer the whole time. Back in the early days it was on a Color Computer 3 writing articles for an enthusiast's magazine and developing solutions for color computer users. Now it is C#, VB.NET and (still) VBScript with all the fixins (ADO,XML,JSON,SQL etc...). Around 1996 I decided the internet was the way to go and dedicated myself to web development. I've been doing it ever since.
 
Two of my favorite projects are working for a little company called Nigrelli Systems and working with a team of brilliant Engineers to develop fully automated packaging systems for the food and beverage industry. The second is working on a "Burn Room" Nemschoff Chairs, again I was blessed with a team of people who knew their stuff. The burn room remains unique to this day because there are only a handfull of certified rooms in the US.
 
Bears, Beats, Battlestar Galactica

Comments and Discussions

 
QuestionChanging the limit from 10 to 25. Is this possible/advisable? PinmemberSayItAintSo2-May-13 12:22 
AnswerRe: Changing the limit from 10 to 25. Is this possible/advisable? PinmemberLarry Boeldt8-May-13 15:22 
AnswerRe: Changing the limit from 10 to 25. Is this possible/advisable? PinmemberLarry Boeldt20-May-13 17:09 
GeneralMy vote of 5 PinmemberHenryUH11-Mar-13 3:56 
QuestionUsing the latest .NET version PinmemberHenryUH11-Mar-13 3:51 
AnswerRe: Using the latest .NET version PinmemberLarry Boeldt11-Mar-13 14:47 
QuestionSome minor issues Pinmemberwaxed20-May-12 6:51 
AnswerRe: Some minor issues PinmemberLarry Boeldt21-May-12 18:33 
AnswerRe: Some minor issues PinmemberLarry Boeldt29-May-12 18:48 
GeneralEdit Gallery Error -- Object Expected PinmemberQuintin Keilloh11-Feb-12 22:46 
GeneralRe: Edit Gallery Error -- Object Expected PinmemberLarry Boeldt15-Feb-12 17:55 
QuestionError on line 136 - thumbnail.aspx PinmemberMember 810356522-Jul-11 20:20 
AnswerRe: Error on line 136 - thumbnail.aspx PinmemberLarry Boeldt25-Jul-11 18:46 
AnswerRe: Error on line 136 - thumbnail.aspx PinmemberLarry Boeldt25-Jul-11 18:46 
GeneralRe: Error on line 136 - thumbnail.aspx PinmemberMember 810356526-Jul-11 17:15 
GeneralRe: Error on line 136 - thumbnail.aspx PinmemberMember 810356526-Jul-11 22:25 
QuestionDeploying Issue PinmemberJBWills.7615-Jul-11 17:49 
AnswerRe: Deploying Issue PinmemberMember 810356522-Jul-11 20:09 
AnswerRe: Deploying Issue PinmemberLarry Boeldt25-Jul-11 19:00 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140916.1 | Last Updated 9 May 2014
Article Copyright 2010 by Larry Boeldt
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid