[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 303
  • Last Modified:

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>
5 Solutions
You can try one of these:

Macromedia article:

Perform Simple Image Manipulation in ColdFusion with JAI



(But people complain a lot about this one)
Here is a great open-source FREE option: http://www.imagemagick.com
Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

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/thumbnail.pl">
<!--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.

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now