open window to select a picture file

Does anyone know how to create the code that will open a dialog box enabling user to select a picture file when they click on browse button?

Thanks

If you mean a form field that opens a "browse local files" window so the user can pick a file, then yes. You want:

<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="myFile">
<input type="submit" value="Upload">
</form>

Also, if you mean just opening a new browser window, you can do that in a link by adding target="_blank" to the <a> tag.

Hi, Kitless
The code is working. However, if I want to store only the photo file name such as photo.jpg in the database, how can I do that? the code that you gave me will store the whole path. My purpose is the user after select his picture file from browse window, I will store that picture. Then later on when user search the information, I have to display the picture with related information.
Do you understand what I am saying. Thank you so much for your help so far.

Assuming you've already completed the upload with <cffile action="upload">, you can reference the filename as follows:

File.ServerFile

This is the actual name of the file saved to the server.

Hi, Folger
Thank you. However, I am not quite clear of what you mean that you can reference the filename as follows:

File.ServerFile
Did you mean I should put the code :<cfoutput><img scr="#file_name.serverfile#"></cfoutput> when I want to show it?

I have to keep the exact term serverfile after dot.?
Thanks

Once the file has finished uploading, you can access the name of the uploaded file at any later time during the same request. So after the file is uploaded, you could output the name of the file with:

<cfoutput>
The file just uploaded is named #cffile.serverFile#
</cfoutput>

If you want to keep the file name around for future use, you'll need to read the file name from disk, or store the file name using some persistence mechanism (database, etc.).

I got a question. If I use cffile, do I have to store the image field in the table as OLE object. Because I set up the field name "image" in the table as text field. When user login and select the file they want to store in the database, I want to show only the file name in the field.
I used following query code
<cfquery datasource="datasource_name">
insert into user
values(userid, username, image)
</cfquery>

After that I want to display the picture that user inserted into the user table.
However, when I tested, looked at the table it did not show the image file name but instead it showed something like "C:\CFusionMX\runtime\servers\default\SERVER-INF\te". Does anyone know why is that? (P.S, I used cffile action="upload", it showed the file name when I cfoutput it by using this code
<cfoutput>
You uploaded #cffile.ClientFileName#.#cffile.ClientFileExt#
successfully to #cffile.ServerDirectory#.
</cfoutput>
Please help!!!! Thanks

If I understand you correctly, all you really need to do is save the filename of the image in the appropriate field of the users table, right? So (again, assuming you've already completed the upload with a CFFILE):

<cfquery datasource="datasource_name">
INSERT INTO user (userid, username, image) VALUES (#userid#, #username#, #file.ServerFile#)
</cfquery>

You're not saving the file to the database, just its name. When you want to then show it, do a query to pull the name from the DB, and code the path into your <img> call:

<cfquery name="getImageName" datasource="datasource_name">
SELECT image FROM user WHERE userid = #URL.userid#
</cfquery>

<img src="thePathToYourUploadedImages/#getImageName.image#">

Does that help?

I can't insert the image file name
when I used the code <cfquery datasource="datasource_name">
INSERT INTO user (userid, username, image) VALUES (#userid#, #username#, #file.ServerFile#)
</cfquery
I can't show the image when I can't insert it into the DB.
Please help!
Thanks

Honestly i didn't read the whole thread, but sunbigsmile did you select OLE Object in your database?, cause (again i didn't read the whole thread ) maybe the Coldfusion is cool, but the database doesn't know your trying to insert an image (jpeg,gif,tiff, etc.)

Check you later,
Alas

Do I have to make that field data type into OLE object? Can I keep it as a text field and use coldfusion to develop web application?
Thanks

I have no idea why not. The filename is a string. Make sure the field "image" is of type "text". If you're still having issues writing to the DB, give us more details on your database and table structure.



Yes. Pull the filename from the DB. The *actual* file is being stored on the webserver somewhere (wherever you specify in the CFFILE tag). Reference that file by building the path in your <img> tag, and appending the filename you pull from the DB to the end of that path:

Hi, it is me again
NOw there is some improvement. When I click on get button for the images folder on the right hand side panel in dreamweaver, I saw the image was in the folder. However, the user table which stored the image file name was not storing the file name at all but this text string: C:\CFusionMX\runtime\servers\default\SERVER-INF\te.
Does any one know how to solve it. If I can store the file name, then I can show it.
Thanks

Hi Sun -

Is your CFFILE tag on the same page that you're referencing FILE.ServerFile?

Can you give us your code (for the upload page) as it presently exists, so that we can take a look?