Welcome Guest! You need to login or register to make posts.

Notification

Icon
Error

Options
Go to last post Go to first unread
hyperlinked  
#1 Posted : Wednesday, August 6, 2008 11:40:46 PM(UTC)
hyperlinked

Rank: Advanced Member

Groups: Member
Joined: 4/24/2008(UTC)
Posts: 31

I'm having two problems with my IU script. This script works perfectly on the Mac in Firefox and Safari. On the PC, it works in IE7, but no upload progress bar pops up and in Firefox 2, the upload progress bar appears, but the upload never starts.

Steps for the IE7 Upload Progress Bar Issue
1) Launch IU Script Below
2) Drag several images to the upload box
3) Click on the submit button of the attached form to initiate upload
4) The upload starts and it's obviously making progress because the images begin disappearing one by one, but the user otherwise does not get any feedback that his upload is in progress. If you're uploading a large file you may get the impression that the IU doesn't work.

Steps for the Firefox on PC Issue
1) Launch IU Script below.
2) Drag several images to the upload box
3) Click on the submit button of the attached form to intiate upload
4) The upload progress window appears, but nothing happens and IU freezes.

Screenshot:
http://www.hyperlinked.c...s/iu_ff_noupload_bug.jpg

IU Code and HTML Form Code
Code:

<script type="text/javascript" src="http://www.mysite.com/jscripts/iuembed.js"></script>

<div style="margin:5px; border:4px solid #ccc; padding:5px;">
<div style="width:750px; margin:8px auto;">
<script type="text/javascript">
<!--
	//<![CDATA[	
	function fullPageLoad()
	{    
		getImageUploader("ImageUploader1").RenameField("SourceFile_[ItemIndex]", "image");
		getImageUploader("ImageUploader1").setAdditionalFormName("IPBform");
		value = getImageUploader("ImageUploader1").getAdditionalFormName();
	}
		
	function ImageUploader1_BeforeUpload() {
		getImageUploader("ImageUploader1").setButtonStopText("Stop");
		needToHideButtonStop = false;	
	}
		
	function ImageUploader1_Progress(Status, Progress, ValueMax, Value, StatusText) {
		//Stop button should be displayed only during the upload process. If the upload 
		//completed (either successfully or not), the button should be hidden.
		needToHideButtonStop = (Status=="COMPLETE" || Status=="ERROR" || Status=="CANCEL");
	}
		
	//Create JavaScript object that will embed Image Uploader to the page.
	var iu = new ImageUploaderWriter("ImageUploader1", 750, 300);
		
	//For ActiveX control full path to CAB file (including file name) should be specified.
	iu.activeXControlCodeBase = "ImageUploader5.cab";
	iu.activeXControlVersion = "5,1,10,0";
		
	//For Java applet only path to directory with JAR files should be specified (without file name).
	iu.javaAppletJarFileName = "ImageUploader5.jar";
	iu.javaAppletCodeBase = "assets/";
	iu.javaAppletCached = true;
	iu.javaAppletVersion = "5.1.10.0";
		
	iu.showNonemptyResponse = "dump";
		
	iu.addParam("AdditionalFormName", "");
		
	//Set and configure advanced details view.
	iu.addParam("PaneLayout", "OnePane");
	iu.addParam("UploadView", "Thumbnails");
	iu.addParam("DetailsPreviewThumbnailSize", "30");
	iu.addParam("UploadThumbnailFitMode", "1");
	iu.addParam("ShowButtons", "false");
		
	iu.addParam("PaneBackgroundColor", "#ffffff");
		
	//Configure License Keys
	iu.addParam("LicenseKey", "XXXXX-XXXXX-XXXXX-XXXXX");
		
	//Configure upload settings.
	iu.addParam("FilesPerOnePackageCount", "1");
	iu.addParam("AutoRecoverMaxTriesCount", "1");
	iu.addParam("AutoRecoverTimeOut", "10000");
	iu.addParam("MaxConnectionCount", "3");
	iu.addParam("AllowRotate", "false");
	iu.addParam("AllowAutoRotate", "true");
	iu.addParam("UploadPaneShowDescriptions", "false");
	iu.addParam("DropFilesHereText", "\.jpg, \.gif \.png formats are accepted");
	iu.addParam("DropFilesHereImageFormat", "Url=http://www.mysite.com/images/background_uploadbox.gif;Width=750;Height=250;Position=Center;");


	if (iu.AddCookie) {
	    iu.AddCookie('session_id={$SESSION_ID_STRING}');
	}
		
	//Set several URLs files should be uploaded to. In a real life most likely
	//you will specify URLs to different servers, however in this demo the single
	//server and page is used for brevity.
	iu.addParam("Action", "http://www.mysite.com/index.php");
		
	//Configure URL where to redirect after upload.
	iu.addParam("RedirectUrl", "http://www.mysite.com/redirect.php");
		
		
	//Configure miscellaneous settings.
	iu.addParam("ShowDebugWindow", "false");
	iu.addParam("BackgroundColor", "#ffffff");
	iu.addParam("ShowContextMenu", "false");
		
	//Concurrent upload feature and advanced details view are not supported in Java version yet. 
	//This way we need to get Java version working in standard mode (sequential upload with standard
	//progress dialog).
	if (iu.getControlType() == "ActiveX"){
		iu.addParam("SilentMode", "true");
		var needToHideButtonStop = false;
		
		iu.addEventListener("BeforeUpload", "ImageUploader1_BeforeUpload");
		iu.addEventListener("Progress", "ImageUploader1_Progress");
		
		//Use timer to check whether to hide the Stop button. It allows to avoid the button flickering.
		window.setInterval("if (needToHideButtonStop) {getImageUploader('ImageUploader1').setButtonStopText(''); needToHideButtonStop = false;}", 500);
	}
	iu.fullPageLoadListenerName = "fullPageLoad";
		
	//Tell Image Uploader writer object to generate all necessary HTML code to embed 
	//Image Uploader to the page.
	iu.writeHtml();

	//]]>
