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

Notification

Icon
Error

Version 3 - Making Image Uploader Looking Like File Open Dialog

Options
Go to last post Go to first unread
Previous Topic Next Topic
praxisinc  
#1 Posted : Thursday, September 2, 2004 2:33:00 AM(UTC)
praxisinc

Rank: Member

Groups: Member
Joined: 5/12/2004(UTC)
Posts: 49
AdditionalFolderNavigator property should have the same value for both controls (Image Uploader and Combo Box) in order they were synchronized. It is new behaviour of version 3.x.

Also don't forgot that version 3.x has new CLSIDs:

Code:
<HTML>
	<HEAD>
		<script language="javascript">
var iBitBucket = 0;
var iDesktop = 1;
var iMyComputer = 2;
var iMyDocuments = 3;
var iMyMusic = 4;
var iMyPictures = 5;
var iMyVideo = 6;
var iNetwork = 7;

var oPopup;

//Check if appropriate special folder (My Documents, Desktop, etc) exist. 
//If some of these folder is missing, hide appropriate button.
function processButton(sName, iFolderId)
{
	if (!document.getElementById("ImageUploader").CanGoToFolder(iFolderId))
	{
		document.getElementById(sName + "Holder").style.display = "none";
	}
}

function checkButtons()
{
	 	processButton("Desktop", iDesktop);
	 	processButton("MyDocuments", iMyDocuments);
	 	processButton("MyComputer", iMyComputer);
	 	processButton("MyPictures", iMyPictures);
	 	processButton("MyVideo", iMyVideo);
	 	processButton("Network", iNetwork);
}

//Show pop-up menu for selecting current view mode
//(thumbnails or details)
function showPopupMenu(){
	oPopup = window.createPopup();
	var oPopupBody = oPopup.document.body;
	var sHTML = "<table width='100' height='40' cellspacing='0' " +
		"style='border:1px solid #ACA899;font-size:11px;font-family:arial;cursor:default'>" + 
		"<tr onmouseover='this.style.backgroundColor=\"#316AC5\";' " + 		
		"onmouseout='this.style.backgroundColor=\"#FFFFFF\";' " + 
		"onclick='parent.ImageUploader.FolderView=0;parent.oPopup.hide();'" + 
		"><td width='16' align='center'><img src='Images/";
	if (window.ImageUploader.FolderView==0){
		sHTML = sHTML + "dot";
	} 	
	else{
		sHTML = sHTML + "spacer";
	}	
	sHTML = sHTML + ".gif' width='6' height='6'></td><td>Thumbnails</td></tr>" + 
		"<tr onmouseover='this.style.backgroundColor=\"#316AC5\";' " +
		"onmouseout='this.style.backgroundColor=\"#FFFFFF\";' " +
		"onclick='parent.ImageUploader.FolderView=3;parent.oPopup.hide();'" + 
		"><td width='16' align='center'><img src='Images/"
	if (window.ImageUploader.FolderView==3){
		sHTML = sHTML + "dot";
	} 	
	else{
		sHTML = sHTML + "spacer";
	}		
	sHTML = sHTML + ".gif' width='6' height='6'></td><td>Details</td></tr></table>"
	oPopupBody.innerHTML = sHTML;
	oPopup.show(615 - document.body.scrollLeft, 44 - document.body.scrollTop, 100, 40, document.body);
}
		</script>
		<style>
.largeButton{
	width:80px;
	height:55px;
	font-size:11px;
}

