Your File is uploading Popup

scott2500uk · #1 (**permalink**) 03-16-07, 04:28 PM

I have a simple file uploader. user selects file and it uploads. Depending on siz eof file the page could take ages to change or matter of seconds which then shows if the file uploaded or not.

I want to add a popup that shows an image saying uploading while the file is uploading. this is to tell the user that the file is actually being uploaded and to wait patiently.

Now i have the popup to open when they submit the form with the following code:

PHP Code:


			
echo "<form method='post' enctype='multipart/form-data' action='' onSubmit='imuploading()' /><br>";

Code:

function imuploading() {
	var windowuploading = null;
	var w = '260';
	var h = '160';
	var mypage = '';
	var myname = 'Uploading';
	var winl = (screen.width-w)/2;
	var wint = (screen.height-h)/2;
	var settings ='height='+h+',';
	settings +='width='+w+',';
	settings +='top='+wint+',';
	settings +='left='+winl+',';
	settings +='scrollbars=no,';
	settings +='resizable=no';
	windowuploading = window.open(mypage,myname,settings);
	if(parseInt(navigator.appVersion) >= 4){
		windowuploading.window.focus();
	}
	windowuploading.document.writeln("<center><img src='modules/File_Uploader/images/loading.gif' alt='Uploading' /></center>"); 
}

What has had me stuck for hours is how to close that popup when the main page has finished uploading and has given some output.

Now ive tried using methods such as onUnload=closemypopup() onLoadclosemypopup() and used js to tell the popup to close:

Code:

function closemypopup() {
    windowuploading.close();
}

But these just dont work for some reason. I get js errors saying that windowuploading is undefined. I presume this is because the main page has changed.

Now I have found a way to acomplish what i want but its just not practical. and that is when the main page has refreshed is put on that page to open the same popup and then close it. Because the same popup is being opened instead of 2 popups it just refreshes the first one.

For a visual demo go to: http://www.steezmatic-designs.com/mo...=File_Uploader

You can see the popup open. Im looking for a way to close it once the main page has finished uploading.

Some one please help me. thank you.

TwoD · #2 (**permalink**) 03-17-07, 01:24 PM

The reason you get "windowuploading is undefined" is because it only exists in the local scope of the imuploading function. As soon as that function returns, the windowuploading variable is destroyed.

To access the variable from closemypopup, make it global by simply moving the declaration out of the function:

javascript Code:

var windowuploading = null;
function imuploading() {
.....
}

It's also possible to simply neglect the var keyword. Then the variable defaults to global scope, but I don't recommend that since it causes confusion and possible conflicts.

scott2500uk · #3 (**permalink**) 03-19-07, 11:11 AM

ok i have moved the variable outside the function so now my js code is:

Javascript Code:

var windowuploading = null;
 
function uploadwindow() {
    windowuploading.close();
}
 
function imuploading() {
    var w = '260';
    var h = '160';
    var mypage = '';
    var myname = 'Uploading';
    var winl = (screen.width-w)/2;
    var wint = (screen.height-h)/2;
    var settings ='height='+h+',';
    settings +='width='+w+',';
    settings +='top='+wint+',';
    settings +='left='+winl+',';
    settings +='scrollbars=no,';
    settings +='resizable=no';
    windowuploading = window.open(mypage,myname,settings);
    if(parseInt(navigator.appVersion) >= 4){
        windowuploading.window.focus();
    }
    windowuploading.document.writeln("<center><img src='modules/File_Uploader/images/loading.gif' alt='Uploading' /></center>"); 
}

now when the submit button is pressed once again the popup opens but when the file has finished and the main page has finished loading the popup doesnt close. Im am calling the function uploadwindow() by:

HTML Code:

<body onLoad='uploadwindow()'>

I use FF error console and the error im getting is:

windowuploading has no properties

and is pointing to this code:

Javascript Code:

function uploadwindow() {
    windowuploading.close();
}

Looks like when the page refreshes its loosing the popup that opened

jfulton · #4 (**permalink**) 03-19-07, 06:01 PM

When are you trying to close the popup? Is it after the "main window" refreshes or changes? If you have a main window open a popup, the reference to that popup from the main window is only available while that main window remains on the same page. As soon as you navigate the main window to a new page, or refresh the page, the javascript code is all "new" - so your windowuploading variable is set to null. The only time windowuploading is not null is after the popup has been opened and the main page has not changed.

HTH.

scott2500uk · #5 (**permalink**) 03-20-07, 07:43 AM

Thats what i thought so knew there was no way to close the window. but I found away and that was to reopen the popup with the same param's and tell it too close. what I want to know is this the only way?

scott2500uk · #6 (**permalink**) 03-20-07, 07:51 AM

ok this is how im making it work as i want:

I open popup with onSubmit
main page reloads
on the new page load i have the code:

Javascript Code:

imuploading();
uploadwindow()

This reopens the same popup and then closes it.

This works on IE7 and FF.

any one tell me if it aint working in other browsers or if there is a better way of achieving this?

cheers for all your help

TwoD · #7 (**permalink**) 03-20-07, 05:36 PM

Oh sorry, I forgot the main page refreshed before you wanted to close the popup.

One way to do it is like you suggested, open a new window with the same name as the old one (the second parameter to the window.open() method), if the window already exists, the browser should notice this and instead of creating a new window, return a reference to the one already open. When doing so, the browser also ignores the third parameter, defining the window style, since windows can only change styles upon creation.
On a side note, I noticed this behaviour in a gallery on a site I recently made, where all the images would open up in the same popup, without the popup being resized as the designer intended.

Another way to be sure you get the correct window is to store the windowuploading variable with the reference to the window in a hidden frame.

That way you can access the frame after a page refresh and look up that variable. But adding frames and stuff to your site just for that probably isn't an ideal solution.

Yet another method would be to take advantage of the window.opener reference in the popup. (This should still be valid after the main page refreshes) A small script could "poll" the main window and add a reference to itself in a variable there, allowing the main window access to it again.
Of course, the main window would have to cooperate with the popup and "listen" for a reference update if it finds that the variable is null when it tries to close the window.