Solved

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

Posted on 2011-02-13
8
426 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 16

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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 

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

Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
AJAX ModalPopupExtender will Not Hide in Asp.net 1 37
alert on input text 2 25
Popup write two lines 3 22
PHP Web Development 6 25
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

749 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