How to create thumbnail at image upload time.

Hi , and thank you in advance for your help.
I have my image uploading to a server and the image file name stored in MySQL database successfully with the following code. Now I need your help on creating thumbnail for the same image that is being uploading and stored it in different directory (called "thumbnails" for example). Here is my working code without thumbnail creation feature.

Thank you.

<title>Upload an image</title>

<link href="style.css" rel="stylesheet" type="text/css">
 <DIV id=overDiv
      style="Z-INDEX: 1000; VISIBILITY: hidden; POSITION: absolute" ></DIV>
<cfif isdefined ("form.InsertIt")>
  <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><strong>You
    inserted the image name <cfoutput>#Form.images#</cfoutput> in to your database.</strong></font><br>
    <strong><font color="#666666" size="3" face="Arial, Helvetica, sans-serif">Proceed
    to</font><font size="3" face="Arial, Helvetica, sans-serif"> <a href="upload_article.cfm"><font color="#000000" size="3">STEP
    <input name="images" type="hidden" value="#form.images#">
<!---  Fields I am storing in my DB --->
<cfinsert datasource="db"
                 tablename ="issue"

<cfif isdefined ("form.image1")>
  <form action="submit-issue.cfm" method="post" enctype="multipart/form-data" name="upload_form" id="upload_form">
    <table width="800" border="1" align="center" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
      <tr bgcolor="#BACAE4">
        <td><font color="#990000" size="2" face="Arial, Helvetica, sans-serif"><strong><font color="#000000" size="3">STEP
          1</font><font color="#000000">.</font> Upload An Issue Image and Name
        <td align="center"> </td>
        <td align="center"><input type="file" name="Image1" id="Image1">
          <input name="upload_now" type="submit" class="button" value="Upload the image"> </td>
    <p align="center"><strong><font color="#666666" size="3" face="Arial, Helvetica, sans-serif">Proceed
      to</font><font size="3" face="Arial, Helvetica, sans-serif"> <a href="upload_article.cfm"><font color="#000000" size="3">STEP
<cfif isdefined("form.Image1")>

  <!---  The uploadfile destination path is--->
  <cffile action="upload" filefield="Image1" destination="E:\web\Magazine\images\" nameconflict="overwrite" accept="image/*" >
  <cfset uploadedfile = "E:\web\Magazine\images\">
  <p align="center"><br>
    <cfoutput><img src="images/#file.serverfile#" name=bluh></cfoutput>

  <div align="center"><font size="2" face="Arial, Helvetica, sans-serif"><strong>Fill
    out following fields and click <font color="#990000">Continue</font></strong></font>
  <table width="450" border="1" align="center" cellpadding="6" cellspacing="0">
    <tr valign="top">
      <td><font size="2" face="Arial, Helvetica, sans-serif"><cfoutput>#file.ServerFile#</cfoutput>- is image will be uploaded to the database<cfoutput> </cfoutput></font><font size="2"><cfoutput></cfoutput></font><cfoutput>
          <div align="center"></div>

<!---  Part of script that contains my form elements--->

          <form action="submit-issue.cfm" method="post" name="form1">
            <p align="center"><font size="2" face="Arial, Helvetica, sans-serif"><strong>Issue
              Period :</strong></font>
              <select name="periods" id="period">
                <option value="selected">Select Issue Period </option>
                <option value="Winter ">Winter </option>
                <option value="Spring ">Spring </option>
                        <option value="Summer">Summer </option>
                <option value="Fall">Fall </option>
              <select name="years" id="years">
                <option value="selected">Year</option>
                <option value="2004">2004</option>
                <option value="2005">2005</option>
                <option value="2006">2006</option>
                <option value="2007">2007</option>
                <option value="2008">2008</option>
            <div align="right"><font size="2" face="Arial, Helvetica, sans-serif"><strong>Issue
              Title: </strong></font>
              <input name="Issues" type="text" id="Issues" value="" size="50" maxlength="100">
              <input type="submit" name="InsertIt" value="Continue &gt;&gt;">
              <input name="images" type="hidden" value="#file.ServerFile#">
        </cfoutput> </td>
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

You can try one of these:

Macromedia article:

Perform Simple Image Manipulation in ColdFusion with JAI



(But people complain a lot about this one)

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Here is a great open-source FREE option:
Cloud Class® Course: Ruby Fundamentals

This course will introduce you to Ruby, as well as teach you about classes, methods, variables, data structures, loops, enumerable methods, and finishing touches.

I've always used CFX_Image -  easy to use ..
<CFX_IMAGE ACTION="RESIZE" FILE="#ExpandPath('sharedimages\#file.serverfile#')#" OUTPUT="#ExpandPath('sharedimages\optimised\#file.serverfile#')#" X="135"

but recently started to use imagemagick, the problem with Imagemagick is that you have to have CFExecute turned on in the admin settings and on some shared server (in fact most that I've ever dealt with) have it turned off. All you are doing with Imagemagick is passing an execute command to an application on the server.

Something like ... <cfexecute name="#executablePath# mogrify #extension#" arguments="-geometry #width#x#height# 75 #filename#"></cfexecute>

(basically what you would put in DOS to make it work)

In my opinion, CFX_Image does the job simply and easily (although I've had no joy with progressive JPEGs) although, I find the image quality of those done with Imagemagick slightly better

Hope that helps :)
shmoelAuthor Commented:
I used following .pl script with ASP and it works fine on resizing my images. This is my first experience working with ColdFusion and images and I would appreciate if you take a quick look at the following. Please let me know what could be wrong with those. I get my action file running but it does not resize and stores anything. Thanks.
<cfoutput query="Resize">
   <form name="form1" method="post" action="/cgi-bin/">
<!--Get image from database-->
        <input name="images" type="image" src="images/#image#" value="#image#">               <input type="submit" name="submit" value="submit">
#!/usr/bin/perl -w

# Tell the server that you want to use the CGI and Image::Magick
# parsers for this script.
use CGI::Carp qw(fatalsToBrowser);
use Image::Magick;

# These lines read the buffer from the submitted form, remove any spaces or other
# characters that may interfer with the buffer, and create a variable called FORM that
# contains all the names and values of the submitted fields.
read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});
my @pairs = split(/&/, $buffer);
foreach $pair (@pairs) {
    ($name, $value) = split(/=/, $pair);
    $value =~ tr/+/ /;
    $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg;
    $FORM{$name} = $value;

# This line gets the 'images' field value from the submitted form.
my $images = $FORM{'images'};

# These lines set the paths for the images and the thumbnails
my $imagepath = "E:/web/Magazine/images/";
my $thumbnailpath = "E:/web/Magazine/images/thumbnails/";
my $imagefullpath = "$imagepath$images";
my $thumbfullpath = "$thumbnailpath$images";

# Read in the image, resize it to the geometry specified, and write the image
my $x;
my $image = Image::Magick->new();
$x = $image->Read($imagefullpath);
warn $x if $x;
$x = $image->Scale(geometry=>'100x100');
$x = $image->Write($thumbfullpath);
warn $x if $x;

you can use custom tag.
We are using the tag cfx_imagecr3 free from some web site of searched through google. If you are using in your code this tag pls replace with the new tag.
The usage:
<cfx_imagecr3 load="photo.jpg"
              resize="158x" quality="70" nocache="1">    

It should be very easy.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.