Solved

Upload file

Posted on 2002-06-09
8
246 Views
Last Modified: 2013-12-24
I would like to add an upload an image feature to the existing form:

Name:
Email:
Photo:

I know how to write the form and database for this and process the form for name and email ... but I'm not sure how to add the upload an image.  I've been looking at my CFML book and it appears that this would have to be done using a seperate form.  But is there a way to do it all on one form ... processing all fields, including the file upload all at once?

Thanks,
Ansia
0
Comment
Question by:Ansia
  • 4
  • 4
8 Comments
 
LVL 1

Expert Comment

by:ndintenfass
ID: 7065478
You can do this all on one form.

You will most probably just store the name of the image file in your database.  Alternatively, you may want to store the "ContentType" and "ContentSubType" fields.

One thing to always remember is that when you are uploading files in a form you MUST have the ENCTYPE="multipart/form-data" attribute in the FORM tag.

Here is some code that should get you started:


----- THE FORM -------

<form action="YourActionPage" method="post" enctype="multipart/form-data">
Name:<br>
<input type="text" name="name">
<br><br>
Email:<br>
<input type="text" name="email">
<br><br>
Photo<br>
<input type="file" name="photo">
<br><br>
<input type="submit" value="Go!">


----- THE CODE DEALING WITH THE FILE ON FORM ACTION -------
[[NOTE: THIS CODE ASSUMES THE FILE IS BEING UPLOADED, but you can check to see if it has been by seeing if the form field containing the file is an empty string -- if it's an emptry string, there is no file being uploaded]]


<!--- I like to build a struct with the file info --->
<cfset FileInfo = StructNew()>
<!--- this is the tag that puts the uploaded file on the server --->
<!--- you put in an absolute path -- in this case, it is just putting it into the directory of the calling page --->
<cfset directoryToStorePhotos = expandpath("./")>
<cffile action="UPLOAD" filefield="photo" destination="#directoryToStorePhotos#" nameconflict="MAKEUNIQUE">
<!--- if the file was saved, build a structure containing information about it --->
<cfif File.FileWasSaved>
     <cfset FileInfo.Path = directoryToStorePhotos>
     <cfset FileInfo.Name = File.ServerFile>
     <cfset FileInfo.Label = File.ClientFile>
     <cfset FileInfo.Type = File.ContentType>
     <cfset FileInfo.sub_type = File.ContentSubType>
</cfif>          
<!--- make sure the file is a web image, if it is not, delete it and set an error --->    
<cfif File.ContentType is not "image" or (File.ContentSubType is not "gif" AND File.ContentSubType is not "jpeg" and File.ContentSubType is not "pjpeg")>
     <!--- you will have your own way to deal with an error condition here, probably --->
     <cfset request.error = 1>
     <cffile action="Delete" file="#expandpath("images/pieces/#FileInfo.Name#")#">
     <cfset message="You can only upload gifs or jpegs">
</cfif>          


AT THIS POINT YOU NOW HAVE THE IMAGE UPLOADED TO YOUR SERVER AND HAVE THE NAME AND PATH OF THAT FILE IN THE FileInfo struct -- you can use this to insert into your database.  Then, you can dynamically populate the IMG tag when you go to display the image.  Also, if you are also allowing the end-user to edit the entry, you will need to detect if they are uploading a new photo and delete the old photo (or, at least, that's a common way to deal with it).

Make sense?
0
 

Author Comment

by:Ansia
ID: 7066024
yes .. it does make sense ... now to give it a try.

Question: In my database ... how do I name the field for the image? #imagename# ?

On the page where I want to display the info, it should then display where I have the field name #imagename# ? Am I to make a seperate directory in my remote folder for the images?  I'm trying to figure out how to point to the images so it will display along with the rest of the info.

Ansia
0
 
LVL 1

Expert Comment

by:ndintenfass
ID: 7066027
You name the field whatever you like.  "imagename" would do just fine.

You can create the directory structure however you like, but it would probably be wise to create a separate sub-directory that holds the uploaded photos.

For instance, if you created a directory called "photos" you would then set the line in the code I showed above to:

<cfset directoryToStorePhotos = expandPath("photos/")>

(assuming the page with the form is in the root above the directory photos)

Then, on the page where you show the image you could do something like:

<img src="photos/#imagename#">

Does that help?
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

Author Comment

by:Ansia
ID: 7080452
yes, very much helps.
but I'm also wondering: how to I get a user to upload the image file to my remote directory?

I want the image to go to "http://www.mydomain.com/uploads"

I've hit a wall here.  I think it's because you need a login/password to ftp files to my remote directory.

0
 
LVL 1

Expert Comment

by:ndintenfass
ID: 7080459
On the server you will use the CFFILE tag to capture the uploaded file and write it to disk.

Assuming the file that contains the CFFILE tag resides in the web root at a URL something like:

http://www.yourdomain.com/upload.cfm

On the upload.cfm page you can use the expandPath() function to put the file into the "uploads" directory, which appears to sit under the web root.  It might look something like this:

<cfset directoryToStorePhotos = expandpath("uploads/")>

<cffile action="UPLOAD" filefield="photo" destination="#directoryToStorePhotos#" nameconflict="MAKEUNIQUE">

Make sense?
0
 

Author Comment

by:Ansia
ID: 7080470
I'm starting to get it ...

In my access database, I have this field named "aphoto" and the field type set as "OLE Object".  Is this correct?

Here's what I have so far with the upload.cfm page:

<CFIF IsDefined("form.aDescription")>
  <CFINSERT DATASOURCE="aartra11.data"
  TABLENAME="available" FORMFIELDS="aDate,aDescription,aPriceTrade,aContact,aPhone,aEmail,aphoto">
</CFIF>

<body>
<CFFILE
DESTINATION="http://www.mydomain.com/AHTBC/uploads/"
ACTION="UPLOAD"
NAMECONFLICT="OVERWRITE"
FILEFIELD="aphoto">
<CFOUTPUT>
File upload was successful
</CFOUTPUT>
</body>

can you help me write this page correctly?
this is a new thing for me and I really appreciate the help!

Thanks :)
0
 
LVL 1

Accepted Solution

by:
ndintenfass earned 200 total points
ID: 7080484
Actually, no.  You are not going to store the image in the database, only the name of the image (and path, if you choose).  Change the field in your database to a text field, and use it to just store the name of the file.

Check out the code I originally posted.  In that example, the form contains a file field called "photo".  Also, make sure to put the ENCTYPE attribute in your FORM tag.

You will not be able to use CFINSERT to put the file or the name of the file into your database.

You might do something like:

<cfif isDefined("form.aDescription")>
     <!--- I like to build a struct with the file info --->
     <cfset FileInfo = StructNew()>
     <!--- this is the tag that puts the uploaded file on the server --->
     <!--- you put in an absolute path -- in this case, it is just putting it into the directory of the calling
     page --->
     <cfset directoryToStorePhotos = expandpath("uploads/")>
     <cffile action="UPLOAD" filefield="aPhoto" destination="#directoryToStorePhotos#" nameconflict="OVERWRITE">
     <!--- if the file was saved, build a structure containing information about it --->
     <cfif File.FileWasSaved>
         <cfset FileInfo.Path = directoryToStorePhotos>
         <cfset FileInfo.Name = File.ServerFile>
         <cfset FileInfo.Label = File.ClientFile>
         <cfset FileInfo.Type = File.ContentType>
         <cfset FileInfo.sub_type = File.ContentSubType>
     </cfif>          
     <!--- make sure the file is a web image, if it is not, delete it and set an error --->    
     <cfif File.ContentType is not "image" or (File.ContentSubType is not "gif" AND File.ContentSubType is not "jpeg" and File.ContentSubType is not "pjpeg")>
         <!--- you will have your own way to deal with an error condition here, probably --->
         <cfset request.error = 1>
         <cffile action="Delete" file="#expandpath("images/pieces/#FileInfo.Name#")#">
         <cfset message="You can only upload gifs or jpegs">
     </cfif>          
     <!--- now insert the information into the database --->
     <cfquery name="insert" datasource="aartra11.data">
          INSERT INTO available
          (
               aDate,aDescription,aPriceTrade,aContact,aPhone,aEmail,aphoto
          )
          VALUES
          (
               #createODBCDateTime(form.aDate)#,'#form.aDescription#','#form.aPriceTrade#','#form.aContact#','#form.aPhone#','#form.aEmail#','#fileInfo.name#')
          )
         
     </cfquery>
</cfif>

If you don't want to use a CFQUERY and like to continue to use CFINSERT, you may be able to do this in place of the CFQUERY tag above:

<CFSET FORM.aPhoto = fileInfo.name>

 <CFINSERT DATASOURCE="aartra11.data"
 TABLENAME="available" FORMFIELDS="aDate,aDescription,aPriceTrade,aContact,aPhone,aEmail,aphoto">
0
 

Author Comment

by:Ansia
ID: 7080598
Okay ... here goes!

If I have any problems, I'll post it in another question.

THANK YOU SO MUCH for your help!!! :)

Ansia
0

Featured Post

Comprehensive Backup Solutions for Microsoft

Acronis protects the complete Microsoft technology stack: Windows Server, Windows PC, laptop and Surface data; Microsoft business applications; Microsoft Hyper-V; Azure VMs; Microsoft Windows Server 2016; Microsoft Exchange 2016 and SQL Server 2016.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
htaccess restrict subdomain 4 111
CFFILE upload help 98 156
How to move and access a folder outside of the root folder 4 85
System Analysis 5 57
If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
When it comes to showing a 404 error page to your visitors, you do not want that generic page to show, and you especially do not want your hosting provider’s ad error page to show either. In this article, I will show you how to enable the custom 40…
Along with being a a promotional video for my three-day Annielytics Dashboard Seminor, this Micro Tutorial is an intro to Google Analytics API data.
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.

813 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

14 Experts available now in Live!

Get 1:1 Help Now