//-->
</script>

<form action="http://www.mysite.com" id="IPBform" name="IPBform">
        <input type="hidden" name="session_id" value="{$SESSION_ID}" />
	<input type="hidden" name="autocom" value="gallery" />
	<input type="hidden" name="req" value="dopost" />
	<input type="hidden" name="wardrobe" value="1" />
	<input type="hidden" name="thumbnail" value="1" />
	<input type="hidden" name="member_id" value="1">
	<input type="hidden" name="mid" value="1" />
        <p>
	<h2>Pick Upload Settings</h2>
	</p>
	<p class="grey">Selected settings will apply to all images uploaded in this batch. Leave settings blank if they do not apply to all items in this group of images. You will be allowed to edit settings and information after your upload is complete.</p>
<table style="text-align:left;" cellspacing="4" style="margin-left:20px; margin-top:10px;">
<tr valign="top">
	<td align="right"><strong>Category:</strong></td>
	<td align="left">
		<select style="width:200px;" id="category_id" name="category_id" class="customselect" tabindex="2">
		<option value="">--Not Selected</option>
		{$categories}
		<option value="new" style="font-style:italic;">--New Category</option>
		</select>
	</td>
</tr>
</table>
<br clear="all" />
	<div class="formbuttonrow" style="margin-top:20px;">
		<input type="button" onclick="getImageUploader('ImageUploader1').Send();" value="Upload Images" />
	</div>
	</form>
</div>
</div>

Edited by user Wednesday, August 6, 2008 11:42:52 PM(UTC)  | Reason: Not specified

hyperlinked attached the following image(s):
iu_ff_noupload_bug.jpg
Dmitry  
#2 Posted : Saturday, August 9, 2008 5:45:22 PM(UTC)
Dmitry

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 8/3/2003(UTC)
Posts: 1,070

Thanks: 1 times
Was thanked: 12 time(s) in 12 post(s)
Hello,