.largeButton2{
	width:80px;
	height:25px;
	font-size:11px;
}
		</style>
	</HEAD>
	<BODY onload="checkButtons();" bgcolor="#ECE9D8">
		<table cellpadding="0" cellspacing="3" border="0">
			<tr>
				<td align="right" style="font-size:11px;font-family:arial">Look in:</td>
				<td>
					<table cellpadding="0" cellspacing="0" border="0">
						<tr>
							<td>
								<object id="ExplorerCombo" name="ExplorerCombo" codeBase="ImageUploader3.cab" 
									classid="clsid:[b]92E7E45A-D8C8-480E-AF99-176E43997CAA[/b]"
									height="24" width="460" viewastext>
									[b]<param name="AdditionalFolderNavigator" value="ImageUploader1">[/b]
									<param name="PaneBackgroundColor" value="#ffffff">
									<param name="BackgroundColor" value="#ECE9D8">
									<param name="Padding" value="0">
								</OBJECT>
							</td>
							<td>
								<button onclick="document.getElementById('ImageUploader').GoToPreviousFolder();">
									<img width="16" height="16" src="Images/Back.gif"></button>
							</td>
							<td>
								<button onclick="document.getElementById('ImageUploader').GoToParentFolder();">
									<img width="16" height="16" src="Images/Up.gif"></button>
							</td>
							<td>
								<button onclick="showPopupMenu();" id="ButtonView">
									<img width="22" height="16" src="Images/View.gif"></button>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td valign="top" bgcolor="F9F8F3" style="border:1px window-inset #CBC8BA">
					<table cellpadding="0" cellspacing="0" border="0">
						<tr>
							<td height="425" valign="top">
								<table>
									<tr id="DesktopHolder">
										<td>
											<button title="Desktop" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iDesktop);">
												<img width="32" height="32" src="Images/Desktop.gif">

												Desktop
											</button>
										</td>
									</tr>
									<tr id="MyComputerHolder">
										<td>
											<button title="My Computer" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iMyComputer);">
												<img width="32" height="32" src="Images/MyComputer.gif">

												My Computer
											</button>
										</td>
									</tr>
									<tr id="MyDocumentsHolder">
										<td>
											<button title="My Documents" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iMyDocuments);">
												<img width="32" height="32" src="Images/MyDocuments.gif">

												My Documents
											</button>
										</td>
									</tr>
									<tr id="MyPicturesHolder">
										<td>
											<button title="My Pictures" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iMyPictures);">
												<img width="32" height="32" src="Images/MyPictures.gif">

												My Pictures
											</button>
										</td>
									</tr>
									<tr id="MyVideoHolder">
										<td>
											<button title="My Video" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iMyVideo);">
												<img width="32" height="32" src="Images/MyVideo.gif">

												My Video
											</button>
										</td>
									</tr>
									<tr id="NetworkHolder">
										<td>
											<button title="Network" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iNetwork);">
												<img width="32" height="32" src="Images/Network.gif">

												Network
											</button>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
								<table>
									<tr>
										<td>
											<button title="Select All" class="largeButton2" 
												onclick="document.getElementById('ImageUploader').SelectAll();">Select All</button>
										</td>
									</tr>
									<tr>
										<td>
											<button title="Upload" class="largeButton2" 
												onclick="document.getElementById('ImageUploader').Send();">Upload</button>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
				<td>
					<object id="ImageUploader" name="ImageUploader" codeBase="ImageUploader3.cab" 
						classid="clsid:A18962F6-E6ED-40B1-97C9-1FB36F38BFA8"
						width="540" height="490" viewastext>
						[b]<param name="AdditionalFolderNavigator" value="ImageUploader1">[/b]
						<param name="Action" value=".">
						<param name="PaneBackgroundColor" value="#ffffff">
						<param name="BackgroundColor" value="#ffffff">
						<param name="PreviewThumbnailActiveColor" value="#f8b330">
						<param name="PreviewThumbnailInactiveColor" value="#eeeeee">
						<param name="FolderView" value="Thumbnails">
						<param name="UploadView" value="Details">
						<param name="Layout" value="TwoPanes">
						<param name="PreviewThumbnailSize" value="100">
						<param name="TreePaneWidth" value="-1">
						<param name="Padding" value="0">
						<param name="SignatureFilter" value="Images">
						<param name="ShowDebugWindow" value="true">
						<param name="ShowButtons" value="false">
						<param name="UploadSourceFile" value="true">
						<param name="ShowSubfolders" value="true">
						<param name="ShowContextMenu" value="false">
						<param name="ShowStatusPane" value="false">
					</object>
				</td>
			</tr>
		</table>
	</BODY>
</HTML>

Edited by user Monday, December 24, 2007 4:53:39 PM(UTC)  | Reason: Not specified
Back to top
Fedor  
#2 Posted : Thursday, September 2, 2004 2:50:00 AM(UTC)
Fedor

Rank: Advanced Member

Groups: Member, Administration, Moderator
Joined: 7/28/2003(UTC)
Posts: 1,660

