How to create thumbnail at image upload time.

Posted on 2004-11-15
Last Modified: 2013-12-24
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>
Question by:shmoel
    LVL 35

    Accepted Solution

    You can try one of these:

    Macromedia article:

    Perform Simple Image Manipulation in ColdFusion with JAI



    (But people complain a lot about this one)
    LVL 7

    Assisted Solution

    LVL 15

    Assisted Solution

    Here is a great open-source FREE option:

    Assisted Solution

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

    Author Comment

    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;

    LVL 22

    Assisted Solution

    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.

    Featured Post

    How your wiki can always stay up-to-date

    Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
    - Increase transparency
    - Onboard new hires faster
    - Access from mobile/offline

    Join & Write a Comment

    Suggested Solutions

    One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
    Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
    Sending a Secure fax is easy with eFax Corporate ( First, Just open a new email message.  In the To field, type your recipient's fax number You can even send a secure international fax — just include t…
    Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    22 Experts available now in Live!

    Get 1:1 Help Now