Progress bar issue in Image Uploader ActiveX
You disable progress bar in your script using SilentMode property:
Code:
    if (iu.getControlType() == "ActiveX"){
        iu.addParam("SilentMode", "true");
        ...


Problem with Image Uploader Java freezing
It seems the problem is in AdditionaForm. The How to use AddField method instead of AdditionalFormName property article describes what you need to do to eliminate the problem.
Sincerely yours,
Dmitry Sevostyanov

UserPostedImage Follow Aurigma on Twitter!
hyperlinked  
#3 Posted : Saturday, August 9, 2008 9:47:43 PM(UTC)
hyperlinked

Rank: Advanced Member

Groups: Member
Joined: 4/24/2008(UTC)
Posts: 31

Using the AddField method doesn't work for me. I need to upload some variables chosen by the user after the page is rendered.

Can I incorporate new field inputs in with AddField?
hyperlinked  
#4 Posted : Saturday, August 9, 2008 10:53:58 PM(UTC)
hyperlinked

Rank: Advanced Member

Groups: Member
Joined: 4/24/2008(UTC)
Posts: 31

By the way, adding the AddField methods to the BeforeUpload event doesn't work for me. It only works properly when I add it to the FullPageLoad event. If I add it to the BeforeUpload event, the first attempt to upload it fails to transmit any data. The second time will work because I assume that the variables are rendered by the previous send attempt or the BeforeUpload event didn't fire on the initial attempt for some reason.

BTW, FF on the Mac did not have any issues with the getAdditionalFormName method. It was only on the PC.
hyperlinked  
#5 Posted : Saturday, August 9, 2008 11:29:28 PM(UTC)
hyperlinked

Rank: Advanced Member

Groups: Member
Joined: 4/24/2008(UTC)
Posts: 31

Ok, I got this to work.

Here's some strange stuff I encountered though.

I was able to add user inputted variables using the AddField method attached to the BeforeUpload event, but only if I passed the session_id through the AddField method in the FullPageLoad event listener. I need to pass the session_id specifically because my server script does not receive the cookie when I use iu.AddCookie.

Once I pass the session_id, I'm able to use AddField in the BeforeUpload event and I'm able to use JavaScript to fetch the values of user inputted fields prior to upload.
hyperlinked  
#6 Posted : Saturday, August 9, 2008 11:34:16 PM(UTC)
hyperlinked

Rank: Advanced Member

Groups: Member
Joined: 4/24/2008(UTC)
Posts: 31

Whoops, I spoke too soon.

I thought I was able to read the values of my form variables into the BeforeUpload event using JavaScript, but it didn't work. I was using a version of my script that still had the getAdditionalFormName code in it.

The values that get passed along when I take getAdditionalFormName out are the default values. If I change the value, it doesn't change the value that the BeforeUploadEvent is reading because that value appears to be stuck at whatever it was when the FullPageLoad event fires.

Well, do you have any ideas how I can get user inputted variables into the AddField method so I can pass them to the server without using getAdditionalFormName?


Edited by user Saturday, August 9, 2008 11:46:45 PM(UTC)  | Reason: Not specified

hyperlinked  
#7 Posted : Sunday, August 10, 2008 2:35:38 AM(UTC)
hyperlinked

Rank: Advanced Member

Groups: Member
Joined: 4/24/2008(UTC)
Posts: 31

Ok, I did actually find a solution now. Sorry for all the posts.

Since the getAdditionalFormName method only fails on the PC in FF, I added some code so that when the user is on a Mac, getAdditionalFormName is called, but not when the user is on a PC.

Fortunately, when the user is on a PC, AddField behaves more reliably when called at the BeforeUpload event. On a PC, it will read variables set by the user after IU has loaded. This isn't the case on a Mac. BeforeUpload will ignore any variables set at runtime that are added to the upload using AddField.

Here's the end state of my script in case this helps you guys or someone else out there with a similar headache getting this to work across browsers.

BTW, there is MooTools framework code in my script, so it's not straight JavaScript. If you copy the browser recognition part of this script, it won't work right unless you're using MooTools. You'll have to convert those lines into JavaScript or the framework of your choice.

Code:

<script type="text/javascript" src="http://www.mysite.com/jscripts/iuembed.js"></script>

<div style="margin:5px; border:4px solid #ccc; padding:5px;">
<div style="width:750px; margin:8px auto;">
<script type="text/javascript">
<!--
	//<![CDATA[	
	function fullPageLoad()
	{    
		getImageUploader("ImageUploader1").RenameField("SourceFile_[ItemIndex]", "image");
		getImageUploader("ImageUploader1").AddField("session_id","{$SESSION_ID}");	
		getImageUploader("ImageUploader1").AddField("s","{$SESSION_ID}");	
		getImageUploader("ImageUploader1").AddField("autocom","gallery");	
		getImageUploader("ImageUploader1").AddField("req","dopost");	
		getImageUploader("ImageUploader1").AddField("wardrobe","1");	
		getImageUploader("ImageUploader1").AddField("thumbnail","1");	
		getImageUploader("ImageUploader1").AddField("member_id","{$MEMBERID}");	

	}
		
	function ImageUploader1_BeforeUpload() {

		if ($('transparent').checked) {
			getImageUploader("ImageUploader1").AddField("transparent",$('transparent').value);	
		}
		if ($('addtocal').checked) {
			getImageUploader("ImageUploader1").AddField("date_id",$('date').value);	
			getImageUploader("ImageUploader1").AddField("addtocal",$('addtocal').value);			
		}
		
		getImageUploader("ImageUploader1").AddField("category_id",$('category_id').value);	
		getImageUploader("ImageUploader1").setButtonStopText("Stop");
		needToHideButtonStop = false;	
	}
		
	function ImageUploader1_Progress(Status, Progress, ValueMax, Value, StatusText) {
		//Stop button should be displayed only during the upload process. If the upload 
		//completed (either successfully or not), the button should be hidden.
		needToHideButtonStop = (Status=="COMPLETE" || Status=="ERROR" || Status=="CANCEL");
	}
		
	//Create JavaScript object that will embed Image Uploader to the page.
	var iu = new ImageUploaderWriter("ImageUploader1", 760, 300);
		
	//For ActiveX control full path to CAB file (including file name) should be specified.
	iu.activeXControlCodeBase = "ImageUploader5.cab";
	iu.activeXControlVersion = "5,1,10,0";
		
	//For Java applet only path to directory with JAR files should be specified (without file name).
	iu.javaAppletJarFileName = "ImageUploader5.jar";
	iu.javaAppletCodeBase = "assets/";
	iu.javaAppletCached = true;
	iu.javaAppletVersion = "5.1.10.0";
		
	iu.showNonemptyResponse = "dump";
				
	//Set and configure advanced details view.
	iu.addParam("PaneLayout", "OnePane");
	iu.addParam("UploadView", "Thumbnails");
	iu.addParam("DetailsPreviewThumbnailSize", "30");
	iu.addParam("UploadThumbnailFitMode", "1");
	iu.addParam("ShowButtons", "false");
	iu.addParam("PaneBackgroundColor", "#ffffff");

	if (Browser.Platform.mac) {
		iu.addParam("AdditionalFormName", "advupload");
	}	
		
	//Configure License Keys
	iu.addParam("LicenseKey", "XXXXX-XXXXX-XXXXX-XXXXX-XXXXX");
		
	//Configure upload settings.
	iu.addParam("FilesPerOnePackageCount", "1");
	iu.addParam("AutoRecoverMaxTriesCount", "1");
	iu.addParam("AutoRecoverTimeOut", "10000");
	iu.addParam("MaxConnectionCount", "3");
	iu.addParam("AllowRotate", "false");
	iu.addParam("AllowAutoRotate", "true");
	iu.addParam("UploadPaneShowDescriptions", "false");
	iu.addParam("DropFilesHereText", "\.jpg, \.gif \.png formats are accepted");
	iu.addParam("DropFilesHereImageFormat", "Url=http://www.mysite.com/images/background_uploadbox.gif;Width=750;Height=250;Position=Center;");


	if (iu.AddCookie) {
	    iu.AddCookie('session_id={$SESSION_ID}');
	    iu.AddCookie('s={$SESSION_ID}');
	}
		
	//Set several URLs files should be uploaded to. In a real life most likely
	//you will specify URLs to different servers, however in this demo the single
	//server and page is used for brevity.
	iu.addParam("Action", "http://www.mysite.com/index.php?");
		
	//Configure URL where to redirect after upload.
	iu.addParam("RedirectUrl", "http://www.mysite.com/index.php?act=mylists&CODE=review_upload&mid={$MEMBERID}");
		
		
	//Configure miscellaneous settings.
	iu.addParam("ShowDebugWindow", "true");
	iu.addParam("BackgroundColor", "#ffffff");
	iu.addParam("ShowContextMenu", "false");
		
	//Concurrent upload feature and advanced details view are not supported in Java version yet. 
	//This way we need to get Java version working in standard mode (sequential upload with standard
	//progress dialog).
		iu.addEventListener("BeforeUpload", "ImageUploader1_BeforeUpload");

	if (iu.getControlType() == "ActiveX"){
		iu.addParam("SilentMode", "false");
		var needToHideButtonStop = false;
		
		iu.addEventListener("Progress", "ImageUploader1_Progress");
		
		//Use timer to check whether to hide the Stop button. It allows to avoid the button flickering.
		window.setInterval("if (needToHideButtonStop) {getImageUploader('ImageUploader1').setButtonStopText(''); needToHideButtonStop = false;}", 500);
	}
	iu.fullPageLoadListenerName = "fullPageLoad";
		
	//Tell Image Uploader writer object to generate all necessary HTML code to embed 
	//Image Uploader to the page.
	iu.writeHtml();

	//]]>
//-->
</script>

<form action="http://www.mysite.com/index.php?" id="advupload" name="advupload">
	<input type="hidden" name="autocom" value="gallery" />
	<input type="hidden" name="req" value="dopost" />
	<input type="hidden" name="thumbnail" value="1" />
	<input type="hidden" name="member_id" value="{$MEMBERID}">

        <p>
	<h2>Upload Images</h2>
	</p>
	<table style="text-align:left;" cellspacing="4" style="margin-left:20px; margin-top:10px;">
	<tr valign="top">
		<td align="right"><strong>Category:</strong></td>
		<td align="left">
			<select style="width:200px;" id="category_id" name="category_id" class="customselect" tabindex="2">
			<option value="">--Not Selected</option>
			{$categories}
			<option value="new" style="font-style:italic;">--New Category</option>
			</select>
		</td>
	</tr>
	
	</table>
	<br clear="all" />
	<div class="formbuttonrow" style="margin-top:20px;">
		<input type="button" onclick="getImageUploader('ImageUploader1').Send();" value="Upload Images" />
	</div>
	</form>
</div>
</div>

Edited by user Sunday, August 10, 2008 2:38:01 AM(UTC)  | Reason: Not specified

Dmitry  
#8 Posted : Monday, August 11, 2008 8:21:45 PM(UTC)
Dmitry

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 8/3/2003(UTC)
Posts: 1,070

Thanks: 1 times
Was thanked: 12 time(s) in 12 post(s)
Hello,

Glad to here that you solve the problem.

As I understand you pass some objects values to Image Uploader Java in Java Script. What are these objects?
Code:
getImageUploader("ImageUploader1").AddField("date_id",$('date').value);

The function $(…) returns object by identifier. Could you post full client script here? Unfortunately it is not clear what causes the problem in FF PC.
Btw: why do you pass two cookies in the script?
Code:
iu.AddCookie('session_id={$SESSION_ID}');
iu.AddCookie('s={$SESSION_ID}');

The second call overrides the cookie, so you need to pass cookie in one function call.
Sincerely yours,
Dmitry Sevostyanov

UserPostedImage Follow Aurigma on Twitter!
Users browsing this topic
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.