Thanks: 5 times
Was thanked: 76 time(s) in 74 post(s)
AdditionalFolderNavigator property should have the same value for both controls (Image Uploader and Combo Box) in order they were synchronized. It is new behaviour of version 3.x.

Also don't forgot that version 3.x has new CLSIDs:

Code:
<HTML>
	<HEAD>
		<script language="javascript">
var iBitBucket = 0;
var iDesktop = 1;
var iMyComputer = 2;
var iMyDocuments = 3;
var iMyMusic = 4;
var iMyPictures = 5;
var iMyVideo = 6;
var iNetwork = 7;

var oPopup;

//Check if appropriate special folder (My Documents, Desktop, etc) exist. 
//If some of these folder is missing, hide appropriate button.
function processButton(sName, iFolderId)
{
	if (!document.getElementById("ImageUploader").CanGoToFolder(iFolderId))
	{
		document.getElementById(sName + "Holder").style.display = "none";
	}
}

function checkButtons()
{
	 	processButton("Desktop", iDesktop);
	 	processButton("MyDocuments", iMyDocuments);
	 	processButton("MyComputer", iMyComputer);
	 	processButton("MyPictures", iMyPictures);
	 	processButton("MyVideo", iMyVideo);
	 	processButton("Network", iNetwork);
}

//Show pop-up menu for selecting current view mode
//(thumbnails or details)
function showPopupMenu(){
	oPopup = window.createPopup();
	var oPopupBody = oPopup.document.body;
	var sHTML = "<table width='100' height='40' cellspacing='0' " +
		"style='border:1px solid #ACA899;font-size:11px;font-family:arial;cursor:default'>" + 
		"<tr onmouseover='this.style.backgroundColor=\"#316AC5\";' " + 		
		"onmouseout='this.style.backgroundColor=\"#FFFFFF\";' " + 
		"onclick='parent.ImageUploader.FolderView=0;parent.oPopup.hide();'" + 
		"><td width='16' align='center'><img src='Images/";
	if (window.ImageUploader.FolderView==0){
		sHTML = sHTML + "dot";
	} 	
	else{
		sHTML = sHTML + "spacer";
	}	
	sHTML = sHTML + ".gif' width='6' height='6'></td><td>Thumbnails</td></tr>" + 
		"<tr onmouseover='this.style.backgroundColor=\"#316AC5\";' " +
		"onmouseout='this.style.backgroundColor=\"#FFFFFF\";' " +
		"onclick='parent.ImageUploader.FolderView=3;parent.oPopup.hide();'" + 
		"><td width='16' align='center'><img src='Images/"
	if (window.ImageUploader.FolderView==3){
		sHTML = sHTML + "dot";
	} 	
	else{
		sHTML = sHTML + "spacer";
	}		
	sHTML = sHTML + ".gif' width='6' height='6'></td><td>Details</td></tr></table>"
	oPopupBody.innerHTML = sHTML;
	oPopup.show(615 - document.body.scrollLeft, 44 - document.body.scrollTop, 100, 40, document.body);
}
		</script>
		<style>
.largeButton{
	width:80px;
	height:55px;
	font-size:11px;
}

