Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2011-02-13
8
Medium Priority
?
444 Views
Last Modified: 2012-05-11
In my code snippet the user uploads an image but may try more than once to get it correct, slect the one he wants. Each image is displayed right after upload. I'd rather do this all one one page.

The user may upload several images before he get's the correct one. 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. Yes, I can request the user refresh the page but I'd rather it be automatic.

Any ideas how to get around this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT">
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<title>Upload Image</title>
</head>
   
<body>
 <cfset storyid = 148>
 <cfset ImageName = Right(UserInfo.GUID, 6)>

<cfif isdefined ("FileContents")>
	<cfoutput>
     <CFFILE DESTINATION="c:\server\News-Servers\ateam\staff\newsroom\upload_image\utemp\#ImageName##storyid#.jpg" ACTION="upload" NAMECONFLICT="OVERWRITE" FILEFIELD="FileContents" accept="image/jpg, image/jpeg, image/pjpeg" />
    </cfoutput>	
</cfif>


<table align="center" width="400" border="0" cellspacing="6" cellpadding="6">
<tr>
<td><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>
</td></tr>
</table>

<img src="/staff/newsroom/upload_image/utemp/<cfoutput>#ImageName##storyid#</cfoutput>.jpg">

</body>
</HTML>

Open in new window

0
Comment
Question by:Qsorb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 10

Assisted Solution

by:cyberstalker
cyberstalker earned 400 total points
ID: 34882175
Add some random querystring to the image url. This can be a timestamp for example, to make sure it will be unique every time the page is opened.
0
 
LVL 16

Accepted Solution

by:
Gurpreet Singh Randhawa earned 1200 total points
ID: 34882924
Ok do it like this as per cyberstalkar is saying one way: the code is attached,

Another way is you can just pass the cflocation tag and reload the same page like this

<cflocation addtoken="no" uel="samepage.cfm?file=cffile.serverfile">

and show the file, else show theold one, this way only the new image will be shown

Choice is urs


<cfset storyid = 148>
 <cfset ImageName = Right(UserInfo.GUID, 6)>

<cfif isdefined ("FileContents")>
	<cfoutput>
     <CFFILE DESTINATION="c:\server\News-Servers\ateam\staff\newsroom\upload_image\utemp\#ImageName##storyid#.jpg" ACTION="upload" NAMECONFLICT="OVERWRITE" FILEFIELD="FileContents" accept="image/jpg, image/jpeg, image/pjpeg" />
     <cfset newStamp = #DateFormat(now())#_#TimeFormat(now(),'hh:mm:ss')#>
     <cfset newImage = cffile.serverfile>
    </cfoutput>	
</cfif>
<cfset oldStamp = #DateFormat(now())#_#TimeFormat(now(),'hh:mm:ss')#>
<table align="center" width="400" border="0" cellspacing="6" cellpadding="6">
<tr>
<td><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>
</td></tr>
</table>
<cfif oldStamp eq newStamp>
<img src="/staff/newsroom/upload_image/utemp/<cfoutput>#ImageName##storyid#</cfoutput>.jpg">
<cfelse>
Reload Image
</cfif>

</body>
</HTML>

Open in new window

0
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 400 total points
ID: 34883447
no points. cyberstalker provided the answer already

Add some random querystring to the image url. This can be a timestamp for example ...

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

Open in new window





0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:Qsorb
ID: 34884733
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')#">









0
 

Author Comment

by:Qsorb
ID: 34884849
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>

Open in new window

0
 

Author Closing Comment

by:Qsorb
ID: 34884862
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.
0
 

Author Comment

by:Qsorb
ID: 34884892
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.
0
 
LVL 52

Expert Comment

by:_agx_
ID: 34884952
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.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

609 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