Solved

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

Posted on 2011-02-13
8
417 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
8 Comments
 
LVL 10

Assisted Solution

by:cyberstalker
cyberstalker earned 100 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 15

Accepted Solution

by:
Gurpreet Singh Randhawa earned 300 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 100 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
 

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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

746 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

13 Experts available now in Live!

Get 1:1 Help Now