.largeButton2{
	width:80px;
	height:25px;
	font-size:11px;
}
		</style>
	</HEAD>
	<BODY onload="checkButtons();" bgcolor="#ECE9D8">
		<table cellpadding="0" cellspacing="3" border="0">
			<tr>
				<td align="right" style="font-size:11px;font-family:arial">Look in:</td>
				<td>
					<table cellpadding="0" cellspacing="0" border="0">
						<tr>
							<td>
								<object id="ExplorerCombo" name="ExplorerCombo" codeBase="ImageUploader3.cab" 
									classid="clsid:[b]92E7E45A-D8C8-480E-AF99-176E43997CAA[/b]"
									height="24" width="460" viewastext>
									[b]<param name="AdditionalFolderNavigator" value="ImageUploader1">[/b]
									<param name="PaneBackgroundColor" value="#ffffff">
									<param name="BackgroundColor" value="#ECE9D8">
									<param name="Padding" value="0">
								</OBJECT>
							</td>
							<td>
								<button onclick="document.getElementById('ImageUploader').GoToPreviousFolder();">
									<img width="16" height="16" src="Images/Back.gif"></button>
							</td>
							<td>
								<button onclick="document.getElementById('ImageUploader').GoToParentFolder();">
									<img width="16" height="16" src="Images/Up.gif"></button>
							</td>
							<td>
								<button onclick="showPopupMenu();" id="ButtonView">
									<img width="22" height="16" src="Images/View.gif"></button>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<tr>
				<td valign="top" bgcolor="F9F8F3" style="border:1px window-inset #CBC8BA">
					<table cellpadding="0" cellspacing="0" border="0">
						<tr>
							<td height="425" valign="top">

								<table>
									<tr id="DesktopHolder">
										<td>
											<button title="Desktop" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iDesktop);">
												<img width="32" height="32" src="Images/Desktop.gif"><br>
												Desktop
											</button>
										</td>
									</tr>
									<tr id="MyComputerHolder">
										<td>
											<button title="My Computer" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iMyComputer);">
												<img width="32" height="32" src="Images/MyComputer.gif"><br>
												My Computer
											</button>
										</td>
									</tr>
									<tr id="MyDocumentsHolder">
										<td>
											<button title="My Documents" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iMyDocuments);">
												<img width="32" height="32" src="Images/MyDocuments.gif"><br>
												My Documents
											</button>
										</td>
									</tr>
									<tr id="MyPicturesHolder">
										<td>
											<button title="My Pictures" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iMyPictures);">
												<img width="32" height="32" src="Images/MyPictures.gif"><br>
												My Pictures
											</button>
										</td>
									</tr>
									<tr id="MyVideoHolder">
										<td>
											<button title="My Video" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iMyVideo);">
												<img width="32" height="32" src="Images/MyVideo.gif"><br>
												My Video
											</button>
										</td>
									</tr>
									<tr id="NetworkHolder">
										<td>
											<button title="Network" class="largeButton" 
												onclick="document.getElementById('ImageUploader').GoToFolder(iNetwork);">
												<img width="32" height="32" src="Images/Network.gif"><br>
												Network
											</button>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td>
								<table>
									<tr>
										<td>
											<button title="Select All" class="largeButton2" 
												onclick="document.getElementById('ImageUploader').SelectAll();">Select All</button>
										</td>
									</tr>
									<tr>
										<td>
											<button title="Upload" class="largeButton2" 
												onclick="document.getElementById('ImageUploader').Send();">Upload</button>
										</td>
									</tr>
								</table>
							</td>
						</tr>
					</table>
				</td>
				<td>
					<object id="ImageUploader" name="ImageUploader" codeBase="ImageUploader3.cab" 
						classid="clsid:A18962F6-E6ED-40B1-97C9-1FB36F38BFA8"
						width="540" height="490" viewastext>
						[b]<param name="AdditionalFolderNavigator" value="ImageUploader1">[/b]
						<param name="Action" value=".">
						<param name="PaneBackgroundColor" value="#ffffff">
						<param name="BackgroundColor" value="#ffffff">
						<param name="PreviewThumbnailActiveColor" value="#f8b330">
						<param name="PreviewThumbnailInactiveColor" value="#eeeeee">
						<param name="FolderView" value="Thumbnails">
						<param name="UploadView" value="Details">
						<param name="Layout" value="TwoPanes">
						<param name="PreviewThumbnailSize" value="100">
						<param name="TreePaneWidth" value="-1">
						<param name="Padding" value="0">
						<param name="SignatureFilter" value="Images">
						<param name="ShowDebugWindow" value="true">
						<param name="ShowButtons" value="false">
						<param name="UploadSourceFile" value="true">
						<param name="ShowSubfolders" value="true">
						<param name="ShowContextMenu" value="false">
						<param name="ShowStatusPane" value="false">
					</object>
				</td>
			</tr>
		</table>
	</BODY>
</HTML>

========================================================

02/14/2008, Fedor

This topic is out of date.

See Open File Dialog sample for recent info.

========================================================

Edited by user Wednesday, October 29, 2008 2:50:51 PM(UTC)  | Reason: Not specified

Best regards,

Fedor Skvortsov
Back to top
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.

Powered by YAF.NET 2.2.3 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.154 seconds.