How to update screen to display new image after second image upload

myselfrandhawa,

It's not clear and I'm confused at some of your suggestion:

What do you mean by <cfset newImage = cffile.serverfile>  Which serverfile?  Where?
Do you mean serverfile equivilent to #ImageName#?

And what do you mean by "Reload Image". How? If you mean by cfinclude, that does not seem to work. First, it creates an endless loop, and second, no image to display.

Please take a bit more time and explain.

Also, couldn't get the date and time stamp to work without an error unless I included quotes like this:

<cfset newStamp = "#DateFormat(now())#_#TimeFormat(now(),'hh:mm:ss')#">

I could not get the suggestions here to work and needed something a bit simpler. So I went back to some of my older code.

I decided to use cfdirectory to grab the last file in the user's directory. I had to be sure it was random but also included six of the user's GUID so there could be no mistake it was the current user, with a random number, and the image uploaded.  The final code is in my snippet.

<cfset storyid = 148>
    <cfset irand = randrange(1, 200)> 
    <cfset ImageName = Right(UserInfo.GUID, 6)>

<cfif isdefined ("FileContents")>

    <cfif val(cgi.content_length) gt 5242880>
          Sorry. Maximum image file size is 5 MB. 
          <cfabort>
    </cfif>
 <cfoutput>
 <CFFILE DESTINATION="c:\server\News-Servers\ateam\staff\newsroom\upload_image\utemp\#ImageName##storyid#_#irand#.jpg" ACTION="upload" NAMECONFLICT="OVERWRITE" FILEFIELD="FileContents" accept="image/jpg, image/jpeg, image/pjpeg" />
</cfoutput>	
</cfif>

<form action="upload_image.cfm" method="post" enctype="multipart/form-data" onSubmit="var f = this.FileContents.value; if (f.length==0) {alert('You pressed the Upload button before you selected an image to upload'); return false}"> 
<input style="font-size:14px" name="FileContents" type="FILE" size="45">
<input style="font-size:12px" type="submit" value="Upload Image">
</form>



<cfdirectory
    directory="c:\server\News-Servers\ateam\staff/newsroom\upload_image\utemp"
    name="mydirectory"
    filter="#ImageName##storyid#*.jpg"
    sort="datelastmodified DESC">

<cfoutput query="mydirectory" maxrows="1">
#mydirectory.name#
#mydirectory.size#
#mydirectory.dateLastModified#

<img src="/ateam/staff/newsroom/upload_image/utemp/#mydirectory.name#"  width="400"/>
</cfoutput>

<cfif Len(mydirectory.name) EQ 0>
There was no image file found from your upload.
</cfif>

Select allOpen in new window

Correction:
directory="c:\server\News-Servers\ateam\staff\newsroom\upload_image\utemp"

should be:

directory="c:\server\News-Servers\ateam\staff\newsroom\upload_image\utemp"

So, the solution I used works best for me.

But you all share the points for pushing me to think and for the attemp.

One last correct for those who may wish to use this. Change

filter="#ImageName##storyid#*.jpg"

to:

filter="#ImageName##storyid#_#irand#*.jpg"

That includes the random number as suggested by cyberstalker.

The problem is that the second image may not be displayed because the former image is still in the cache and the page has not been refershed
...
I could not get the suggestions here to work and needed something a bit simpler.


If the problem is browser caching all you need to do is append a random value onto the url. I'm not sure what myselfrandhawa's code is trying to address.  But it's as simple as this:

<cfoutput>
    <img src="/staff/newsroom/upload_image/utemp/#ImageName##storyid#.jpg?rand=#now().getTime()#">
</cfoutput>

That's it. No other changes except to your <img> tag.