Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET

Add .NET Thumbnailing to a Classic ASP Multi-upload Image Gallery

Rate me:
Please Sign up or sign in to vote.
4.48/5 (9 votes)
9 May 2014CDDL2 min read 57.7K   1K   19   23
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 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.

Image 1

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:

Image 2

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:

JavaScript
// 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:

JavaScript
<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:

ASP.NET
<%@ 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: 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)


Written By
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

 
QuestionAlternative for Flash Pin
Member 1486742413-Sep-20 18:41
Member 1486742413-Sep-20 18:41 
QuestionVersion in HTML5 ? Pin
Member 121032431-Nov-15 1:31
Member 121032431-Nov-15 1:31 
AnswerRe: Version in HTML5 ? Pin
Larry Boeldt3-Nov-15 4:53
Larry Boeldt3-Nov-15 4:53 
GeneralRe: Version in HTML5 ? Pin
Member 121032433-Nov-15 10:02
Member 121032433-Nov-15 10:02 
QuestionChanging the limit from 10 to 25. Is this possible/advisable? Pin
SayItAintSo2-May-13 12:22
SayItAintSo2-May-13 12:22 
AnswerRe: Changing the limit from 10 to 25. Is this possible/advisable? Pin
Larry Boeldt8-May-13 15:22
Larry Boeldt8-May-13 15:22 
AnswerRe: Changing the limit from 10 to 25. Is this possible/advisable? Pin
Larry Boeldt20-May-13 17:09
Larry Boeldt20-May-13 17:09 
GeneralMy vote of 5 Pin
HenryUH11-Mar-13 3:56
HenryUH11-Mar-13 3:56 
QuestionUsing the latest .NET version Pin
HenryUH11-Mar-13 3:51
HenryUH11-Mar-13 3:51 
Compliments on your post and download, I was able to run your default settings LOCALLY

After I uploaded some images in the "My Own First Gallery", i noticed the following:
- I Cannot update the gallery name
- No thumbnails (just red x)
- When I click on View it responses with "No images specified in XML"
I have admin priviledges on my system

Once I uploaded it to the web server,

I have a reunion sign up where I want to make use of this function to show pictures from the last reunion (Every 5 years), see
http://www.theVeldmans.com/reunion/login.asp (password gallery, logs in as guest)

Under the Home menu I have "Gallery Test"

When I try to upload an image, it response with the message below, it DOES actually upload it.
In addition the spin symbol keeps spinning

Appreciate your comments

Runtime Error
Description: An application error occurred on the server. The current custom error settings for this application prevent the details of the application error from being viewed remotely (for security reasons). It could, however, be viewed by browsers running on the local server machine.

(remainder removed)

Thanks, Henry
AnswerRe: Using the latest .NET version Pin
Larry Boeldt11-Mar-13 14:47
Larry Boeldt11-Mar-13 14:47 
QuestionSome minor issues Pin
waxed20-May-12 6:51
waxed20-May-12 6:51 
AnswerRe: Some minor issues Pin
Larry Boeldt21-May-12 18:33
Larry Boeldt21-May-12 18:33 
AnswerRe: Some minor issues Pin
Larry Boeldt29-May-12 18:48
Larry Boeldt29-May-12 18:48 
GeneralEdit Gallery Error -- Object Expected Pin
Quintin Keilloh11-Feb-12 22:46
Quintin Keilloh11-Feb-12 22:46 
GeneralRe: Edit Gallery Error -- Object Expected Pin
Larry Boeldt15-Feb-12 17:55
Larry Boeldt15-Feb-12 17:55 
QuestionError on line 136 - thumbnail.aspx Pin
Member 810356522-Jul-11 20:20
Member 810356522-Jul-11 20:20 
AnswerRe: Error on line 136 - thumbnail.aspx Pin
Larry Boeldt25-Jul-11 18:46
Larry Boeldt25-Jul-11 18:46 
AnswerRe: Error on line 136 - thumbnail.aspx Pin
Larry Boeldt25-Jul-11 18:46
Larry Boeldt25-Jul-11 18:46 
GeneralRe: Error on line 136 - thumbnail.aspx Pin
Member 810356526-Jul-11 17:15
Member 810356526-Jul-11 17:15 
GeneralRe: Error on line 136 - thumbnail.aspx Pin
Member 810356526-Jul-11 22:25
Member 810356526-Jul-11 22:25 
QuestionDeploying Issue Pin
JBWills.7615-Jul-11 17:49
JBWills.7615-Jul-11 17:49 
AnswerRe: Deploying Issue Pin
Member 810356522-Jul-11 20:09
Member 810356522-Jul-11 20:09 
AnswerRe: Deploying Issue Pin
Larry Boeldt25-Jul-11 19:00
Larry Boeldt25-Jul-11 19:00 

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

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